day16-Jquery筛选器

一、前言

　　之前我们写了一些筛选器，今天我们就来讨论其他的筛选器。这边我们只练习常用的筛选器，更多的详情：http://jquery.cuishifeng.cn/

二、过滤

2.1、eq(index|-index)

描述：

获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。

1 2 3 4 5

HTML 代码: <p> This is just a test.</p> <p> So is this</p>   jQuery 代码: $("p").eq(1)

2.2、first()

描述： 获取第一个元素

1 2 3 4 5 6 7 8 9 10 11

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()

2.3、last()

描述：获取最后个元素

1 2 3 4 5 6 7 8 9 10 11

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()

 2.4、hasClass(class)

描述：检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。

1 2 3 4 5

HTML 代码： <div id="i1" class="protected"></div><div></div>   jQuery 代码: $('#i1').hasClass("protected")

三、查找

3.1、复习

1 2 3 4 5 6

$(this).next()   //当前的标签的下一个标签 $(this).prev()   //当前的标签的上一个标签 $(this).parent()  //当前标签的父标签 $(this).children()  //当前标签的所有子标签 $(this).siblings()  //获取兄弟标签 $(this).parent().siblings().find(".content") //查找.content标签

3.2、nextAll([expr])

描述：查找当前元素之后所有的同辈元素。

1 2 3 4 5 6 7 8 9 10 11 12

HTML代码：     <div>         <a>test1</a>         <a id="i1">test2</a>         <a>test3</a>         <a>test4</a>     </div> jQuery 代码: $("#i1").nextAll()   结果： jQuery.fn.init(2) [a, a, prevObject: jQuery.fn.init(1)]

 3.3、nextUntil([e|e][,f])

描述：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

1 2 3 4 5 6 7 8 9 10 11

HTML 代码: <div>         <a>test1</a>         <a id="i1">test2</a>         <a>test3</a>         <a id="i2">test4</a>     </div>   jQuery 代码: >>>$("#i1").nextUntil("#i2"); jQuery.fn.init [a, prevObject: jQuery.fn.init(1)]

 其他的，像prevAll()，prevUntil()指的是上一个所有的，和元素之前的，知道遇到的那个元素为止。parents()，parentsUntil()的指的你父亲的，这个jquery api有。