前端基礎-jQuery的內容之選擇器

来源:https://www.cnblogs.com/ManyQian/archive/2018/06/09/9159028.html
-Advertisement-
Play Games

閱讀目錄 一、jQuery選擇器之id選擇器 頁面的任何操作都需要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。 jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者可以更少的處理複雜選擇過程與性能優化，更多專註業務邏輯的編寫。 jQuery幾乎支持主流的css ...


閱讀目錄

  1. ID選擇器
  2. 類選擇器
  3. 元素選擇器
  4. 通配符選擇器
  5. 層級選擇器
  6. 基本篩選器
  7. 內容篩選器
  8. 可見性篩選器
  9. 屬性篩選器
  10. 子元素篩選器
  11. 表單元素篩選器
  12. 表單對象篩選器
  13. this和$(this)

一、jQuery選擇器之id選擇器

頁面的任何操作都需要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。

jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者可以更少的處理複雜選擇過程與性能優化，更多專註業務邏輯的編寫。

jQuery幾乎支持主流的css1~css3選擇器的寫法，我們從最簡單的也是最常用的開始學起

id選擇器：一個用來查找的ID，即元素的id屬性

$( "#id" )

id選擇器也是基本的選擇器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。

原生語法的支持總是非常高效的，所以在操作DOM的獲取上，如果能採用id的話盡然考慮用這個選擇器

值得註意：

id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。
但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的

二、jQuery選擇器之類選擇器

類選擇器，顧名思義，通過class樣式類名來獲取節點

描述：

$( ".class" )

類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選

配合使用：

$("div.c1")  // 找到有c1 class類的div標簽

使用jQuery選擇節點，不僅僅只是選擇上的簡單，同時還增加很多關聯的便利操作，後續我們還會慢慢的學到其他的優勢。

 

三、jQuery選擇器之元素選擇器

元素選擇器：根據給定（html）標記名稱選擇所有的元素

描述：

$( "element" )

搜索指定元素標簽名的所有節點，這個是一個合集的操作。同樣的也有原生方法getElementsByTagName()函數支持

右邊編輯器代碼所示：

第一組：通過getElementsByTagName方法得到頁面所有的<div>元素

var divs = document.getElementsByTagName('div');

divs是dom合集對象，通過迴圈給每一個合集中的<div>元素賦予新的boder樣式

第二組：同樣的效果，$("p")選取所有的<p>元素，通過css方法直接賦予樣式

 

四、jQuery選擇器之通配選擇器（*選擇器）

在CSS中，經常會在第一行寫下這樣一段樣式

* {padding: 0; margin: 0;}

通配符*意味著給所有的元素設置預設的邊距。jQuery中我們也可以通過傳遞*選擇器來選中文檔頁面中的元素

描述：

$( "*" )

拋開jQuery，如果要獲取文檔中所有的元素，通過document.getElementsByTagName()中傳遞"*"同樣可以獲取到

不難發現，id、class、tag都可以通過原生的方法獲取到對應的節點，但是我們還需要考慮一個相容性的問題，我這裡順便提及一下，比如:

  1. IE會將註釋節點實現為元素，所以在IE中調用getElementsByTagName裡面會包含註釋節點，這個通常是不應該的
  2. getElementById的參數在IE8及較低的版本不區分大小寫
  3. IE7及較低的版本中，表單元素中，如果表單A的name屬性名用了另一個元素B的ID名並且A在B之前，那麼getElementById會選中A
  4. IE8及較低的版本，瀏覽器不支持getElementsByClassName

五、jQuery選擇器之層級選擇器

文檔中的所有的節點之間都是有這樣或者那樣的關係。我們可以把節點之間的關係可以用傳統的家族關係來描述，

可以把文檔樹當作一個家譜，那麼節點與節點直接就會存在父子，兄弟，祖孫的關係了。

選擇器中的層級選擇器就是用來處理這種關係

子元素 後代元素 兄弟元素 相鄰元素

通過一個列表，對比層級選擇器的區別

 仔細觀察層級選擇器之間還是有很多相似與不同點

  1. 層級選擇器都有一個參考節點
  2. 後代選擇器包含子選擇器的選擇的內容
  3. 一般兄弟選擇器包含相鄰兄弟選擇的內容
  4. 相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個父元素下

