jQuery

jQuery 选择器

2017-07-06  本文已影响0人  sky丶星如雨

以下皆为举例说明

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/

上一篇下一篇

猜你喜欢

热点阅读