JQ基础

一.选择器

1.基本选择器：基本选择器是Jquery中最经常使用的选择器，也是最简单的选择器，他经过元素id、class和标签名等来查找DOM元素。在网页中，每一个id名称只能使用一次，class容许重复使用。

 

#id       根据给定的id匹配一个元素  $("#test")选取id为test的元素

.class    根据给定的类名匹配元素    $(".test")选取全部class为test的元素

element   根据给定的元素名匹配元素  $("p")选取全部的 元素

*         匹配全部元素              $("*")选取全部的元素

selector1,selector2,...selectorN    $("div,span,p.myClass")选取全部 ,和拥有class为myClass的 标签的一组元素

 

2.层次选择器：经过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等。

$("ancestor descendant")   选取ancestor元素里的全部descendant(后代)元素    $("div span")选取 里的全部的元素

 

$("parent>child")选取parent元素下的child(子)元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素   $("div>span")选取

元素下元素名是的子元素

 

$("prev+next")  选取紧接在prev元素后的next元素   $(".one+div")选取class为one的下一个

同辈元素。

 

$("prev~siblings")选取prev元素以后的全部siblings元素    $("#two~div")选取id为two的元素后面的全部

同辈元素。

 

3.过滤选择器

1.基本过滤选择器

a.:first   选取第一个元素     $("div:first")选取全部

元素中第一个                              

元素

b.:last    选取最后一个元素   $("div:last")选取全部

元素中最后一                              个

元素

c.:not(selector) 去除全部与给定选择器匹配的元素   $("input:not(.mayclass)")选取class不是myClass元素

  

d.:even/:odd选取索引是偶数/奇数的全部元素

 

e.:eq(index)/gt(index)/lt(index)选取索引等于/大于/小于index的元素

 

f.:header   选取全部的标题元素   $(":header")选取网页中全部的

g.:animated  选取当前正在执行动画的全部元素   $("div:animated")

h.:focus  选取当前得到焦点的元素  

2.内容过滤选择器

a.:contain(text)   选取含有文本内容为text的元素   $("div:contains('我')")选取含有文本‘我’的div元素

b.:empty 选取不包含子元素或文本的空元素    $("div:empty")选取不包含子元素的空元素

c.:has(selector)选取含有选择器所匹配的元素的元素  $("div:has(p)")选取含有元素的元素

d.:parent      选取含有子元素或文本的元素       $("div:parent")选取拥有子元素（包括文本元素）的 元素

 

3.可见性过滤选择器

a.:hidden    选取全部不可见的元素

b.:visible   选取全部可见的元素   $("div:visible")选取全部可见的 元素

 

4.属性过滤选择器：经过元素的属性来获取相应的元素

a.[attribute]     选取拥有此属性的元素   $("div[id]")选取拥有属性id的元素    $("div[id]")选取拥有属性id的元素

 

b.[attribute=value]    选取属性值为value的元素     $("div[title=test]")选取属性title为"test"的 元素

 

c.[attribute!=value] 不等于value

  [attribute^=value] 以value开始的元素

  [attribute$=value] 以value结束的元素

  [attribute*=value] 含有value的元素

  [attribute|=value] 选取属性等于给定字符串或以该字符串为前缀的元素 

  [attribute~=value] 选取属性用空格分隔的值中包含一个给定值得元素

  [attribute1][attribute2][attributeN]

 

5.子元素过滤选择器

a.:nth-child(index/even/odd/equation) 选取每一个父元素下的第index个子元素或奇偶元素（index从1算起）

  

b.:first-child   选取每一个父元素的第一个子元素    $("ul li:first-child") 选取每一个 中第一个 元素

 

c.:last-child    选取每一个父元素的最后一个子元素

 

d.only-child   若是某个元素是它父元素中惟一的子元素，那么将会被匹配。若是父元素中含有其它元素，则不会被匹配。

 

6.表单对象属性过滤选择器

a. :enable/disabled  选取全部可用/不可用元素     $("#form1 :enabled") 选取id 为form1的表单内的全部可用/不可用元素

 

b. :checked    选中所被选中的元素（单选框、多选框） $("input:checked")

 

c. :selected    选取全部被选中的选项元素    $("select option:selected")

 

7. 表单选择器

 :input  :text   :password  :radio   :checkbox  :submit    :image  :reset  :button  :file   :hidden

 

