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;可实      现同样功能。