jquery 常見選擇器以及一些方法

時間  2020-05-23
標籤 jquery 常見 選擇器 以及 一些 方法 欄目 JQuery 简体版
原文   原文鏈接

// 這裏的selector表示具體的選擇器
jQuery( "selector:first" )css

jQuery的:first選擇器用於獲取匹配到的第一個元素，將其封裝爲jQuery對象並返回。jquery

:first選擇器等價於:eq(0)選擇器。數組

與:first選擇器相對的是:last選擇器，用於獲取匹配到的最後一個元素。dom

 

注意：: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" )ui

jQuery的:first-child選擇器用於匹配做爲父元素的第一個子元素的元素，將其封裝爲jQuery對象並返回。:first-child選擇器等價於:nth-child(1)選擇器。this

與該選擇器相對的是:last-child選擇器，用於匹配做爲父元素的最後一個子元素的元素。spa

注意：:first-child選擇器與:first選擇器的不一樣之處在於：
:first選擇器只匹配一個元素，而且是匹配到的元素中的第一個元素；
:first-child選擇器則須要判斷匹配到的元素是不是其父元素的第一個子元素，若是是就保留，不然將被捨棄。code

示例&說明
 如下面這段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分別爲n一、n2的兩個元素 // n1是父元素body標籤的"長子"，n2是父元素n1的"長子" // 雖然在n1以內、n2以前有文本內容，但文本內容不算子元素，所以n2仍然是n1的"長子"
$("div:first-child"); 接着，查找全部匹配ul li的元素，再查找其中那些元素是父元素的"長子"，則能夠編寫以下jQuery代碼： // 選擇了id分別爲n四、n9的兩個元素
$("ul li:first-child"); 查找全部包含類名c的li標籤，再查找這些元素是不是父元素的"長子"，對應的jQuery代碼以下： // 沒有選擇任何元素，返回一個空的jQuery對象。 // 雖然包含類名"c"的li標籤有n五、n6兩個元素，但它們都不是父元素的"長子"，所以沒法匹配
$("li.c:first-child");

 

// 這裏的selector表示具體的選擇器
jQuery( "selector:first-of-type" )orm

返回封裝了匹配做爲父元素的第一個該類型子元素的元素的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分別爲n四、n8的兩個元素 // n4雖然不是n2的第一個子元素，但它是n2全部span類型子元素中的第一個，所以能夠匹配
$("span:first-of-type"); 接着，查找全部包含類名abc的元素，並且它們必須是父元素的該類型子元素中的"長子"，則能夠編寫以下jQuery代碼： // 選擇了id分別爲n二、n8的兩個元素 // .abc能夠匹配id分別爲n二、n五、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分別爲n二、n三、n四、n五、n7的5個元素
$("#n1 :parent"); 查找全部有內容的span標籤，則能夠編寫以下jQuery代碼： // 選擇了id分別爲n三、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、一、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") 匹配n四、n五、n六、n七、n8這5個元素 */
var $li = $("li"); // 選取第2個元素
var $sub1 = $("li").slice( 1, 2); document.writeln( getTagsInfo( $sub1 ) ); // LI#n5 // 選取第四、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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程