以下皆为举例说明
ID选择器 ：$("#id");
类名选择器 ： $(".class");
标签选择器 ： $("ele");
群组选择器 ： $("#id , .class , ele");
后代选择器 ： $("ul li a");
等价方法 ： $("#ID").find("ele");
通配符选择器 : $("*"); // 一般用在局部环境中
比如 ： $("ul li *"); 选择到ul里的li的所有标签
选择器灵活使用，可以使得选择元素更加精准和快速；
还有一种选择器，可以在ID和类中指明元素前缀，比如
$("div.box") // 获取类名为box的div
类有一个特殊的模式，就是同一DOM多个类名，对于这种模式，我们有多个类可以使用，但要注意和群组选择器之间的区别
$(".box.pic") // 获取类名既有box又有pic的元素
警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery内部的选择器引擎处理字符串的时间就越长。
子选择器 ： $("#ID > ele") ;
等价方法 ： $("#ID").children("ele");
next选择器 : $("div + p") //只获取某一个节点的后一个同级DOM对象
等价方法 ： $("div").next("p")
prev选择器 ：＄("div").prev("p") // 获取同级的上一个节点
等价方法 ： $("div").prevAll("p") // 获取同级上面所有的节点
siblings选择器 : $("div").siblings("p") // 获取同级上下所有的节点
nextAll选择器 ： $("div~p") // 获取某节点后面所有的同级节点
等价方法 ：$("div').nextAll("p")
如果 等价方法里不书写任何内容，其实，就相当于里面书写了*号，通常情况下，不建议这样使用，对性能有一定的影响且精准度不佳
比如
$("div").next(); // next方法里没有限定节点，所以，无论与div同级的下一个节点是什么，都会被选中，而如果限定为p节点，那么假如，div的下一个同级节点不是p，那么将不会被选中
那么这么多选择器，在实际工作中，我们究竟应该如何选择呢？
其实，无论从性能，还是语义化及jQuery本身来考虑，我们都应该选择jQuery提供的方法，毕竟css的模式过于死板，所以，如果jQuery提供了独立的方法来代替某些选择器的功能，我们建议优先使用此类方法。
属性选择器
$("a[title]") // 标签为a，且具有title属性的节点
$("a[title = num]") // 标签为a，且具有title属性且属性值为num的节点
$("a[title != num]") // 标签为a，且具有title属性且属性值不为num的节点
过滤选择器
$("li:first") // 获取第一个li
$("li:last") // 获取最后一个li
$("li:not(.red)") // 获取li 里类名不是red的所有节点
$("li:even") // 获取偶数li，索引号从0开始
$("li:odd") // 获取奇数li，索引号从0开始
$("li:eq(3)") // 获取li里的第四个，索引号从0开始，所以是3+1； 值可以为负，即从尾部开始计算
$("li:gt(2)") // 获取索引号大于2的所有元素，索引号从0开始
$("li:lt(2)") // 获取索引号小于2的所有元素，索引号从0开始
$("focus") // 选择当前焦点闪烁的元素 注意，是网页初始状态就已经激活的焦点，并不是事件触发的，所以需做以下处理
$(":focus").get(0).focus();
jQuery为最常规的过滤选择器提供了专用的方法，用来提高性能和效率
$("li").first(); // 在使用first() , last()方法时，为了避免相同元素造成的影响，应指明其父元素
$("li").last();
$("li").not();
$("li").eq(2);
内容过滤器
$("div:contains('baidu.com')") // 选取含有"baidu.com"文本的元素
$("div:empty") // 选取不包含子元素或空文本的元素
$(":has(.red)") // 选取子元素含有class是red的元素
比如 ： $("ul:has('.red')") // 选择的就是整个ul ， 而不是含有red类名的li
等价方法 ： $("ul").has(".red")
$(":parent") // 选取含有子元素或文本的元素
$("li").parent() // 选取当前元素的父节点
$("li").parentUntil("body") // 选取当前元素的父节点遇到body节点停止
可见性过滤器
$(":hidden") // 选取所有不可见元素
$(":visible") // 选取所有可见元素
子元素过滤器
$("li:first-child") // 获取每个父元素的第一个子元素
$("li:last-child") // 获取每个父元素的最后一个子元素
$("li:only-child") // 获取只有一个子元素的元素
// 下面三个选择器，索引值皆为从1开始
$("li:nth-child(even)") // 获取每个父元素的偶数li元素
$("li:nth-child(odd)") // 获取每个父元素的奇数li元素
$("li:nth-child(2)") // 获取每个父元素的第2个li元素
其他方法
$(".red").is("li")
$("li").slice(0,2) // 前三个元素被选中
$("li").slice(2,4) // 3,4被选中
$("li").slice(0,-2) // 从后向前数，倒数第一个和倒数第二个不选，其他全选
$("li").slice(2,-2) // 前两个不选，后两个不选，其他全选
$("div").contents() // 返回子节点数量（包含文本节点）
$("li").filter(".red , :first-child , :last-child") // 可灵活组合选择器
// 可实现精确查找
$(function () {
$("li").filter(function () {
return $(this).attr("class") == "red" && $(this).attr("title") == "列表3";
}).css("background", "#ccc");
})
本文只是列出一些较为常用的选择器，并不是说jQuery只有这些选择器，具体请参考jQuery官方网站 http://jquery.com/
网友评论