深入學習jQuery選擇器系列第五篇——過濾選擇器之內容選擇器

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

[1]contains [2]empty [3]parent [4]has [5]not [6]header [7]lang [8]root ...


×
目錄
[1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root

前面的話

　　本文介紹過濾選擇器中的內容選擇器。內容選擇器的過濾規則主要體現在它所包含的子元素或文本內容上

 

:contains(text)

　　:contains(text)選擇器選擇含有文本內容為'text'的元素，返回集合元素

//返回所有文本內容包含'test'的元素
$(':contains("test")')

//返回所有文本內容包含'test'的span元素
$('span:contains("test")')

　　該選擇器並沒有對應的CSS選擇器，如果使用javascript實現類似$('span:contains("test")').css('color','red')的效果

var spans = document.getElementsByTagName('span');
for(var i = 0; i < spans.length; i++){
    if(/test/.test(spans[i].innerHTML)){
        spans[i].style.color = 'red';
    }
}

　　[註意]如果:contains(text)選擇器中的文本內容text包含在子元素中也可以，但是要小心使用

　　【1】$('div span:contains("test")').css('color','blue')可以匹配<div><span><i>test</i></span></div>，但實際上匹配的是<span>元素，<i>元素由於是<span>元素的子元素，所以i元素的文本顏色變為藍色

　　【2】$('div :contains("test")').css('color','red')也可以匹配<div><span><i>test</i></span></div>，但直接匹配的是<i>元素，所以i元素的文本元素變為紅色。如果兩個選擇器同時存在，則文本元素為紅色。因為直接給元素設置顏色比通過父級繼承顏色的優先順序高

<button id="btn1" style="color: red;">$('div :contains("test")')</button>
<button id="btn2" style="color: blue;">$('div span:contains("test")')</button>
<button id="reset">還原</button>
<div>
    <span>test1</span>
    <span>test2</span>
    <span><i>test3</i></span>
    <i><span>test4</span></i>
    <i>test5</i>
    <i>1</i>
</div>
<script>
reset.onclick = function(){history.go();}
//對於test3，就是上面討論的直接給元素設置顏色比通過父級繼承顏色的優先順序高的情況
btn1.onclick = function(){$('div :contains("test")').css('color','red');}  
btn2.onclick = function(){$('div span:contains("test")').css('color','blue');}  
</script>

:empty

　　:empty選擇器選擇不包含子元素或文本的空元素，返回集合元素

$('div :empty').css('color','red');

　　對應的CSS選擇器是:empty選擇器，該選擇器選擇沒有子元素的元素，而且該元素也不包含任何文本節點

:empty{color:red;}

　　如果使用javascript實現類似效果

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    if(divs[i].innerHTML == ''){
        divs[i].style.color = 'red';
    }
}

 

:parent

　　與:empty選擇器正好相反，:parent選擇器選擇含有子元素或文本的元素，返回集合元素

$('div :parent').css('color','red');

　　該選擇器並沒有對應的CSS選擇器，如果使用javascript實現類似效果

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    if(divs[i].innerHTML != ''){
        divs[i].style.color = 'red';
    }
}  
<style> 
div div{height: 20px;width: 20px;}
</style>

<button id="btn1" style="color: red;">$('div :empty')</button>
<button id="btn2" style="color: blue;">$('div :parent')</button>
<button id="reset">還原</button>
<div>
    <div></div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){$('div :empty').css('backgroundColor','red');}  
btn2.onclick = function(){$('div :parent').css('backgroundColor','blue');}  
</script>

:has(selector)

　　:has(selector)選擇器選擇含有選擇器所匹配的元素的父元素，返回集合元素

　　[註意]該選擇器匹配的實際上是父元素　

//選擇擁有.test的子元素的父元素
$(:has(.test))

//選擇擁有.test的子元素的父元素，且該父元素是div元素
$(div:has(.test))

　　該選擇器沒有對應的CSS選擇器，如果使用javascript實現類似$(div:has(.test)).css('color','red')的效果

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var tags = divs[i].getElementsByTagName('*');
    for(var j = 0; j < tags.length; j++){
        if(tags[j].className == 'test'){
            divs[i].style.color = 'red';
            break;
        }
    }
}

 

:not(selector)

　　:not(selector)選擇器去除所有選擇器所匹配的元素，返回集合元素

//選擇去除.test後的所有span元素
$(span:not(.test))

//選擇父元素為div元素下的去除.test後的所有span元素
$(div span:not(.test))
　　該選擇器沒有對應的CSS選擇器，如果使用javascript實現類似$(div span:not(.test)).css('color','red')的效果 
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var spans = divs[i].getElementsByTagName('span');
    for(var j = 0; j < spans.length; j++){
        if(spans[j].className != 'test'){
            divs[i].spans[j].style.color = 'red';
        }
    }
}
<style> 
div{height: 40px;width: 30px;}
</style>

<button id="btn1" style="color: red;">$('div:has(.test)')</button>
<button id="btn2" style="color: blue;">$('span:has(.test)')</button>
<button id="btn3" style="color: green;">$('span:not(.test)')</button>
<button id="btn4" style="color: pink;">$('div:not(.test)')</button>
<button id="reset">還原</button>
<div>
    <span class="test">1.1</span>
    <span>1.2</span>
</div>
<div>
    <span>2.1</span>
    <span>2.2</span>
