day16-筛选器 - 爱码网

一、前言

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

二、过滤

2.1、eq(index|-index)

描述：

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

HTML 代码:
<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:
$("p").eq(1)

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

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

2.4、hasClass(class)

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

HTML 代码：
<div ></div><div></div>

jQuery 代码:
$('#i1').hasClass("protected")

三、查找

3.1、复习

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

3.2、nextAll([expr])

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

HTML代码：
    <div>
        <a>test1</a>
        <a >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])

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

HTML 代码:
<div>
        <a>test1</a>
        <a >test2</a>
        <a>test3</a>
        <a >test4</a>
    </div>

jQuery 代码:
>>>$("#i1").nextUntil("#i2");
jQuery.fn.init [a, prevObject: jQuery.fn.init(1)]

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