// 这里的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



 

filter()

$(“ul li”>.filter(“:contains(‘佳能’),:contains(‘尼康’),:contains(‘电话’)”)).addClass(”promoted”);

Filter(expr)其中expr可以是多个选择器的组合

Filter()是指操作当前元素集,删除不匹配的元素,得到一个一个新的集合,filter()是得到这些元素中符合条件的元素,是对自身集合元素筛选。

Filter()与not()过滤条件相反,都是对选中的元素集合的操作过滤。

has()筛选出包含特定后代的元素,作用于自身。Has()实际上是根据后代元素来筛选元素

not()

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