jquery系列之三——筛选

1. 匹配第N个元素:.eq(index|-index)

注意:参数index指示元素基于0的位置,这个元素的位置是从0算起。

-index指示元素的位置,从集合中的最后一个元素开始倒数。(1算起)

示例1:获取匹配的第二个元素 

html:
<p> This is just a test.</p>
<p> So is this</p>
jquery:
$("p").eq(1)

 结果:

<p> So is this</p>

示例二:获取匹配的倒数第二个元素 

html:

<p> This is just a test.</p>
<p> So is this</p>
jquery:
$("p").eq(-2)

 结果:

<p> This is just a test.</p>

2. 获取第一个元素:.first()

示例:获取匹配的第一个元素。  

html:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
jquery:
$('li').first()
 结果:
[ <li>list item 1</li> ]

3. 获取最后一个元素:.last()

示例:获取匹配的最后一个元素。  

html:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
jquery:
$('li').last()
结果:
[ <li>list item 5</li> ]

4. 检查当前的元素是否含有某个特定的类,如果有,则返回true:.hasClass(class)

它等价于:is('.'+class)

示例:给包含有某个类的元素进行一个动画。 

html:
<div class="protected"></div>
<div></div>
jquery:
$("div").click(function(){
  if($(this).hasClass("protected") )
    $(this).animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});
 

5. 筛选包含指定元素的元素:.has(expr|ele)

示例:给含有ul的li加上背景色。  

html:
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
jquery:
$('li').has('ul').css('background-color', 'red');
 

6. 删除与指定表达式匹配的元素:.not(expr|ele)

示例:从p元素中删除带有id为select 的元素。  

html:
<p>Hello</p>
<p id="selected">Hello Again</p>
jquery:
$("p").not($("#selected"))
结果:
[ <p>Hello</p> ]

 

7. 选取匹配的子集:.slice(start, [end])

示例1:选择第一个p元素。  

html:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
jquery:
$("p").slice(0, 1);
结果:
[ <p>Hello</p> ]

示例2:选取第最后一个p元素。  

html:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
jquery:
$("p").slice(-1);
结果:
[ <p>World</p> ]

 

8. 查找子元素:.children([expr])

注意:parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素。

示例1:查找div中的每个子元素。  

html:
<p>Hello</p>
<div>
   <span>Hello Again</span>
</div>
<p>And Again</p>
jquery:
$("div").children()
结果:
[ <span>Hello Again</span> ]

示例2:查找div中的.selected 的类子元素。  

html:
<div>
   <span>Hello</span>
   <p class="selected">Hello Again</p>
   <p>And Again</p>
</div>
jquery:
$("div").children(".selected")
结果:
[ <p class="selected">Hello Again</p> ]

9. 查找所有与指定表达式匹配的元素:.find(expr|obj|ele)

注意:

children() 方法返回被选元素的所有直接子元素。 

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

示例1:从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。  

html:
<p>
  <span>Hello</span>, how are you?
</p>
jquery:
$("p").find("span")
结果:
[ <span>Hello</span> ]

10. 查找当前元素后面的同辈元素:.next([expr])

示例1:找到每个段落的后面紧邻的同辈元素。  

html:
<p>Hello</p>
<p>Hello Again</p>
<div>
  <span>And Again</span>
</div>
jquery:
$("p").next()
结果:
[ 
  <p>Hello Again</p>, 
  <div>
     <span>And Again</span>
  </div> 
]

示例2:找到每个段落的后面紧邻的同辈元素中类名为selected的元素。 

html:
<p>Hello</p>
<p class="selected">Hello Again</p>
<div>
   <span>And Again</span>
</div>
jquery:
$("p").next(".selected")
结果:
[ 
  <p class="selected">Hello Again</p>
]

11. 查找当前元素后面所有的同辈元素:.nextAll([expr])

示例:给第一个div之后的所有元素加个类。  

html:
<div></div>
<div></div>
<div></div>
<div></div>
jquery:
$("div:first").nextAll().addClass("after");
结果:
[ 
  <div class="after"></div>
  <div class="after"></div>
  <div class="after"></div>
]

12. 查找所有与指定表达式匹配的父亲元素:.parent([expr])

示例1:查找每个段落的父元素。  

html:
<div>
   <p>Hello</p>
   <p>Hello</p>
</div>
jquery:
$("p").parent()
结果:
[ 
 <div>
   <p>Hello</p>
   <p>Hello</p>
 </div>
]

示例2:查找段落的父元素中每个类名为selected的父元素。

html:
<div>
   <p>Hello</p>
</div>
<div class="selected">
   <p>Hello Again</p>
</div>

 jquery:

$("p").parent(".selected")
结果:
[ 
  <div class="selected">
     <p>Hello Again</p>
  </div>
]

13. 查找所有与指定表达式匹配的祖先元素:.parents([expr])

注意:不包含根元素

示例1:找到每个span元素的所有祖先元素。  

html:
<html>
   <body>
      <div>
        <p>
          <span>Hello</span>
        </p>
        <span>Hello Again</span>
      </div>
   </body>
</html>
jquery:
$("span").parents()
结果:
[ 
 <body>
  <div>
    <p>
       <span>Hello</span>
    </p>
    <span>Hello Again</span>
   </div>
 </body>
]

示例2:找到每个span的所有是p元素的祖先元素。  

jquery:
$("span").parents("p")
结果:
[ 
  <p>
     <span>Hello</span>
  </p>
]

14. 查找当前元素之前紧邻的一个同辈元素:.prev([expr])

注意:只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。

示例1:找到每个段落紧邻的前一个同辈元素。  

html:
<p>Hello</p>
<div>
   <span>Hello Again</span>
</div>
<p>And Again</p>
jquery:
$("p").prev()
结果:
[ 
 <div>
   <span>Hello Again</span>
 </div>
]

示例2:找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

html:
<div>
  <span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>

jquery:

$("p").prev(".selected")
结果:
[ <p class="selected">Hello Again</p> ]

15. 查找当前元素之前所有同辈元素集合:.prevAll([expr])

示例1:给最后一个之前的所有div加上一个类(注意,并不包括它本身)。  

html:
<div></div>
<div></div>
<div></div>
<div></div>
jquery:
$("div:last").prevAll().addClass("before");
结果:
[ 
  <div class="before"></div>,
  <div class="before"></div>,
  <div class="before"></div>
]

16. 查找当前元素的所有同辈元素集合:.siblings([expr])

示例1:找到每个div的所有同辈元素。  

html:
<p>Hello</p>
<div>
   <span>Hello Again</span>
</div>
<p>And Again</p>
jquery:
$("div").siblings()
结果:
[ 
  <p>Hello</p>,
  <p>And Again</p>
]

示例2:找到每个div的所有同辈元素。  

html:
<div>
  <span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>
jquery:
$("div").siblings(".selected")
结果:
[ 
  <p class="selected">Hello Again</p>
]

相关推荐