eq(index|-index)
概述
获取第N个元素
参数
index
一个整数,指示元素基于0的位置,这个元素的位置是从0算起。
-index
一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。(1算起)
示例
参数index描述:
获取匹配的第二个元素
HTML 代码:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代码:
$("p").eq(1)
结果:
[ <p> So is this</p> ]
参数-index描述:
获取匹配的第二个元素
HTML 代码:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代码:
$("p").eq(-2)
结果:
[ <p> This is just a test.</p> ]
first()
V1.4概述
获取第一个元素
示例
描述:
获取匹配的第一个元素
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> ]
last()
V1.4概述
获取最后个元素
示例
描述:
获取匹配的最后个元素
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> ]
hasClass(class)
概述
检查当前的元素是否含有某个特定的类,如果有,则返回true。
这其实就是 is("." + class)。
参数
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 });
});
filter(expr|obj|ele|fn)
概述
筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
参数
expr
字符串值,包含供匹配当前元素集合的选择器表达式。
jQuery object
现有的jQuery对象,以匹配当前的元素。
element
一个用于匹配元素的DOM元素。
function(index)
一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。
示例
参数selector描述:
保留带有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> ]
参数selector描述:
保留第一个以及带有select类的元素
HTML 代码:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery 代码:
$("p").filter(".selected, :first")
结果:
[ <p>Hello</p>, <p class="selected">And Again</p> ]
回调函数 描述:
保留子元素中不含有ol的元素。
HTML 代码:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
jQuery 代码:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
结果:
[ <p>How are you?</p> ]
is(expr|obj|ele|fn)
概述
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合,或者表达式无效,都返回'false'。 '''注意:'''在jQuery 1.3中才对所有表达式提供了支持。在先前版本中,如果提供了复杂的表达式,比如层级选择器(比如 + , ~ 和 > ),始终会返回true
参数
expr
字符串值,包含供匹配当前元素集合的选择器表达式。
jQuery object
现有的jQuery对象,以匹配当前的元素。
element
一个用于匹配元素的DOM元素。
function(index)
一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。
示例
参数expr 描述:
由于input元素的父元素是一个表单元素,所以返回true。
HTML 代码:
<form><input type="checkbox" /></form>
jQuery 代码:
$("input[type='checkbox']").parent().is("form")
结果:
true
回调函数 描述:
判断点击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");
}
});
结果:
- list item 1 - one strong tag
- list item 2 - two strong tags
- list item 3
- list item 4
- list item 5
map(callback)//就是把标签内的内容表示出来
概述
将一组元素转换成其他数组(不论是否是元素数组)
你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
参数
callback
给每个元素执行的函数
示例
描述:
把form中的每个input元素的值建立一个列表。
HTML 代码:
<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<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> ]
has(expr|ele)
概述
保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代,含有匹配后代的对象将得以保留。
参数
expr
一个选择器字符串。
element
一个DOM元素
示例
描述:
给含有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');
not(expr|ele|fn)
概述
删除与指定表达式匹配的元素
参数
expr
一个选择器字符串。
element
一个DOM元素
function(index)
一个用来检查集合中每个元素的函数。this是当前的元素。
示例
描述:
从p元素中删除带有 select 的ID的元素
HTML 代码:
<p>Hello</p><p id="selected">Hello Again</p>
jQuery 代码:
$("p").not( $("#selected")[0] )
结果:
[ <p>Hello</p> ]
slice(start, [end])
概述
选取一个匹配的子集
与原来的slice方法类似
参数
start
开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起。
end
结束选取自己的位置,如果不指定,则就是本身的结尾。
示例
描述:
选择第一个p元素
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(0, 1).wrapInner("<b></b>");
结果:
[ <p><b>Hello</b></p> ]
描述:
选择前两个p元素
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(0, 2).wrapInner("<b></b>");
结果:
[ <p><b>Hello</b></p>,<p><b>cruel</b></p> ]
描述:
只选取第二个p元素
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(1, 2).wrapInner("<b></b>");
结果:
[ <p><b>cruel</b></p> ]
描述:
只选取第二第三个p元素
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(1).wrapInner("<b></b>");
结果:
[ <p><b>cruel</b></p>, <p><b>World</b></p> ]
描述:
选取第最后一个p元素
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(-1).wrapInner("<b></b>");
结果:
[ <p><b>World</b></p> ]