jQuery筛选

jQuery之筛选

1、eq(index|-index)

获取第N个元素。返回：jQuery
参数：
index：一个整数，指示元素基于0的位置，这个元素的位置是从0算起。--Integer
-index：一个整数，指示元素的位置，从集合中的最后一个元素开始倒数(1算起)。--Integer
示例：获取匹配的第二个元素。
HTML代码：

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

jQuery代码：

$("p").eq(1);

结果：

[<p>So is this</p>]

2、first()

获取第一个元素。返回：jQuery
示例：获取匹配的第一个元素。
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()

获取最后一个元素。返回：jQuery
示例：

参见2、first();

4、hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，返回true。其实就是is("."+class)。返回值：Boolean
参数：
class：用于匹配的类名。--String
示例：给包含某个类的元素进行一个动画。
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、filter(expr|obj|ele|fn)

筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式。返回值：jQuery
参数：
expr：字符串值，包含供匹配当前元素集合的选择器表达式。--String
jQuery object：现有的jQuery对象，以匹配当前的元素。--Object
element：一个用于匹配元素的DOM元素。--Expression
function(index)：一个函数用来作为测试元素的集合。它接收一个参数index，这是元素在jQuery集合中的索引。在函数，this指的是当前的DOM元素。

示例：保留带有select类的元素。
HTML代码：

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery代码：

$("p").filter(".selected");

结果：

<p class="selected">And Again</p>

6、is(expr|obj|ele|fn)

根据选择器、DOM元素或jQuery对象来检测匹配元素的集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合，或表达式无效，都返回‘false’。注意在jQuery1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器(+,~,>)，始终会返回true。返回值：Boolean
参数：
expr：字符串值，包含供匹配当前元素集合的选择器表达式。--String
jQuery object：现有的jQuery对象，以匹配当前的元素。--Object
element：一个用于匹配元素的DOM元素。--Expression
function(index)：一个函数用来作为测试元素的集合。接受一个参数index，这是元素在jQuery集合中的索引。在函数，this指的是当前的DOM元素。--Function
示例：判断点击li标签增加背景色为红色，如果点击的是第2个strong,当前的li增加背景色为绿色
HTML代码：

<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
<li>list item 3</li>
</ul>

jQuery代码：

$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {
return $('strong', this).length === 2;
});
if ( isWithTwo ) {
$li.css("background-color", "green");
} else {
$li.css("background-color", "red");
}
});

7、map(callback)

将一组元素转换成其它数组(不论是否是元素数组)
你可用一个函数建立一个列表，不论是值，属性还是CSS样式，或者其它特别形式。这都可以用‘$.map()’来方便的建立。返回值：jQuery
参数：
callback：给每个元素执行的函数。--Function
示例：把form中的每个input元素的值建立一个列表。
HTML代码：

<p><b>Values：</b></p>
<form>
<input type="text" name="name" value="Join"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org"/>
</form>

jQuery代码：

$("p").append($("input").map(function(){
return $(this).val();
}).get().join(", "));

结果：

[ <p>John, password, http://ejohn.org/</p> ]

待续......