深入學習jQuery選擇器系列第三篇——過濾選擇器之索引選擇器

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/08/25/5807292.html
-Advertisement-
Play Games

[1]通用形式 [2]首尾索引 [3]奇偶索引 [4]範圍索引 ...


×
目錄
[1]通用形式 [2]首尾索引 [3]奇偶索引[4]範圍索引

前面的話

　　上一篇介紹了過濾選擇器中的子元素選擇器部分，本文開始介紹極易與之混淆的索引選擇器

 

通用形式

$(':eq(index)')

　　$(':eq(index)')選擇器選擇索引等於index的元素(index從0開始)，返回單個元素

索引

　　[註意]索引選擇器的索引和子元素選擇器的索引有明顯的不同

　　【1】索引選擇器索引從0開始，而子元素選擇器索引從1開始

　　【2】索引選擇器的索引是指定元素的索引，而子元素選擇器的索引是所有子元素的索引

<div>
    <i>0</i>
    <span>1</span>
    <i>2</i>
    <span>3</span>
</div>

　　如果要選擇<span>1<span>元素，若使用子元素選擇器，則設置為

//選擇父元素為div元素下的第二個子元素，且該子元素是span元素(索引從1開始)
$('div span:nth-child(2)').css('color','red');

　　若使用索引選擇器，則設置為

//選擇父元素為div元素下的最先出現的span元素(索引從0開始)
$('div span:eq(0)').css('color','blue');
<button id='btn1'>$('div span:nth-child(2)')</button>
<button id='btn2'>$('div span:eq(0)')</button>
<div>
    <i>0</i>
    <span>1</span>
    <i>2</i>
    <span>3</span>
</div>
<script>
btn1.onclick = function(){
    $('div span:nth-child(2)').css('color','red');
}
btn2.onclick = function(){
    $('div span:eq(0)').css('color','blue');
}
</script>

　　在CSS中，與:nth-child(n)選擇器相似的選擇器是:nth-of-type(n)，:nth-of-type(n)選擇器返回索引等於n的元素(索引從1開始)

　　 如果要使用:nth-child(n)選擇器選擇上述代碼中的<span>1<span>元素，則設置為

div span:nth-child(2){color:red;}

　　若使用:nth-of-type(n)選擇器，則設置為：

div span:nth-of-type(1){color:blue;}

　　所以CSS選擇器:nth-of-type(n)與jQuery中的索引選擇器$(':eq(index)')相似，相同的地方是索引是指的指定元素的索引

　　而不同之處有兩處

　　【1】CSS選擇器:nth-of-type(n)的索引從1開始，而jQuery中的索引選擇器$(':eq(index)')的索引從0開始

　　【2】CSS選擇器:nth-of-type(n)返回多個元素，而jQuery中的索引選擇器$(':eq(index)')返回的是單個元素

$(':eq(0)') 選擇第一個索引等於0的元素

$('span:eq(0)') 選擇第一個索引等於0的span元素

$('div span:eq(0)') 選擇第一個div元素為父元素下索引等於0的span元素
<button id="btn1" style="color: red;">$(':eq(0)')</button>
<button id="btn2" style="color: blue;">$('span:eq(0)')</button>
<button id="btn3" style="color: green;">$('div span:eq(0)')</button>
<button id="reset">還原</button>
<p id="t1">
    <i>1.0</i>
    <span>1.1</span>
</p>
<p  id="t2">
    <span>2.0</span>
    <i>2.1</i>
</p>
<div id="t3">
    <i>3.0</i>
    <span>3.1</span>
</div>
<script>
reset.onclick = function(){history.go();}
//選擇第一個索引等於0的元素，結果為<html>。由於字體顏色可以繼承，所以所有的子元素的字體顏色都是紅色
btn1.onclick = function(){$(':eq(0)').css('color','red');}

//選擇第一個索引等於0的span元素，結果為<span>1.1</span>
btn2.onclick = function(){$('span:eq(0)').css('color','blue');}

//選擇第一個div元素為父元素下索引等於0的span元素，結果是<span>3.1</span>
btn3.onclick = function(){$('div span:eq(0)').css('color','green');}
</script>

首尾索引元素選擇器

　　為了方便，jQuery還定義了第一個索引元素和最後一個索引元素的獲取方式

$(':first')

　　$(':first')選擇器選擇最先出現的第1個索引元素，返回單個元素　

$(':last')

　　$(':last')選擇器選擇最後出現的最後1個索引元素，返回單個元素

<button id="btn1" style="color: red;">$('div :first')</button>
<button id="btn2" style="color: blue;">$('div :last')</button>
<button id="btn3" style="color: green;">$('div span:first')</button>
<button id="btn4" style="color: pink;">$('div span:last')</button>
<button id="reset">還原</button>
<div id="t1">
    <i>1.1</i>
    <span>1.2</span>
</div>
<p  id="t2">
    <span>2.1</span>
    <i>2.2</i>
