一、基本选择器
1、id选择器
选择id值等于指定id元素,id值在文档中只能有一个,不能重复,所以得到的是唯一的元素。
$("#one")
2、class选择器
选择类名为指定class的所有元素。
$(".one")
3、element选择器
根据标签名获得元素集合。
$("p")
4、通配符选择器
选择文档中的所有元素。
$("*")
5、并列选择器
多种的选择方法联合使用,中间用逗号隔开。
$("#one,.one,p")
二、层次选择器
1、直系子元素
父元素下的指定子元素。
$("div>p")
2、prev+next
下一个兄弟元素。
$("li+li") //选择li元素的下一个li元素,所以剔除了第一个。
3、prev~siblings
指定元素接下来的所有指定兄弟元素。
$(".one~div") //选择class为one的元素之后的div兄弟元素
4、后代选择器
指定元素的指定后代集合。
$(".one div") //class为one的所有div后代
三、基本过滤选择器
1、指定元素集合的第一个
$("ul li:first") //获得ul标签下的第一个li元素
2、1、指定元素集合的最后一个
$("ul li:last") //获得ul标签下的最后一个li元素
3、取非元素
过滤掉
$("ul li:not(.one)") //获得ul标签下的li元素,但是不包含类名为one的。
4、偶数索引
索引从0开始,取为偶数的。
$("ul li:even")
5、奇数索引
索引从0开始,取为奇数的。
$("ul li:odd")
6、指定索引
元素集合下的指定位置的那一个。
$("ul li:eq(2)") //取ul标签下的第三个li元素。
7、大于指定索引
$("ul li:gt(2)") //取ul标签下索引大于2的li元素。
8、小于指定索引
$("ul li:lt(2)") //取ul标签下索引小于2的li元素。
9、标题选择器
取h1~h6的标题元素。
$(":header")
10、包含text文本
$("ul li:contains(今天早上下雨了~)") //取ul标签下的文本为"今天早上下雨了~"的li元素。
11、:empty
取不包含子元素或者文本为空的元素。
$("ul li:empty")
12、:has()
取选择器匹配的元素。
$("ul li:has(p)") //选取ul标签下的含有p标签的li元素。
13、:parent
取包含子元素或者文本的元素。
$("ul li:parent")
14、:hidden
选取不可见的元素。
$("ul li:hidden")
15、:visible
取可见的元素。
$("ul li:visible")
四、属性过滤选择器
1、[attribute]
拥有指定属性的元素,该属性有无值均可。
$("ul li[title]")
2、[attribute=value]
拥有指定属性,并且有指定值的元素。
$("ul li[title='今天早上下雨了~']")
3、[attribute!=value]
指定属性不等于指定值的元素,但是由于如果你没加指定属性,他默认为空,也算上去了。
$("ul li[title='今天早上下雨了~']")
4、[attribute^=value]
拥有指定属性,并且值是由value开头的元素。
$("ul li[title^='今天']")
5、[attribute$=value]
拥有指定属性,并且值是由value结尾的元素。
$("ul li[title$='今天']")
6、[attribute*=value]
拥有指定属性,并且值中包含vlaue的元素。
$("ul li[title$='今天']")
7、多个属性选择器合并使用
选择满足所有条件的。
$("ul li[title$='今天'][class='xixi']")
五、子元素过滤选择器
1、$("ul li:nth-child(3)")
选取ul标签下第三个li元素,这里有点类似":eq",但eq是索引从0开始,nth-child是从1开始
2、$("ul li:nth-child(odd)")
选取ul标签下序号为奇数的li,从1开始数。
3、$("ul li:nth-child(even)")
选取ul标签下序号为偶数的li,从1开始数。
4、$("ul li:nth-child(2n+1)")
这个就是计算得到的元素了,n从0开始。
5、$("ul li:first-child")
选择所有ul元素下的第一个li
6、$("ul li:last-child")
选择所有ul元素下的最后一个li
7、$("ul li:only-child")
选择所有ul元素下的li,并且只能有只能一个li。
六、表单元素选择器
1、$(":input")
选择所有的表单输入元素,包括input, textarea, select 和 button
2、$(":text")
选择所有的type类型为text的input元素。
3、$(":password")
选择所有的type类型为password的input元素。
4、$(":radio")
选择所有的type类型为radio的input元素。
5、$(":checkbox")
选择所有的type类型为checkbox的input元素。
6、$(":submit")
选择所有的type类型为submit的input元素。
7、$(":reset")
选择所有的type类型为reset的input元素。
8、$(":button")
选择所有的type类型为button的input元素。
9、$(":file")
选择所有的type类型为file的input元素。
七、表单过滤选择器
1、$(":enabled")
选择所有的可操作的表单元素。
2、$(":disabled")
选择所有的不可操作的表单元素。
3、$(":checked")
选择所有的被checked的表单元素。
4、$("select option:selected")
选择所有的select元素下的被selected的子元素。
八、父,子,兄弟节点查找方法
1、parent()
返回父节点,可以传入参数过滤。
$(".one").parent();
$(".one").parent(".box");
2、parents()
传入参数返回祖先元素,而不是限于父辈。
3、children()
返回子节点,可以传入参数限制。
4、prev()
返回上一个兄弟节点。
5、next()
返回下一个兄弟节点。
6、prevAll()
返回之前所有的兄弟节点。
7、nextAll()
返回接下来的所有兄弟节点。
8、siblings()
返回所有兄弟节点,不分前后。
9、find()
查找子孙辈节点,而不限于子代。
10、eq()
参数为索引,返回指定索引那一个。