首页 > 代码库 > JQ选择器篇2

JQ选择器篇2

 

1)层级选择器

a.子代选择器  >

  eg: 查找div 子代的类包含content的元素 $(“div>.content”)

b.所有子代选择器  (某个元素里面的所有元素)

eg 查找表单from里面的所有input元素  $(“form input”)

c.prev+next

匹配所有紧接在 prev 元素后的 next 元素

eg :查找紧接着所有lable元素后面为input的元素 $(“lable+input”

d.prev~slibings

匹配 prev 元素之后的所有同辈 siblings 元素

eg:查找div之后所有的input的同辈元素$(“div~input”)

 

以上都是小意思啦,我们用的最多的要属于下面的

 

1. $(“div”).chidren(“.content”) 子代选择方法 和$(“div>.content”)一样

2.$(“form”).find(“input”)  找出form表里面所有的input 元素 同$(“form input”)

3.$(“lable”).next(“input”) $(“lable+input”)  一样

4.$(“div”).nextall(“input”)  $(“div~input”)

5.$(“div”).nextUnitl(“input”)  在之后的同辈元素中一直往下找,到发现input元素为止,其实就是在同辈中查找div input之间的元素

6.$(“div”).prev(“img”)  查找紧跟div上面的img元素

7.$(“div”).prevall(“img ”) div 前面的所有同辈元素中的img元素

8.$(“div”).prevUntil(“input”) ,在同辈元素中往前匹配,知道input结束

 

9.$(“input”).parent(); 查找出所有input 元素的父辈元素

  $(“input”).parent(“div”)  查找所有input 元素父辈元素为div的元素 、

   Next,prev也是这两种情况

  是不是有点绕看个代码就清楚了

 技术分享

 

 

 

所以嘛加个参数其实是父辈的选择器用来过滤父辈

10.$(“input”).parents(“div”) input素有的父辈元素中(并不包含根元素html) 中查找出所有的Div元素

11.$(“input”).preantsUntil(“div”)  查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。  

12.最后来个强大的,差点将他忘了

$(“input”).siblings(); 查找input的所有同元素 (就是讲next prev 结合起来了)

 

 

 

好了,层级选择器大约都这些了。。。

总结到这里,发现自己以前都没有认真看api ,,来教一下大家这么看jq api吧

这里随便找个api截取一下图 (图片也有字哦,)

http://hemin.cn/jq/nextUntil.html

 技术分享

 

 

好下面我截个关于版本的图

 技术分享

 

JQ选择器篇2