</p>
<div id="t3">
    <span>3.1</span>
    <i>3.2</i>
</div>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//匹配最先出現的父元素為div元素的第1個索引元素，結果是1.1
btn1.onclick = function(){$('div :first').css('color','red');}

//匹配最後出現的父元素為div元素的最後1個索引元素，結果是3.2
btn2.onclick = function(){$('div :last').css('color','blue');}

//匹配最先出現的父元素為div元素的第1個span索引元素，結果是1.2
btn3.onclick = function(){$('div span:first').css('color','green');}

//匹配最後出現的父元素為div元素的最後1個span索引元素，結果是3.1
btn4.onclick = function(){$('div span:last').css('color','pink');}
</script>

　　首尾索引選擇器並不對應於CSS中的:first-of-type和:last-of-type。因為首尾索引選擇器只選擇單個元素，而CSS選擇器會選擇多個元素

　　如果要使用javascript實現類似$('div span:last').css('color','pink')的功能

var divs = document.getElementsByTagName('div');
for(var i = divs.length-1; i>-1;i--){
    var spans = divs[i].getElementsByTagName('span');
    if(spans){
        spans[spans.length-1].style.color = 'pink';
        break;
    }    
}

 

奇偶索引元素選擇器

　　除了前面介紹的:eq(index)、:first和:last之外，其他的索引元素選擇器返回的都是集合元素。接下來介紹奇偶索引元素選擇器

:even

　　:even選取索引是偶數的所有元素，返回集合元素

:odd

　　:odd選取索引是奇數的所有元素，返回集合元素

<button id="btn1" style="color: red;">$('div :even')</button>
<button id="btn2" style="color: blue;">$('div :odd')</button>
<button id="btn3" style="color: green;">$('div span:even')</button>
<button id="btn4" style="color: pink;">$('div span:odd')</button>
<button id="reset">還原</button>
<div>
    <span>0:span0</span>
    <span>1:span1</span>
    <span>2:span2</span>
    <i>3:i0</i>
    <i>4:i1</i>
    <i>5:i2</i>
    <span>6:span3</span>
    <span>7:span4</span>
</div>
<script>
reset.onclick = function(){history.go();}
//匹配父元素為div元素的索引為偶數的元素，結果序號是0、2、4、6
btn1.onclick = function(){$('div :even').css('color','red');}

//匹配父元素為div元素的索引為奇數的元素，結果序號是1、3、5
btn2.onclick = function(){$('div :odd').css('color','blue');}

//匹配父元素為div元素的span元素索引為偶數的元素，結果序號是0、2、7
btn3.onclick = function(){$('div span:even').css('color','green');}

//匹配父元素為div元素的span元素索引為奇數的元素，結果序號是1、6
btn4.onclick = function(){$('div span:odd').css('color','pink');}
</script>

 　　子元素過濾選擇器中也存在類似的奇偶選擇器，分別是:nth-child(even)和:nth-child(odd)。由於它們的索引開始不同，索引表示也不同，所以類似的表示，結果卻不同

<button id="btn1" style="color: red;">$('div :nth-child(even)')</button>
<button id="btn2" style="color: blue;">$('div :nth-child(odd)')</button>
<button id="btn3" style="color: green;">$('div span:nth-child(even)')</button>
<button id="btn4" style="color: pink;">$('div span:nth-child(odd)')</button>
<button id="reset">還原</button>
<div>
    <span>0:span0</span>
    <span>1:span1</span>
    <span>2:span2</span>
    <i>3:i0</i>
    <i>4:i1</i>
    <i>5:i2</i>
    <span>6:span3</span>
    <span>7:span4</span>
</div>
<script>
reset.onclick = function(){history.go();}
//匹配父元素為div元素的索引為偶數的元素，因為索引是從1開始的，結果序號是1、3、5、7(對應的索引是2、4、6、8)
btn1.onclick = function(){$('div :nth-child(even)').css('color','red');}

//匹配父元素為div元素的索引為奇數的元素，因為索引是從1開始的，結果序號是0、2、4、6(對應的索引是1、3、5、7)
btn2.onclick = function(){$('div :nth-child(odd)').css('color','blue');}

//匹配父元素為div元素的索引為偶數的元素，且該元素是span元素，結果序號是1、5(對應的索引是2、6)
btn3.onclick = function(){$('div span:nth-child(even)').css('color','green');}

//匹配父元素為div元素的索引為奇數的元素，且該元素是span元素，結果序號是0、2、6(對應的索引是1、3、7)
btn4.onclick = function(){$('div span:nth-child(odd)').css('color','pink');}
</script>

範圍索引元素選擇器

:lt(index)

　　:lt(index)選擇器選取索引小於index的元素，返回集合元素

:gt(index)

　　:gt(index)選擇器選取索引大於index的元素，返回集合元素