六、jQuery選擇器之基本篩選器

很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素，為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。

篩選器很多都不是CSS的規範，而是jQuery自己為了開發者的便利延展出來的篩選器

篩選器的用法與CSS中的偽元素相似，選擇器用冒號“：”開頭，通過一個列表，看看基本篩選器的描述：

註意事項：

  1. :eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據之前匹配的元素在進一步篩選，註意jQuery合集都是從0開始索引
  2. gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始

七、jQuery選擇器之內容篩選器

基本篩選器針對的都是元素DOM節點，如果我們要通過內容來過濾，jQuery也提供了一組內容篩選器，當然其規則也會體現在它所包含的子元素或者文本內容上

內容過濾器描述如下表：

註意事項：

  1. :contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
  2. 如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的。
  3. :parent與:empty是相反的，兩者所涉及的子元素，包括文本節點

八、jQuery選擇器之可見性篩選器

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden

描述如下：

這2個選擇器都是 jQuery 延伸出來的，看起來比較簡單，但是元素可見性依賴於適用的樣式

:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等

我們有幾種方式可以隱藏一個元素：

  1. CSS display的值是none。
  2. type="hidden"的表單元素。
  3. 寬度和高度都顯式設置為0。
  4. 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0

如果元素中占據文檔中一定的空間,元素被認為是可見的。 可見元素的寬度或高度，是大於零。

元素的visibility: hidden 或 opacity: 0被認為是可見的，因為他們仍然占用空間佈局。

不在文檔中的元素是被認為是不可見的，如果當他們被插入到文檔中，jQuery沒有辦法知道他們是否是可見的，因為元素可見性依賴於適用的樣式

 

九、jQuery選擇器之屬性篩選器

屬性選擇器讓你可以基於屬性來定位一個元素。可以只指定該元素的某個屬性，這樣所有使用該屬性而不管它的值，這個元素都將被定位，

也可以更加明確並定位在這些屬性上使用特定值的元素，這就是屬性選擇器展示它們的威力的地方。

描述如下：

在這麼多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的

[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等
[attr*="value"]能在網站中幫助我們匹配不同類型的文件

十、jQuery選擇器之子元素篩選器

子元素篩選器不常使用，其篩選規則比起其它的選擇器稍微要複雜點

子元素篩選器描述表：

註意事項：

  1. :first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。這相當於:nth-child(1)
  2. :last 只匹配一個單獨的元素， :last-child 選擇器可以匹配多個元素：即，為每個父級元素匹配最後一個子元素
  3. 如果子元素只有一個的話，:first-child與:last-child是同一個
  4.  :only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配
  5. jQuery實現:nth-child(n)是嚴格來自CSS規範，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的
  6. nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往後計算，後者從後往前計算

十一、jQuery選擇器之表單元素器

無論是提交還是傳遞數據，表單元素在動態交互頁面的作用是非常重要的。jQuery中專門加入了表單選擇器，從而能夠極其方便地獲取到某個類型的表單元素

表單選擇器的具體方法描述：

註意事項：

除了input篩選器，幾乎每個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如 $(':password') == $('[type=password]')

 

十二、jQuery選擇器之表單對象屬性篩選器

除了表單元素選擇器外，表單對象屬性篩選器也是專門針對錶單元素的選擇器，可以附加在其他選擇器的後面，主要功能是對所選擇的表單元素進行篩選

表單篩選選擇器的描述：

註意事項：

  1. 選擇器適用於覆選框和單選框，對於下拉框元素, 使用 :selected 選擇器
  2. 在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，所以保險起見換用選擇器input:checked，確保只會選取<input>元素

十三、jQuery選擇器之特殊選擇器this

相信很多剛接觸jQuery的人，很多都會對$(this)和this的區別模糊不清，那麼這兩者有什麼區別呢？

this是JavaScript中的關鍵字，指的是當前的上下文對象，簡單的說就是方法/屬性的所有者

下麵例子中，imooc是一個對象，擁有name屬性與getName方法,在getName中this指向了所屬的對象imooc

var imooc = {
    name:"多多帥",
    getName:function(){
        //this,就是imooc對象
        return this.name;
    }
}
imooc.getName(); //多多帥

當然在JavaScript中this是動態的，也就是說這個上下文對象都是可以被動態改變的(可以通過call,apply等方法)，具體的大家可以查閱相關資料

同樣的在DOM中this就是指向了這個html元素對象，因為this就是DOM元素本身的一個引用

假如給頁面一個P元素綁定一個事件:

p.addEventListener('click',function(){
    //this === p
    //以下兩者的修改都是等價的
    this.style.color = "red";
    p.style.color = "red";
},false);

通過addEventListener綁定的事件回調中，this指向的是當前的dom對象，所以再次修改這樣對象的樣式，只需要通過this獲取到引用即可

 this.style.color = "red"

但是這樣的操作其實還是很不方便的，這裡面就要涉及一大堆的樣式相容，如果通過jQuery處理就會簡單多了，我們只需要把this加工成jQuery對象

換成jQuery的做法：

$('p').click(function(){
    //把p元素轉化成jQuery的對象
    var $this= $(this) 
    $this.css('color','red')
})

通過把$()方法傳入當前的元素對象的引用this，把這個this加工成jQuery對象，我們就可以用jQuery提供的快捷方法直接處理樣式了

總體：

this，表示當前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法。
$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jQuery的方法和屬性值。
在python語言中，this就是面向對象的self，對象自己，可以調用所擁有的屬性和方法
1).基本