二.插入节点

append()       向每一个匹配的元素内部追加内容

appendTo()     将全部匹配的元素追加到指定的元素中  $(A).appendTo(B)将A追加到B

prepend()      向每一个匹配的元素内部前置内容   

prependTo()    将全部匹配的元素前置到指定的元素中

after()        在每一个匹配的元素以后插入内容

insertAfter()  将全部匹配的元素插入到指定元素的后面

before()       在每一个匹配元素以前插入内容

insertBefore() 将全部匹配的元素插入到指定的元素的前面

     

三.detach()和remove()同样，也是从DOM中去掉全部匹配的元素，但detach()不会把匹配的元素从JQuery对象中删除，于是能够在未来再使用这些元素。   与remove()不一样的是，全部绑定的事件、附加的数据等都会保存下来。

 

四.clone()复制节点后，被复制的新元素不具备任何行为。clone(true)含义是   复制元素的同时复制元素中所绑定的事件。 

 

五.replaceWith():将全部匹配的元素都替换成指定的HTML或者DOM元素

   replaceAll():颠倒了replaceWith()的用法。

 

六.wrap():将某个节点用其余元素包裹起来。

   wrapAll():将全部匹配的元素用一个元素来包裹。它不一样于wrap(),wrap()方法是将全部的元素进行单独的包裹。

   wrapInner():将每个匹配的元素的子内容（包括文本节点）用其余结构化的标记包裹起来。

七.removeAttr():删除元素属性

   attr():获取属性

 

八.attr("class") 获取元素的class

   addClass()追加样式

   若是给一个元素添加了多个class值，就至关于合并了它们的样式。

   若是有不一样的class设定了同同样式属性，则后者覆盖前者。

   removeClass()   $p.removeClass(" high another");同时移除多个

 

九.toggle():主要控制行为上的重复切换，若是元素原来是隐藏的则显示它，            若是原来是显示的则隐藏它。

 

十.hasClass() 判断元素中是否含有某个class,若是有返回true.

 

十一.遍历节点

a.children():取得匹配元素的子元素集合。children()方法只考虑子元素不考虑其余后代元素。

b.next():取得匹配元素后面紧邻的同辈元素。

c.prev():取得匹配元素前面紧邻的同辈元素。

d.siblings():取得匹配元素先后全部的同辈元素（除他自身）。

e.closet():取得最近的匹配元素。首先检查当前元素是否匹配，若是匹配则直接返回元素自己。若是不匹配则            向上查找父元素，逐级向上直到找到匹配选择器的元素。若是什么都没有，返回一个空的JQuery对            象。

f.find()/filter()/nextAll()

 

十二.$(document).ready()方法和window.onload()方法有类似的功能，可是在执行时机方面有区别。               window.onload()是在网页中全部元素彻底加载到浏览器后才执行，即JavaScript此时才能够访问页面中       的任何元素。而经过jQuery中的$(documnent).ready()方法注册的事件处理程序，在DOM彻底就绪时就可       以被调用。

      JavaScript的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数，所以       不能在现有的行为上添加新的行为。而$(document).ready()方法会在现有的行为上添加新的行为。这些       行为函数会根据注册的顺序依次执行。

十三.jQuery有两个合成事件——hover()方法和toggle()方法。

     hover(enter,leave)方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数         （enter）;当光标移出这个元素时，会触发指定的第二个函数(leave)。

    $(function(){

         $("#panel h5.head").hover(function(){

                 $(this).next().show();

           },function(){

                 $(this).next().hide(); 

          });

     });

     toggle()方法用于模仿鼠标连续单击事件。第一次单击元素时，触发指定的第一个函数；当再次点击同一      元素时，则触发指定的第二个函数。最经常使用的是切换元素的可见状态。若是元素时可见的，单击切换后则      为隐藏；若是元素时隐藏的，单击切换后则为可见的。

十四.事件冒泡：事件会按照DOM的层次结构像水泡同样不断向上直至顶端。

     事件对象：event

     阻止事件冒泡：stopPropagation()    event.stopPropagation(); 

十五.阻止默认行为：网页中的元素有本身的默认行为，例如单击超连接后会跳转、单击“提交”按钮后表单会      提交，有时须要阻止元素的默认行为。preventDefault()方法来阻止元素的默认行为。return false;可实      现一样功能。