<button id="btn1" style="color: red;">$('div :lt(4)')</button>
<button id="btn2" style="color: blue;">$('div span:lt(4)')</button>
<button id="btn3" style="color: green;">$('div gt(3)')</button>
<button id="btn4" style="color: pink;">$('div span:gt(3)')</button>
<button id="reset">還原</button>
<div>
    <span>0:span0</span>
    <span>1:span1</span>
    <span>2:span2</span>
    <i>3:i0</i>
    <i>4:i1</i>
    <i>5:i2</i>
    <span>6:span3</span>
    <span>7:span4</span>
</div>
<script>
reset.onclick = function(){history.go();}
//匹配父元素為div元素的索引小於4的元素，結果序號是0、1、2、3
btn1.onclick = function(){$('div :lt(4)').css('color','red');}

//匹配父元素為div元素的span元素的索引小於4的元素，結果序號是0、1、2、6
btn2.onclick = function(){$('div span:lt(4)').css('color','blue');}

//匹配父元素為div元素的索引大於1的元素，結果序號是2、3、4、5、6、7
btn3.onclick = function(){$('div :gt(1)').css('color','green');}

//匹配父元素為div元素的span元素的索引大於1的元素，結果序號是2、6、7
btn4.onclick = function(){$('div span:gt(1)').css('color','pink');}
</script>

 

最後

　　索引選擇器借鑒於CSS的nth-of-type()選擇器，但又有變化和拓展之處。變化表現在索引選擇器的索引是指的特定元素的索引順序，且從0開始。拓展表現在新增了範圍索引選擇器。還有一點值得註意的是:first、:last和:eq()返回的是單個元素，而其他索引選擇器返回的是集合元素

　　歡迎交流


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JQuery拓展方法之表單數據轉Object—從而ajax post到後臺
    其實今天的分享很簡單，只要你簡單瞭解Jq拓展方法，只要你會遍歷元素，那就能自己封裝出來。在工作中正是因為有了一個個這樣的方法，大大提升了我們的工作效率，減小了失誤次數。但是我們往往又經常使用別人封裝好的方法，這就很不爽了。 希望熱愛技術的園友們今後都能做一個，自己封裝方法，給整個公司用的人。 再也不 ...
  • JavaScript-數組去重由慢到快由繁到簡
    indexOf去重 Array.prototype.unique1 = function() { var arr = []; for (var i = 0; i < this.length; i++) { var item = this[i]; if (arr.indexOf(item) -1) { ...
  • 輕鬆掌握：JavaScript代理模式、中介者模式
    代理模式、中介者模式 代理模式 在面向對象設計中，有一個單一職責原則，指就一個類（對象、函數）而言，應該僅有一個引起它變化的原因。如果一個對象承擔了過多的職責，就意味著它將變得巨大，引起它變化的原因就多，它把這些職責耦合到了一起，這種耦合會導致程式難於維護和重構。 這時候，我們可以把該對象（本體）的 ...
  • 【高級功能】使用canvas元素（第一部分）
    1. 開始使用 canvas 元素 canvas 元素非常簡單，這是指它所有的功能都體現在一個JavaScript對象上，因此該元素本身只有兩個屬性：width 和 height。 canvas 元素里的內容會在瀏覽器不支持此元素時作為備用內容顯示。下麵例子展示了canvas 元素和一些簡單的備用內 ...
  • CSS3過渡詳解-遁地龍卷風
    0.環境準備 （1）過渡需要瀏覽器的支持，使用這些屬性要加上瀏覽器廠商的首碼，我用的chrome49已經不需要首碼了， -o- Opera -webkit- Safari、Chrome -moz- Firefox -ms- IE (2) css p { height:15px;/*類似於高度這種屬性 ...
  • 純樣式無腳本無圖片自定義單/覆選框
    單選/覆選框是 Web 應用常用控制項，隨處可見，原生的單/覆選框控制項的外觀一般都不怎麼美觀，有些時候，原生的控制項模樣並不能滿足設計要求，這時需要更為精緻的控制項樣式，我們更希望其樣式可以允許自定義。 CSS3 新增了一個偽類選擇器 ，用於選擇被勾選的單/覆選框，利用該選擇器可以分別為未選中和選中狀態的 ...
  • JavaScript中this指向的簡單理解
    首先必須要說的是，this的指向在函數定義的時候是確定不了的，只有函數執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個調用它的對象（這句話有些問題，後面會解釋為什麼會有問題，雖然網上大部分的文章都是這樣說的，雖然在很多情況下那樣去理解不會出什麼問題，但是實際上那樣理解是不准確的 ...
  • 淺談JavaScript之原型
    上一篇談new關鍵字也是給這一篇寫關於原型的文章買個伏筆，我對原型的理解可能會有偏差，如有錯誤，望指正一定修改，望各位道友如果想真正的理解原型的概念一定要再看完各方言論再回歸教材。 言歸正傳談原型，首先原型是一個對象，無論什麼時候，只要創建了一個函數，就會按照規則創建一個Prototype屬性，這個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類