·#id 根據給定的ID匹配一個元素。例如：$("#id")
·element 根據給定的元素名匹配所有元素。例如：$("div")
·.class 根據給定的類匹配元素。例如：$(".style1");
·* 匹配所有元素。例如：$("*")
·selector1,selector2,selectorN 將每一個選擇器匹配到的元素合併後一起返回。例如：$("#id,div,.style1")

2).表單

·:button 匹配所有按鈕。例如：$(":button")
·:checkbox 匹配所有覆選框。例如：$(":checkbox")
·:file 匹配所有文件域。例如：$(":File")
·:hidden 匹配所有不可見元素，或者type為hidden的元素。例如：$("input:hidden")
·:image 匹配所有圖像域。例如：$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")
·:password 匹配所有密碼框。例如：$(":password")
·:radio 匹配所有單選按鈕。例如：$(":radio")
·:reset 匹配所有重置按鈕。例如：$(":reset")
·:submit 匹配所有提交按鈕。例如：$(":submit")
·:text 匹配所有的單行文本框。例如：$(":text")
·:header 匹配如 h1, h2, h3之類的標題元素。例如：$(":header").css("background", "#EEE");

2.篩選條件

1).屬性篩選

·[attribute*=value] 匹配給定的屬性是以包含某些值的元素。例如：$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的屬性，但屬性不等於特定值的元素。例如：$(input[name!='man');
·[attribute$=value] 匹配給定的屬性是以某些值結尾的元素。例如：$("input[name$='man']")
·[attribute=value] 匹配給定的屬性是某個特定值的元素。例如：$("input[name='man']");
·[attribute] 匹配包含給定屬性的元素。例如：$("div[id]")
·[attribute^=value] 匹配給定的屬性是以某些值開始的元素。例如：$("input[name^='man']")
·[selector1][selector2][selectorN] 同時滿足多個條件。例如：$("input[id][name$='man']")
·:hidden 匹配所有的不可見元素。例如：$("tr:hidden")
·:visible 匹配所有的可見元素。例如：$("tr:visible")
·:checked 匹配所有選中的被選中元素(覆選框、單選框等，不包括select中的option)。例如：$("input:checked")
·:disabled 匹配所有不可用元素。例如：$("input:disabled")
·:enabled 匹配所有可用元素。例如：$("input:enabled")
·:selected 匹配所有選中的option元素。例如：$("select option:selected")

2).內容篩選

·:contains(text) 匹配包含給定文本的元素。例如：$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")
·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如：$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")

3).層級篩選

·ancestor descendant 在給定的祖先元素下匹配所有的後代元素。例如：$("form input")
·parent > child 在給定的父元素下匹配所有的子元素。例如：$("form > input")
·prev + next 匹配所有緊接在 prev 元素後的 next 元素。例如：$("label + input")
·prev ~ siblings 匹配 prev 元素之後的所有 siblings 元素。例如：$("form ~ input")
·:first-child 匹配第一個子元素。例如：$("ul li:first-child")
·:last-child 匹配最後一個子元素。例如：$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個子或奇偶元素。例如：$("ul li:nth-child(2)")
·:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配。例如：$("ul li:only-child")

