day17--JQuery選擇器

来源:http://www.cnblogs.com/gengcx/archive/2017/10/08/7636756.html
-Advertisement-
Play Games

操作HTML標簽的時候，我們首先要找到HTML標簽的位置，然後進行操作，下麵來看看集中查找標簽的方法，如下： 1、Id選擇器 -- Id在HTML中是唯一的，通過Id進行查找，Id對應的是#號 id ==》# 上面HTML代碼，下麵使用$("#i10")進行查找，查找Id="i10"的標簽，如下： ...


    操作HTML標簽的時候，我們首先要找到HTML標簽的位置，然後進行操作，下麵來看看集中查找標簽的方法，如下：

    1、Id選擇器   -- Id在HTML中是唯一的，通過Id進行查找，Id對應的是#號      id ==》#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i10" class="c1">
        <div>
            <a>caonima</a>
        </div>
        <a>alexsb</a>
        <a>您好</a>
        <a>ershazi</a>
    </div>
    <div class="c1">
        <a>f</a>
    </div>
    <div class="c1">
        <div class="c2"></div>
    </div>
    <script src="jquery-1.12.4.js">
    </script>
</body>
</html>

    上面HTML代碼，下麵使用$("#i10")進行查找，查找Id="i10"的標簽，如下：

> obj = $('#i10')
> [div#i10.c1, context: document, selector: "#i10"]      <！-- 查詢到了id="i10"的<div>標簽，div標簽下麵還有子標簽，通過一定查找，可以定位到子標簽-->
    > 0:div#i10.c1                                       <!-- 上面標簽裡面的內容 -->
    > context:document
    > length:1
    > selector:"#i10"
    > __proto__:Object(0)

    2、.c1選擇器  class選擇器，class選擇器對應的是.    class ==》 .(點)

    通過

> obj = $('.c1')
> [div#i10.c1, context: document, selector: "#i10"]    <!-- .c1找到的也是<div>標簽，內容一樣，因為<div>標簽裡面有id和class -->  
    > 0:div#i10.c1                                     <!-- div標簽下麵有子標簽，可以通過一定方法進行獲取 -->                                    
    > context:document
    > length:1
    > selector:"#i10"
    > __proto__:Object(0)

    3、標簽選擇器，通過標簽本身進行選擇

選擇上面HTML中所有的<a>標簽，如下：
> obj = $("a")      <!-- 選擇HTML中所有的a標簽，可以看出，找到5個<a>標簽，所有的a標簽 -->
> (5) [a, a, a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "a"]
> obj[4]            <!-- 選擇上面標簽中的第5個a標簽 -->
>   <a>f</a>

    4、組合查詢   組合查詢使用的是逗號(,)，$('a,.c2,#i10)意思是找到所有<a>標簽，class=c2的標簽和id="i10"的標簽，如下：

> obj = $("a,.c2,#i10")    <!-- 組合查詢，查詢所有<a>標簽，class="c2"標簽，id="i10"標簽，進行組合查詢 -->
> (7) [div#i10.c1, a, a, a, a, a, div.c2, prevObject: jQuery.fn.init(1), context: document, selector: "a,.c2,#i10"]

    5、層級查詢   找到某一個標簽下麵的標簽，這個我比較喜歡，一層一層的進行查找，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i10" class="c1">
        <div>
            <a>caonima</a>
        </div>
        <a>alexsb</a>
        <a>您好</a>
        <a>ershazi</a>
    </div>
    <div class="c1">
        <a>f</a>
    </div>
    <div class="c1">
        <div class="c2">找的就是你，你媽，層級選擇器</div>
    </div>
    <script src="jquery-1.12.4.js">
    </script>
</body>
</html>
===============================================查找標簽class等於c1下麵的標簽class等於c2的標簽===========================================
> obj = $('.c1 .c2')    <!-- 查找標簽class等於c1下麵的標簽class等於c2的標簽的所有標簽，子子孫孫 -->
> [div.c2, prevObject: jQuery.fn.init(1), context: document, selector: ".c1 .c2"]
> obj[0]
>   <div class="c2">找的就是你，你媽，層級選擇器</div>

    parent > child  >符號代表只找子標簽，如下：

> obj = $("#i10 a")   <!-- 查找id="i10"標簽下麵所有的<a>標簽，包括子標簽和孫子標簽，所有的標簽-->
> (4) [a, a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a"]

> con = $("#i10>a")  <!--查找標簽id="1o"下麵的子標簽<a>，只查找子標簽看是否是<a>標簽 -->
> (3) [a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10>a"]

    “>”大於號代表只查找層級標簽下麵的子標簽，" "空格代表查找子標簽下的所有滿足條件的標簽，子子孫孫。

    6、篩選選擇器    比如：:first篩選滿足條件的第一個，如下:

> obj = $('#i10 a:first')   <!--  篩選滿足條件的第一個標簽-->
> [a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:first"]

> obj = $('#i10 a:odd')    <!-- 篩選滿足條件的奇數標簽-->
> (2) [a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:odd"]

> obj = $('#i10 a:even')    <!-- 篩選滿足條件的偶數標簽 -->
> (2) [a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:even"]

> obj = $('#i10 a:last')    <!-- 篩選滿足條件標簽的最後一個標簽-->
> [a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:last"]

> obj = $('#i10 a:eq(0)')    <!-- 篩選滿足條件索引等於0的標簽 -->
> [a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:eq(0)"]

> obj = $("#i10 a:gt(2)")    <!-- 篩選滿足條件索引大於2的標簽 -->
> [a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:gt(2)"]

> obj = $('#i10 a:lt(2)')    <!-- 篩選滿足條件索引小於2的標簽 -->
> (2) [a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:lt(2)"]
查找所有未選中的 input 元素
HTML 代碼:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代碼:
$("input:not(:checked)")
結果：
[ <input name="apple" /> ]

    7、內容(text)選擇器

        (1):contains(text)      -- 查找標簽裡面值包含text的標簽

:contains(text)
概述
    匹配包含給定文本的元素
參數
    text                String
    一個用以查找的字元串
示例
    描述:
        查找所有包含 "John" 的 div 元素
    HTML 代碼:
    <div>John Resig</div>
    <div>George Martin</div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn
    jQuery 代碼:
    $("div:contains('John')")
    結果:
        [ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

    (2):empty     -- 查找標簽裡面內容包含空的標簽，經常用在表格中，比如查找空單元格的時候

:empty
概述
    匹配所有不包含子元素或者文本的空元素
示例
    描述:
        查找所有不包含子元素或者文本的空元素
    HTML 代碼:
    <table>
      <tr><td>Value 1</td><td></td></tr>
      <tr><td>Value 2</td><td></td></tr>
    </table>
 jQuery 代碼:
$("td:empty")
結果:
[ <td></td>, <td></td> ]

    (3):has(selector)     --判斷標簽存在  addClass給標簽添加class屬性

 

:has(selector)
概述
    匹配含有選擇器所匹配的元素的元素
參數
    selector     Selector
    一個用於篩選的選擇器
示例
描述:
    給所有包含 p 元素的 div 元素添加一個 text 類  
HTML 代碼:
    <div><p>Hello</p></div>
    <div>Hello again!</div>
jQuery 代碼:
    $("div:has(p)").addClass("test");  <!-- 給含有<p>標簽的<div>標簽添加class="test"屬性，obj = $('div div:has(a)').addClass('test')-->
結果:
    [ <div class="test"><p>Hello</p></div> ]

 

    (4):parent  -- 查找標簽含有子內容的元素    即查找非空的標簽，裡面有內容或者嵌套其他標簽

 

:parent
概述
    匹配含有子元素或者文本的元素
示例
    描述:
        查找所有含有子元素或者文本的 td 元素
    HTML 代碼:
    <table>
      <tr><td>Value 1</td><td></td></tr>
      <tr><td>Value 2</td><td></td></tr>
    </table>
jQuery 代碼:
    $("td:parent")
結果:
    [ <td>Value 1</td>, <td>Value 2</td> ]

 

　8、可見的  :hidden     :visible

    （1）:hidden      匹配包含display:none的標簽

:hidden
概述
    匹配所有不可見元素，或者type為hidden的元素
示例
    描述:
        查找隱藏的 tr   匹配type為hidden的元素
    HTML 代碼:
    <table>
      <tr style="display:none"><td>Value 1</td></tr>
      <tr><td>Value 2</td></tr>
    </table>
jQuery 代碼:
    $("tr:hidden")
結果：
    [ <tr style="display:none"><td>Value 1</td></tr> ]

　(2):visable    可見的，display屬性不等於none

:visible
概述
    匹配所有的可見元素
示例
    描述:
        查找所有可見的 tr 元素
HTML 代碼:
    <table>
      <tr style="display:none"><td>Value 1</td></tr>
      <tr><td>Value 2</td></tr>
    </table>
jQuery 代碼:
    $("tr:visible")
結果:
    [ <tr><td>Value 2</td></tr> ]

　9、屬性

    [attribute]：查找標簽裡面具有某個屬性的標簽，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            font-size:50px;
            color:red;
        }
    </style>
</head>
<body>
    <div id="i10" class="c1">
        <div>
            <a>caonima</a>
        </div>
        <a alex="123">alexsb</a>
        <a alex="456">您好</a>
        <a>ershazi</a>
        <a>屬性標簽，attribute</a>
    </div>
    <div class="c1">
        <a>f</a>
    </div>
    <div class="c1">
        <div class="c2">找的就是你，你媽，層級選擇器</div>
    </div>
    <script src="jquery-1.12.4.js">
    </script>
</body>
</html>
進行如下查詢：
(1)、[attribute]   查詢標簽中屬性值是attribute的標簽
> obj = $('[alex]')        <!-- 查找標簽中含有屬性值為"alex"的標簽，比如alex="sb"屬性值等於alex的標簽 -->
> (2) [a, a, prevObject: jQuery.fn.init(1), context: document, selector: "[alex]"]

(2)[attribute=value]   查詢標簽屬性值等於value的標簽
> obj = $('[alex="123"]')    <!-- 查詢屬性等於alex且屬性值等於123的標簽
> [a, prevObject: jQuery.fn.init(1), context: document, selector: "[alex="123"]"

[attribute!=value]  屬性值不等於value的標簽
[attribute^=value]  屬性值不等於value的標簽
[attribute$=value]  屬性值以attribute結尾，且值等於value的標簽
[attribute*=value]  屬性值以attribute開頭，且值等於value的標簽

 


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

-Advertisement-
Play Games
更多相關文章
  • .Net下C#針對Excel開發控制項彙總(ClosedXML,EPPlus,NPOI)
    最近項目中需要一個導出Excel報告的功能，假期搜了一下，把其中比較主流的列一下，僅供參考。 功能需求： 效果圖： 一、ClosedXML 主頁：https://github.com/ClosedXML/ClosedXML 需要引用OpenXMLSDK（DocumentFormat.OpenXml. ...
  • 使用dtd--屬性聲明
    <!ATTLIST 元素名 屬性名稱 屬性類型 屬性特點> 1.屬性類型 屬性值引用已定義的id值，複數形式可以應用多個id， 以空格隔開 （1）CDATA e.g （2） ID類型 （3）IDREF，IDREFS （4）enumerated枚舉類型 2.屬性特點 ...
  • HDU_5532_Almost Sorted Array
    Almost Sorted Array Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total Submission(s): 6019 Accepted Submission(s) ...
  • xml約束
    1.元素聲明 （1）any元素類型 <!ELEMENT 元素名 ANY> （2）EMPTY元素類型 <!ELEMENT 元素名 EMPTY> 空標記，即元素中沒有內容，不能包含子元素和文本 <person name="" age="" /> （3） PCDATA類型的元素（純文本） <!ELEMEN ...
  • java集合類源碼分析之List（二）
    這一節主要介紹List介面的幾個實現類的區別： 1.線程安全 Vector是線程安全的，而ArrayList和LinkedList是非線程安全的。從源碼中我們可知，Vector類中的方法大部分都是同步的，即被synchronized關鍵字修飾；而那些沒有被synchronized關鍵字修飾的方法都是 ...
  • HDU_5528_Count a * b
    Count a * b Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total Submission(s): 872 Accepted Submission(s): 315 Pro ...
  • Travelling HDU - 3001
    Travelling HDU - 3001 方法：3進位狀態壓縮dp（更好的方法是預處理出每個狀態數字對應的y數組，然後用刷表，時間複雜度可以少一個n） 曾經錯在： 1.65行，兩個min打成max 2.每一組數據沒有重置ans（浪費2小時） ...
  • 使用java實現面向對象-File I/O
    java.io.File類用於表示文件（目錄） File類只用於表示文件（目錄）的信息（名稱、大小等），不能用於文件內容的訪問 RandomAccessFile java提供的對文件內容的訪問，既可以讀文件，也可以寫文件。 RandomAccessFile支持隨機訪問文件，可以訪問文件的任意位置 1 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類