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>
]