// 这里的selector表示具体的选择器
jQuery( "selector:first" )
jQuery的:first选择器用于获取匹配到的第一个元素,将其封装为jQuery对象并返回。
:first选择器等价于:eq(0)选择器。
与:first选择器相对的是:last选择器,用于获取匹配到的最后一个元素。
注意::first选择器与:first-child选择器的不同之处在于:
:first选择器只匹配一个元素,并且是匹配到的第一个元素;
:first-child选择器则需要判断匹配到的元素是否是其父元素的第一个子元素,如果是就保留,否则将被舍弃。
示例&说明
以下面这段HTML代码为例:
<div id="n1">
<div id="n2">
<ul id="n3">
<li id="n4">item1</li>
<li id="n5">item2</li>
<li id="n6">item3</li>
</ul>
</div>
<div id="n7">
<ul id="n8">
<li id="n9">item1</li>
<li id="n10">item2</li>
</ul>
</div>
</div>
现在,我们想要查找第一个div标签,则可以编写如下jQuery代码:
// 选择了id为n1的一个元素
$("div:first");
接着,查找所有ul标签中的第一个li标签,则可以编写如下jQuery代码:
// 选择了id为n4的一个元素
// 虽然HTML中有两个ul标签,但:first不是分别取每个ul中的第一个li,而是从上到下只要找到一个符合条件的元素就立即返回
$("ul li:first");
$("ul li:first-child");//分别取每个ul中的第一个li
// 这里的selector表示具体的选择器
jQuery( "selector:first-child" )
jQuery的:first-child选择器用于匹配作为父元素的第一个子元素的元素,将其封装为jQuery对象并返回。:first-child选择器等价于:nth-child(1)选择器。
与该选择器相对的是:last-child选择器,用于匹配作为父元素的最后一个子元素的元素。
注意::first-child选择器与:first选择器的不同之处在于:
:first选择器只匹配一个元素,并且是匹配到的元素中的第一个元素;
:first-child选择器则需要判断匹配到的元素是否是其父元素的第一个子元素,如果是就保留,否则将被舍弃。
示例&说明
以下面这段HTML代码为例:
<div id="n1">
CodePlayer
<div id="n2">
<ul id="n3">
<li id="n4">item1</li>
<li id="n5" class="c">item2</li>
<li id="n6" class="c">item3</li>
</ul>
</div>
<div id="n7">
<ul id="n8">
<li id="n9">item1</li>
<li id="n10">item2</li>
</ul>
</div>
</div>
现在,我们查找作为父元素的"长子"的div标签,则可以编写如下jQuery代码:
// 选择了id分别为n1、n2的两个元素
// n1是父元素body标签的"长子",n2是父元素n1的"长子"
// 虽然在n1之内、n2之前有文本内容,但文本内容不算子元素,因此n2仍然是n1的"长子"
$("div:first-child");
接着,查找所有匹配ul li的元素,再查找其中那些元素是父元素的"长子",则可以编写如下jQuery代码:
// 选择了id分别为n4、n9的两个元素
$("ul li:first-child");
查找所有包含类名c的li标签,再查找这些元素是否是父元素的"长子",对应的jQuery代码如下:
// 没有选择任何元素,返回一个空的jQuery对象。
// 虽然包含类名"c"的li标签有n5、n6两个元素,但它们都不是父元素的"长子",因此无法匹配
$("li.c:first-child");
// 这里的selector表示具体的选择器
jQuery( "selector:first-of-type" )
返回封装了匹配作为父元素的第一个该类型子元素的元素的jQuery对象。
如果找不到任何相应的匹配,则返回一个空的jQuery对象。
jQuery先会根据选择器selector去查找所有匹配的元素,再判断它们是否是自己父元素的所有此类型的子元素中的"长子"(第一个元素),如果是就保留,否则就舍弃掉该元素。
示例&说明
以下面这段HTML代码为例:
<div id="n1">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
现在,我们查找作为父元素的span类型子元素中的"长子"的span标签,则可以编写如下jQuery代码:
// 选择了id分别为n4、n8的两个元素
// n4虽然不是n2的第一个子元素,但它是n2所有span类型子元素中的第一个,因此可以匹配
$("span:first-of-type");
接着,查找所有包含类名abc的元素,而且它们必须是父元素的该类型子元素中的"长子",则可以编写如下jQuery代码:
// 选择了id分别为n2、n8的两个元素
// .abc可以匹配id分别为n2、n5、n8的3个元素,n2是n1所有div类型子元素中的第一个,n8是n7所有span类型子元素中的第一个,但n5不是n2所有span类型子元素中的第一个,因此不能匹配n5。
$(".abc:first-of-type");
jQuery( ":parent" )
jQuery的:parent选择器用于匹配所有有内容的元素,将其封装为jQuery对象并返回。
有内容的DOM元素,是指该元素包含子元素或者文本内容(哪怕是空格或换行符,也算有文本内容)。
与该选择器相对的是:empty选择器,用于匹配所有空的元素。
返回封装了所有有内容的DOM元素的jQuery对象。
示例&说明
以下面这段HTML代码为例:
<div id="n1">
<div id="n2">
<span id="n3">张三</span>
<span id="n4"> </span>
</div>
<div id="n5">
<span id="n6"></span>
</div>
<div id="n7">
</div>
</div>
现在,我们想要查找id为n1的div标签内所有有内容的元素,则可以编写如下jQuery代码:
// 选择了id分别为n2、n3、n4、n5、n7的5个元素
$("#n1 :parent");
查找所有有内容的span标签,则可以编写如下jQuery代码:
// 选择了id分别为n3、n4的两个元素
$("span:parent");
jQuery( ":input" )
返回封装了所有表单信息元素的jQuery对象。
如果找不到任何相应的匹配,则返回一个空的jQuery对象。
示例&说明
以下面这段HTML代码为例:
<div id="n1">
<form id="n2">
<input id="n3" type="button" value="Input Button"/>
<input id="n4" type="checkbox" />
<input id="n5" type="file" />
<input id="n6" type="hidden" />
<input id="n7" type="image" />
<input id="n8" type="password" />
<input id="n9" type="radio" />
<input id="n10" type="reset" />
<input id="n11" type="submit" />
<input id="n12" type="text" />
<select id="n13">
<option id="n14">Option</option>
</select>
<textarea id="n15"></textarea>
<button id="n16">Button</button>
</form>
</div>
现在,查找所有的表单信息元素,则可以编写如下jQuery代码:
// 选择了id分别为n3 ~ n16(除了n14)的13个元素
$(":input");
jQuery( ":text" )
返回封装了所有单行文本框元素的jQuery对象。
如果找不到任何相应的匹配,则返回一个空的jQuery对象。
示例&说明
以下面这段HTML代码为例:
<div id="n1">
<form id="n2">
<input id="n3" type="button" value="Input Button"/>
<input id="n4" type="checkbox" />
<input id="n5" type="file" />
<input id="n6" type="hidden" />
<input id="n7" type="image" />
<input id="n8" type="password" />
<input id="n9" type="radio" />
<input id="n10" type="reset" />
<input id="n11" type="submit" />
<input id="n12" type="text" />
<select id="n13">
<option id="n14">Option</option>
</select>
<textarea id="n15"></textarea>
<button id="n16">Button</button>
</form>
</div>
现在,我们查找所有的单行文本框元素,即可编写如下jQuery代码:
// 选择了id为n12的一个元素
$(":text");
- jQuery的:selected选择器用于匹配所有选中的option元素,将其封装为jQuery对象并返回。
选中的option元素指的是具有selected属性的option标签.
- 返回封装了所有选中的option元素的jQuery对象。
- 如果找不到任何相应的匹配,则返回一个空的jQuery对象。
示例&说明
以下面这段HTML代码为例:
<div id="n1">
<form id="n2">
<label id="n3">CodePlayer</label>
<input id="n4" type="text" disabled="disabled" >
<input id="n5" type="checkbox" checked="checked" />
<input id="n6" type="checkbox" />
<input id="n7" type="radio" checked="checked" />
<input id="n8" type="radio" />
<button id="n9" type="button" disabled="disabled">Button</button>
<select id="n10">
<option id="n11" selected="selected">item1</option>
<option id="n12">item2</option>
</select>
</form>
</div>
//现在,我们查找所有选中的option元素,即可编写如下jQuery代码:
// 选择了id为n11的一个元素
$(":selected");
jQueryObject.is( expr )
is()函数用于判断当前jQuery对象所匹配的元素是否符合指定的表达式。只要其中有至少一个元素符合该表达式就返回true,否则返回false。
这里的表达式包括:选择器(字符串)、DOM元素(Element)、jQuery对象、函数。
该函数属于jQuery对象(实例)。
is()函数实际上是判断当前jQuery对象所匹配的元素与指定表达式expr所表示的元素是否存在交集,如果存在交集就返回true,否则返回false。
如果expr参数为字符串,则将其视作jQuery选择器,用以表示该选择器所匹配的元素。
jQuery 1.6 新增支持:参数expr可以为DOM元素(Element)、jQuery对象或函数。
如果expr参数为函数,is()函数将根据匹配的所有元素遍历执行该函数,函数中的this将指向当前迭代的元素。is()还会为函数传入一个参数:即该元素在匹配元素中的索引。
函数expr的返回值应该为true或者false。该函数的返回值将决定is()的返回值。循环执行时,只要该函数的返回值有一次为true,is()函数就立即返回true,否则返回false。
is()函数的返回值为Boolean类型,以指示当前jQuery对象所匹配的元素与参数expr所表示的元素是否存在交集,如果存在交集,则返回true,否则返回false。
示例&说明
以下面这段HTML代码为例:
<div id="n1">
<div id="n2">
<ul id="n3" data_id="12">
<li id="n4">item1</li>
<li id="n5" class="foo bar">item2</li>
<li id="n6" class="level-2">item3</li>
</ul>
</div>
<div id="n7">
<input id="n8" name="username" type="text" value="1">
<input id="n9" name="orders" type="checkbox" checked="checked" value="1">
</div>
</div>
以下jQuery示例代码用于演示is()函数的具体用法:
var $n3 = $("#n3");
document.writeln( $n3.is("ul") ); // true
document.writeln( $n3.is("[data_id]") ); // true
var $n5 = $("#n5");
document.writeln( $n5.is(".foo") ); // true
document.writeln( $n5.is("li") ); // true
document.writeln( $n5.is("ul li") ); // true
document.writeln( $n5.is("p li") ); // false
var n5 = document.getElementById("n5");
document.writeln( $n5.is(n5) ); // true
var $li = $("li");
document.writeln( $n5.is($li) ); // true
// 判断li元素是否含有类名"level-index",这里的index表示li元素的索引值(0、1、2……)
document.writeln( $li.is( function(index){
return $(this).hasClass("level-" + index);
} ) ); // true
var $input = $("input");
document.writeln( $input.is(":text") ); // true
document.writeln( $input.is(":checked") ); // true
var div = document.getElementsByTagName("div");
var $n7 = $("#n7");
document.writeln( $n7.is(div) ); // true
jQueryObject.slice( startIndex [, endIndex ] )
slice()函数用于选取匹配元素中一段连续的元素,并以jQuery对象的形式返回。
该函数属于jQuery对象(实例)。
如果startIndex为负数,则表示startIndex + length,length表示匹配的元素个数(也可理解为从后向前计数)。
如果endIndex为负数,则表示endIndex + length,length表示匹配的元素个数(也可理解为从后向前计数)。
如果省略endIndex参数,则一直选取到集合末尾。
slice()函数的返回值为jQuery类型,返回一个新的jQuery对象,该对象封装了当前jQuery对象匹配的元素中索引从startIndex到endIndex(不包括endIndex)的一段连续的元素。
如果选取范围无效,将返回空的jQuery对象。
slice()函数并不会更改当前jQuery对象的元素匹配,选取的结果只反映在作为返回值的新的jQuery对象中。
请参考下面这段HTML演示代码:
<div id="n1">
<div id="n2">
<ul id="n3">
<li id="n4">item1</li>
<li id="n5" class="foo bar">item2</li>
<li id="n6">item3</li>
<li id="n7">item4</li>
<li id="n8">item5</li>
</ul>
</div>
</div>
以下jQuery示例代码用于演示slice()函数的具体用法:
// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
return $doms.map(function(){
return this.tagName + (this.id ? "#" + this.id : "");
}).get();
}
/* $("li") 匹配n4、n5、n6、n7、n8这5个元素 */
var $li = $("li");
// 选取第2个元素
var $sub1 = $("li").slice( 1, 2);
document.writeln( getTagsInfo( $sub1 ) ); // LI#n5
// 选取第4、5个元素
var $sub2 = $("li").slice( 3 );
document.writeln( getTagsInfo( $sub2 ) ); // LI#n7,LI#n8
// 选取第1~4个元素
// startIndex = length + (-5) = 0,endIndex = length + (-1) = 4
var $sub3 = $("li").slice( -5, -1);
document.writeln( getTagsInfo( $sub3 ) ); // LI#n4,LI#n5,LI#n6,LI#n7
$(“ul li”>.filter(“:contains(‘佳能’),:contains(‘尼康’),:contains(‘电话’)”)).addClass(”promoted”);
Filter(expr)其中expr可以是多个选择器的组合
Filter()是指操作当前元素集,删除不匹配的元素,得到一个一个新的集合,filter()是得到这些元素中符合条件的元素,是对自身集合元素筛选。
Filter()与not()过滤条件相反,都是对选中的元素集合的操作过滤。
has()筛选出包含特定后代的元素,作用于自身。Has()实际上是根据后代元素来筛选元素
jQueryObject.map( callback )
$().map();
map()函数将根据匹配的所有元素遍历执行该函数,函数中的this将指向当前迭代的元素。map()还会为函数传入两个参数:第一个参数就是该元素在匹配元素中的索引,第二个参数就是该元素。
每次执行callback函数的返回值将作为结果数组中的一个元素,如果函数的返回值为null或undefined,则不会被添加到结果数组中。map()函数的返回值就是封装该结果数组的jQuery对象。
map()函数的返回值为jQuery类型,返回封装指定函数执行结果的数组的jQuery对象。
一般通过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素。
示例&说明
以下面这段HTML代码为例:
<input id="n1" name="uid" type="checkbox" checked="checked" value="1">
<input id="n2" name="uid" type="checkbox" checked="checked" value="2">
<input id="n3" name="uid" type="checkbox" value="3">
<input id="n4" name="uid" type="checkbox" checked="checked" value="4">
以下jQuery示例代码用于演示map()函数的具体用法:
var $checkedUid = $("[name=uid]:checked");
// 将所有匹配元素的value值封装为结果数组,并返回封装了这个结果数组的jQuery对象
var $result = $checkedUid.map( function(index, element){
// 函数内部的this === element
return this.value;
} );
// 输出封装的结果数组中索引为1的元素
document.writeln( $result.get( 1 ) ); // 2
// 获取封装的整个结果数组
var array = $result.get();
document.writeln( array ); // 1,2,4
jQueryObject.end( )
end()函数用于返回最近一次"破坏性"操作之前的jQuery对象。
当前jQuery对象可能是通过调用之前的jQuery对象的特定方法创建的,使用该函数可以返回之前的jQuery对象。
该函数属于jQuery对象(实例)。
end()函数的返回值为jQuery类型,返回最近一次"破坏性"操作之前的jQuery对象。
只要调用jQuery对象的某个方法返回的是一个新创建的jQuery对象,则该操作被视为"过滤"操作或"破坏性"操作。jQuery对象的
add()、 addBack()、 andSelf()、 children()、 closest()、 contents()、 eq()、 filter()、 find()、 first()、 has()、 last()、 map()、 next()、 nextAll()、 nextUntil()、 not()、 parent()、 parents()、 parentsUntil()、 prev()、 prevAll()、 prevUntil()、 siblings()、 slice()、 clone()等方法均属于"破坏性"操作。
<p id="n1">
<span id="n2">A
<span id="n3">B</span>
</span>
<span id="n4">C
<label id="n5">D</label>
</span>
</p>
以下jQuery示例代码用于演示end()函数的具体用法:
var $p = $("p");
//这是一个破坏性操作,返回一个新的jQuery对象
var $p_span = $p.find("span");
document.writeln( $p_span.end() === $p ); // true
//这不是一个破坏性操作,css()和attr()返回的都是原jQuery对象,并没有创建一个新的jQuery对象
var $me = $p.css("color", "#333").attr("uid", "12");
document.writeln( $me.end() === $p ); // false
// $me和$p是同一个jQuery对象
document.writeln( $me === $p ); // true
var $span = $("span");
// 这是一个破坏性操作,虽然没有过滤掉任何元素,但返回的是一个新的jQuery对象
var $newSpan = $span.not(".foo");
document.writeln( $newSpan.end() === $span ); // true
// 如果之前没有破坏性操作,可能返回包含document的jQuery对象或空的jQuery对象(视具体情况而定)
document.writeln( $("label").end().length ); // 1 (document对象)
document.writeln( $("#n1").end().length ); // 0