4).方法篩選

·:animated 匹配所有正在執行動畫效果的元素。例如：$("div:animated");
·:eq(index) 匹配一個給定索引值的元素。例如：$("tr:eq(1)")
·:even 匹配所有索引值為偶數的元素，從 0 開始計數。例如：$("tr:even")
·:first 匹配找到的第一個元素。例如：$("tr:first")
·:gt(index) 匹配所有大於給定索引值的元素，從 0 開始計數。例如：$("tr:gt(0)")
·:last 匹配找到的最後一個元素。例如：$("tr:last")
·:lt(index) 匹配所有小於給定索引值的元素。例如：$("tr:lt(2)")
·:not(selector) 去除所有與給定選擇器匹配的元素。例如：$("input:not(:checked)")
·:odd 匹配所有索引值為奇數的元素，從 0 開始計數。例如：$("tr:odd")
文字版的總結
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 原生ES-Module在瀏覽器中的嘗試
    其實瀏覽器原生模塊相關的支持也已經出了一兩年了（我第一次知道這個事情實在2016年下半年的時候） 可以拋開webpack直接使用import之類的語法 但因為算是一個比較新的東西，所以現在基本只能自己鬧著玩 :p 但這並不能成為不去瞭解它的藉口，還是要體驗一下的。 首先是各大瀏覽器從何時開始支持mo ...
  • Ionic構建打包apk出現的問題集合
    當我們寫完 ionic 項目準備打包成 apk 時（比如執行 或者 等命令），經常會出現一些莫名其妙的問題，特別是對原生開發並不太熟悉的人，往往就是一臉懵逼啊。 因此，很有必要將這些經常出現的問題及對應解決方案做一個彙總，方便查閱。 問題1 產生原因 主要原因是 插件升級引起的，該插件已經包含在 中 ...
  • 前端基礎-jQuery中的如何操作標簽
    閱讀目錄 一、樣式操作 1、樣式類 ①.addClass( className )方法： 通過動態改變類名（class），可以讓其修改元素呈現出不同的效果。在HTML結構中里，多個class以空格分隔，當一個節點（或稱為一個標簽）含有多個class時， DOM元素響應的className屬性獲取的不 ...
  • 記Git報錯-Everything up-to-date
    之所以引起這個信息的原因有： 1）沒有git add; 2）git add 了，但忘了git commit -m "提交信息"。 ...
  • 課時66.顏色控制屬性下（理解）
    今天來講解十六進位控制屬性的方法，其實用十六進位表示的方式本質就是rgb，只不過它們的格式不一樣而已，十六進位中是通過每兩位表示一種顏色的方式來給顏色賦值。 如 #FF0000 FF r 00 g 00 b 修改前兩位相當於修改rgb中的第一個數字 修改中間兩位相當於修改rgb中的第二個數字 修改最 ...
  • JS如何去掉一個數組的重覆元素 (數組去重)
    一、思路如下： 定義一個新數組，將老數組遍歷一遍，再進行判斷，如果新數組裡面沒有老數組的元素就添加，否則就不添加，最終輸出整個新數組。 二、代碼如下： var arr = ["a","a","b","b","c","c","d","e"]; var newArr = []; //遍歷老數組； arr ...
  • 淺談Vue中的Prop
    Prop 基本用法 Prop的基本用法很簡單，只需要在子組件的Vue實例中定義該屬性並把值設為目標屬性的數組即可 tips：由於HTML中的屬性是不區分大小寫的，所以當使用DOM中的模板（HTML中）時，駝峰寫法需要轉化為短橫線寫法。但是，如果使用字元串模板（JS中）時，不受限制，可以為所欲為。 P ...
  • node 發送郵件demo （QQ郵箱）
    nodemailer是nodejs中的郵件發送模塊,本文使用的版本為2.5.0 --下載模塊 npm install nodemailer npm下載模塊後,在項目中引入就可以使用: var nodemailer = require('nodemailer'); 以QQ郵箱為例. --獲取授權碼 進 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類