day17--JQuery選擇器

時間  2019-12-08
標籤 day17 day jquery 選擇器 欄目 JQuery 简体版
原文   原文鏈接

    操做HTML標籤的時候，咱們首先要找到HTML標籤的位置，而後進行操做，下面來看看集中查找標籤的方法，以下：html

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

<!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"的標籤，以下：app

> 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)

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

    經過code

> 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)

    三、標籤選擇器，經過標籤自己進行選擇htm

選擇上面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>

    四、組合查詢   組合查詢使用的是逗號(,)，$('a,.c2,#i10)意思是找到全部<a>標籤，class=c2的標籤和id="i10"的標籤，以下：blog

> 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"]

    五、層級查詢   找到某一個標籤下面的標籤，這個我比較喜歡，一層一層的進行查找，以下：索引

<!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  >符號表明只找子標籤，以下：ip

> 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"]

    「>」大於號表明只查找層級標籤下面的子標籤，" "空格表明查找子標籤下的全部知足條件的標籤，子子孫孫。字符串

    六、篩選選擇器    好比：: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" /> ]

    七、內容(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> ]

 

　八、可見的  :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> ]

　九、屬性

    [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的標籤
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程