jQuery中容易被疏忽的强大选择器和过滤器

jQuery中选择器总体上包含了CSS3的选择器,但某些方面却由于CSS3的选择器,虽然使用各种选择器,最后也能达到目标,但在项目中,为了做的更少的代码量,使用某些特定的选择器,减少人为的判断似乎更加值得一试

1>  :not(selector) 和 not(expr|ele|fn) 

:not(selector) 

not(expr|ele|fn)

$("input:not(:checked)")

对于not函数的用法

$("p").not(‘#selected‘) /*使用选择器*/

$("p").not( $("#selected")[0] ) /*使用 js DOM对象而不是jQuery对象*/

$(‘p‘).not(document.getElementById(‘selected‘))

$("p").not(function(index){ //使用函数
    
    return $(p).get(index)==$(‘#selected‘);
})

2> :eq(index)与eq(-index|index)

$("tr:eq(1)") #使用伪类选择器只能从正向0算起

$("p").eq(1) #从正向0算起
$("p").eq(-1) #从倒数第一位算起,起始值为 -1

3>:gt(index) 与lt:(index) 

$("tr:gt(0)") #从上向下截取

$("tr:lt(5)") #从下向上截取

4>:animated用来过滤处于动画状态的元素

这里很多人做动画下拉菜单时容易出现闪烁,原因是没判断动画是否已停止

 $("div:not(:animated)").animate({ left: "+=20" }, 1000); //这种情况几乎用不到,一般用到的是 和 is搭配
 
 #下拉菜单判断
 
 $(‘ul#dropmenu‘).hover(function(e){
     if(!$(this).is(‘:animated‘))  /**不要担心动画停止不下来,从而强制使用stop,这样导致菜单卡主了很难看*/
     {
     $(‘ul#dropmenu‘).slideDown();
     }
 },function(e){
      if(!$(this).is(‘:animated‘))
     {
       $(‘ul#dropmenu‘).slideUp();
     }
 });

5>:hidden与:visibble

:hidden这个属性应该重点使用,因为他主要匹配2中DOM,一种是input[type=hidden],另一种是css display:hidden,特别是后一种,要重点使用,这样可以做切换效果

:visible不太重要,可以忽视

$("tr:hidden") //匹配css display=hidden

$("input:hidden")  //匹配表达

6>:empty与empty()

:empty匹配所有不包含子元素或者文本的空元素,但是empty()是用来删除内容的,删除匹配的元素集合中所有的子节点。

$("td:empty")
$("p").empty();//等价于 $(‘p‘).html(‘‘);

7>:has(selector)与has(selector|element)

用来过滤

$(‘li‘).has(‘ul‘).css(‘background-color‘, ‘red‘); //过滤包含 ul的 li
$(‘li:has("ul"‘).css(‘background-color‘,red);

8>andself()

包含自己

<div><p>First Paragraph</p><p>Second Paragraph</p></div>
$("div").find("p").andSelf().addClass("border"); //将div本身加入


9.siblings([selector]),prevAll([selector]),nextAll([selector]);

获取兄弟节点


10.slice(start,end)

切片过滤器

HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(0, 1).wrapInner("<b></b>");

结果

[ <p><b>Hello</b></p> ]


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。