</div>
<script>
reset.onclick = function(){history.go();}
//選擇含有.test子元素的div父元素，則第1個div的字體顏色變紅
btn1.onclick = function(){$('div:has(.test)').css('backgroundColor','red');} 

//選擇含有.test子元素的span父元素，結果span元素下並沒有子元素，所以無變化
btn2.onclick = function(){$('span:has(.test)').css('backgroundColor','blue');}

//選擇去除.test的span元素，則結果是1.2、2.1、2.2
btn3.onclick = function(){$('span:not(.test)').css('backgroundColor','green');} 

//選擇 去除.test的div元素，由於兩個div元素都沒有.test，所以全部選中
btn4.onclick = function(){$('div:not(.test)').css('backgroundColor','pink');}  
</script>

:header

　　:header選擇器選取所有的標題元素

<button id="btn1">$(':header')</button>
<button id="reset">還原</button>
<h3>h3</h3>
<h4>h4</h4>
<p>p</p>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){$(':header').css('color','red');} 
</script>

　　該選擇器並沒有對應的CSS選擇器，如果使用javascript實現類似$(':header').css('color','red')效果

var tags = document.getElementsByTagName('*');
for(var i = 0; i < tags.length; i++){
    if(/H[1-6]/.test(tags[i].nodeName)){
        tags[i].style.color = 'red';
    }
}

 

:lang

　　:lang選擇器選擇指定語言的所有元素

//選擇<div lang="en">或<div lang="en-us">
$('div:lang(en)').css('color','red');

　　lang屬性是HTML元素的全局屬性，詳細情況移步至此

　　CSS選擇器有類似的:lang()選擇器，用於匹配某個語言

div:lang(en){color:red;}

　　如果使用javascript實現類似效果

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    if(/^\s*en\s*$|^\s*en-/.test(divs[i].lang)){
        divs[i].style.color = 'red';
    }
}

 

:root

　　:root選擇器選擇元素的根元素

$(':root').css('color','red');

　　CSS也有對應的:root選擇器

:root{color:red;}

　　在javascript中，所有節點都有一個ownerDocument的屬性，指向表示整個文檔的文檔節點document


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

-Advertisement-
Play Games
更多相關文章
  • 也來談談wap端瀑布流佈局
    Definition 瀑布流佈局，在視覺上表現為參差不齊的多欄佈局，隨著頁面滾動條向下滾動，新數據不斷被載入進來。 瀑布流對於圖片的展現，是高效而具有吸引力的，用戶一眼掃過的快速閱讀模式可以在短時間內獲得更多的信息量,而瀑布流里懶載入模式又避免了用戶滑鼠點擊的翻頁操作。 瀑布流的主要特性便是錯落有致 ...
  • 晚上閑來無事，整理一下字元串和數組常用的方法，分享給大家。
    一、 Date對象 定義：Date()可以返回系統當天的日期和時間; 註意：返回的是標註的時間格式 Sun Aug 07 22:50:03 2016 用法： 1.1 獲取時間對象 1.2 轉換成時間對象 1.3 Date.parse把日期格式的字元串轉換成毫秒形式,如果日期格式不正確，返回NaN 1 ...
  • sass中級語法
    github地址:https://github.com/lily1010/sass/tree/master/course02 用到的sass語法是: sass --watch test.scss:test.css --style compact --style expanded 如下圖: 1 類名嵌 ...
  • 12種不適宜使用的javascript語法
    1. == (o゜▽゜)o☆[BINGO!] Javascript有兩組相等運算符，一組是==和!=，另一組是 和!==。前者只比較值的相等，後者除了值以外，還比較類型是否相同。 請儘量不要使用前一組，永遠只使用 和!==。因為==預設會進行類型轉換，規則十分難記。如果你不相信的話，請回答下麵五個判 ...
  • li進度條寬度和顏色按順序顯示的效果。
    實際項目中li和裡邊的數值是動態生成的，需要控制它的寬度和顏色，效果如圖： 如果能實現顏色按數值規律變化就好了，目前顏色是固定到數組中的。 實例代碼如下： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <styl ...
  • js => 今天發現的一個新的js函數寫法
    今天在網上參觀到一個寫法，返回字元串個個字母的個數 得到：Object {a: 5, b: 2, c: 2} reduce我查到是es5新加了array函數，這裡不細說，有興趣自己查； 關鍵是‘=>’，是我第一次在js中見到；在網上查了查沒找到什麼資料，自己理解吧，希望有大神指正。 應該就是匿名函數 ...
  • CSS選擇器的權重與優先規則？
    我們做項目的時候，經常遇到樣式層疊問題，被其他的樣式覆蓋，或者寫的權重不高沒效果，對權重沒有具體的分析，做了一個總結。 如下圖，css規則由選擇器和聲明塊組成，寫在選擇器後面大括弧里的就叫聲明。 一、樣式類型1、行間 2、內聯 3、外部 例子彙總html： style1.css style2.css ...
  • 你不知道的CSS背景—css背景屬性全解
    CSS背景在網頁設計中使用頻率非常高，然而對於這個開發人員很熟悉的CSS屬性，卻隱藏著許多不為初級開發人員熟知的細節，這篇文章嘗試扒開這層不為人知的面紗。 首先列舉一下CSS中關於元素背景的所有屬性並簡要描述了其作用，其中後面幾個屬性是在CSS3中新加入的。 下麵一一“理清”這些屬性 backgro ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類