jquery选择器

这几天在学习css选择器,看了几位大佬的文章,觉得写的不错,所以作为参考,自我总结了下,以便后面使用。

js选择器:

一、基本选择器

1.id选择器:$("#id")  //$("#"+var)此时var是个字符串变量,可实现动态选择

2.类选择器:$(".class")

3.标签选择器:$("tag")

4.属性选择器:$("[attr='value']")(包括前缀查找:$("[attr=va-]")和后缀查找$("[attr$=lue]"))

       注意:$("[attr"+var+"]")此时属性值是个变量。

5.this选择器:$(this)表示当前所在元素

6.组合查找:将上述选择器组合起来查找

 1)$("tag.class")

 2)$("tag[attr=value]")

 2)

7.多项选择器:是指用,分隔选择器后,组合起来查找  //选出的元素是按照他们在HTML中出现的顺序排列的,且不会出现重复元素

1) $("p,div")

2)$(".class1,.class2")

3)$("p.class1,div.class2")

二、层级选择器:$(“ancestor descendant"),层级选择器是根据DOM结构设计的,层级间需要用空格隔开。但组合选择器间无需用空格隔开。(组合选择器用于兄弟节点间做区别,层级选择器用于父子节点间做区别):$("div.class ul[attr=value]")/$("div.class li.class")   //层级间可以不是直属关系

三、子选择器:$("parent child")层级间必须是直属关系,节点必须是节点的直属子节点:

四、过滤器:一般不单独使用,而是加在选择器后面实现对元素的精确定位

1)$('ul.lang li:first-child')  //选出ul的第一个子元素(选出的是li,且是父元素的第一个子元素)

2)$('ul.lang li:last-child')   //选出ul的最后一个子元素

3)$('div.lang p:nth-child(2)') //选出父元素(div)的第二个子元素且子元素需为p元素

4)$('div.lang p:nth-child(even)') //选出父元素中序号为偶数的子元素,且此元素需为p元素

5)$('div.lang p:nth-child(odd)') //选出父元素中序号为奇数的子元素,且此元素需为p元素

五、表单相关

来自

:input:可以选择