jQuery中的選擇器

時間 2019-12-08

原文原文鏈接

選擇器

jQuery簡稱js庫,是爲了簡化JavaScript的開發或是DOM的操做等.
jQuery選擇器的做用是用於定位頁面元素
特色:html
1. 就是作得多,寫的少
2. 兼容各類瀏覽器

工廠函數

jQuery的工廠函數是做爲jQuery的一入口,經過該函數能夠實現定位頁面元素,將DOM對象包裝成jQuery對象,以及建立頁面元素等功能.
jQuery的工廠函數有兩種寫法:jquery
1. $()
2. jQuery()
說明: "$" 符號與 "jQuery" 單詞的含義是一致的
jQuery的約定:數組
- 在變量前加 $ 以表示jQuery操做

示例代碼:瀏覽器

<!-- 引入jQuery文件 -->
<script src="js/jquery.js"></script>
<body>
<button id="btn">按鈕</button>
<script>
    // DOM操做 (返回DOM對象) - 獲取頁面中的按鈕元素
    var btn = document.getElementById('btn');
    console.log(btn);

    /*
        jQuery操做 - 獲取頁面中的按鈕元素
        jQuery() - 稱爲jQuery的工廠函數
          * 做用 - 該函數是jQuery操做的一個入口
            * 用於定位頁面中的元素
          * 用法 - 另外一種用法是"$()"
          * 返回值 - jQuery對象
     */

    var btn = jQuery('#btn');
    var btn = $('#btn');
    console.log(btn);

</script>
</body>

DOM對象與jQuery對象

所謂DOM對象,就是指由DOM的官方規範提供的對象,或者是經過DOM提供的對象屬性或方法定位HTML頁面元素獲得的對象.
DOM對象轉換爲jQuery對象

示例代碼:ide

<script src="js/jquery.js"></script>
</head>
<body>
<button id="btn">克魯達</button>
<script>
    // DOM操做(返回DOM對象
    var btn = document.getElementById('btn');
    // 1. 將DOM對象轉換爲jQuery對象 - 就是工廠函數
    var $btn = $(btn);
    console.log($btn);
    // 2. 將jQuery對象轉換爲DOM對象:
    // jQuery對象是一個類數組對象 - 轉換方法就是: jQuery對象[索引值]
    var btn1 = $btn[0];
    console.log(btn1);

    // jQuery對象提供了get(index)方法 - index表示索引值
    var btn2 = $btn.get(0);
    console.log(btn2);

</script>
</body>

基本選擇器

注意 - 全部選擇器都是字符串類型
注意 - 通配符選擇器是匹配全部的
ID 選擇器: 就是經過HTML頁面的元素的id屬性值定位頁面元素
元素選擇器: 就是經過HTML頁面的元素名稱定位頁面元素
類選擇器: 就是經過HTML頁面元素的class屬性定位頁面元素
通配符選擇器: 就是匹配HTML頁面中全部的元素
組合選擇器: 就是將每一個選擇器匹配的元素的集合
說明: 因爲jQuery對象是類數組對象,即便匹配的元素只有一個,返回的結果依舊是類數組對象.
備註: 在jquery中使用選擇器的時候是沒有優先級別的

示例代碼:函數

<script src="js/jquery.js"></script>
</head>
<body>
<div id="d1">一花一世界</div>
<div id="d2" class="yy">一笑一人生</div>
<script>
    // ID屬性選擇器 - 匹配指定ID屬性值的元素
    console.log($('#d1'));
    // 類選擇器 - 匹配全部指定類名的元素
    console.log($('.yy'));
    // 元素選擇器 - 匹配全部指定元素木那個的元素
    console.log($('div'));
    // 通配符選擇器 - 匹配頁面中全部的元素
    console.log($('*'));
    // 組合選擇器 - 多個選擇器之間使用逗號分隔(並集) - 並集就是符合一個就好使
    console.log($('#d1','.yy'));
    // 組合選擇器 - 多個選擇器之間沒有任何分隔(交集) - 交集就是必須所有符合纔好使
    console.log($('#d2.yy'));
</script>
</body>

層級選擇器

後代選擇器 - 匹配指定祖先元素中的後代元素
子選擇器 - 匹配指定父元素中的子元素
相鄰兄弟選擇器 - 匹配指定元素的下一個兄弟元素
普通兄弟選擇器 - 匹配指定元素的下面全部兄弟元素

示例代碼:動畫

<title>層級選擇器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="parent">
    <div id="child">
        <div id="d6"></div>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d4"></div>
        <div id="d5"></div>
    </div>
    <div id="child2">
        <div id="d3"></div>
    </div>
</div>
<script>
    // 查找指定父元素全部的後代div
    console.log($('#parent div'));
    // 查找指定父元素的全部子級元素
    console.log($('#parent>div'));
    // 查找指定元素的下一個兄弟元素
    console.log($('#d1+div'));
    // 查找指定元素的後面全部兄弟元素(不包括前面的)
    console.log($('#d1~div'));
    // siblings()方法 - 獲取指定元素全部的兄弟元素(包括前面的)
    console.log($('#d1').siblings('div'));
</script>
</body>

基本過濾選擇器

就是把不要的過濾掉要的留下
在指定範圍匹配的元素當中進行篩選(自己本身沒有層級結構)

示例代碼:code

<title>基本過濾選擇器</title>
    <script src="js/jquery.js"></script>
    <style>
        #animated{
            width: 100px;
            height: 200px;
            background-color: cyan;

            position: absolute;
            left: 100px;
        }
    </style>
</head>
<body>
<h1>八百標兵奔北坡</h1>
<h2>炮兵並排北邊跑</h2>
<div>一花一世界</div>
<div id="d2">
    <div id="child"></div>
</div>
<div></div>
<div></div>
<div>一笑一人生</div>

<div id="animated"></div>

<script>
    // 在指定範圍內篩選出第一個元素
    console.log($('div:first'));
    // 在指定範圍內篩選出最後一個元素
    console.log($('div:last'));

    /*
        注意 :
          * 索引值爲偶數時其實是奇數
          * 索引值爲奇數時其實是偶數
          * 由於索引值是從 0 開始的
     */
    // 在指定範圍內篩選出索引值爲偶數的元素
    console.log($('div:even'));
    // 在指定範圍內篩選出索引值爲奇數的元素
    console.log($('div:odd'));

    /*
        :eq(index) - index表示索引值
     */
    // 篩選出等於指定索引值的元素
    console.log($('div:eq(0)'));
    // 篩選出大於指定索引值的元素
    console.log($('div:gt(3)'));
    // 篩選出小於於指定索引值的元素
    console.log($('div:lt(2)'));

    // :header - 表示匹配h1~h6的元素
    console.log($(':header'));

    function animated() {
        /*
            slideToggle - 是jQuery提供的動畫效果
         */
        $('#animated').slideToggle(animated);
    }
    animated();

    // :animated - 表示只能匹配由jQuery實現的動畫
    console.log($(':animated'));

    // 篩選出除屬性值爲child之外的全部元素
    console.log($('div:not("#child")'));
</script>
</body>

內容過濾選擇器

示例代碼:orm

<title>內容過濾選擇器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div>我是有內容的</div>
<div></div>
<div>
    <div id="child"></div>
</div>
<script>
    // 匹配到包含指定文本內容的元素
    console.log($('div:contains("內容")'));
    // 匹配到沒有文本內容的元素和沒有後代元素的元素
    console.log($('div:empty'));
    // 匹配到有文本內容的元素和有後代元素的元素
    console.log($('div:parent'));
    /*
        :has() - 表示包含匹配指定選擇器元素的父級
        [0] - 表示數組的提取
     */
    console.log($('div:has("#child")')[0]);
</script>
</body>

可見性過濾選擇器

:hidden選擇器

就是匹配到全部不可見的元素
不能匹配到CSS樣式屬性visibility設置爲hidden的隱藏元素
還能匹配到HTML頁面中不作任何顯示效果的元素
注意 - 用的時候儘可能肯定元素類型或指定範圍htm
- 由於要是不指定範圍的話它會篩選出頁面中全部的隱藏元素(好比:<HTML>,<meta>以及<style>等等)

示例代碼:

<title>可見性過濾選擇器</title>
    <script src="js/jquery.js"></script>
    <style>
        #d1 {
            display: none;
        }
        #d2 {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="d1">一花一世界...</div>
<div id="d2">一笑一人生...</div>
<input type="hidden" value="用戶名">
<input type="text" name="username">
<script>
    console.log($('hidden'));
</script>
</body>

:visible選擇器

就是匹配到全部可見的元素
匹配CSS樣式屬性visibility設置爲hidden的隱藏元素
- 當visibility設置爲hidden時的元素,依舊佔有頁面空間
還能匹配HTML頁面中<html>和<body>元素

示例代碼:

<title>可見性過濾選擇器</title>
    <script src="js/jquery.js"></script>
    <style>
        #d1 {
            display: none;
        }
        #d2 {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="d1">一花一世界...</div>
<div id="d2">一笑一人生...</div>
<input type="hidden" value="用戶名">
<input type="text" name="username">
<script>
   console.log($(':visible'));
</script>
</body>

屬性過濾選擇器

就是經過元素的屬性過濾掉不要的元素
經過屬性以及屬性的值來篩選

示例代碼:

<title>屬性過濾選擇器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
    // 獲取到全部元素中全部帶有指定屬性的元素
    console.log($('div[name]'));
    // 獲取到全部元素中帶有指定屬性和值的元素
    console.log($('div[class=mydiv]'));
    // 獲取到全部不含有指定屬性或不等於特定屬性值的元素
    console.log($('div[class!=maydiv]'));
    // 獲取到全部指定元素中以什麼什麼開頭的元素
    console.log($('div[class^=my]'));
    // 屬性過濾選擇器組合用法 - 交集(交集就是必須所有符合纔好使)
    console.log($('div[name=di][class^=my]'));
</script>
</body>

子元素過濾選擇器

在指定的範圍內進行子級選擇器過濾
須要注意的是:
- nth-child(index)
  - 做用 - 匹配當前元素做爲第幾個子元素
  - index是從 1 開始的,表示第幾個
    - 和索引值不一樣的是索引值是從 0 開始的

示例代碼:

<title>子元素過濾選擇器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="parent">
    <div id="d1">我是第一個子元素...</div>
    <div id="d2">我是中間的子元素...</div>
    <div id="d3">我是最後一個子元素...
        <div id="child">我是id爲d3的惟一的子元素...</div>
    </div>
</div>
<script>
    // :first-child - 表示當前匹配到的是第一個子元素
    console.log($('div:first-child'));
    // :last-child - 表示當前匹配到的是最後一個子元素
    console.log($('div:last-child'));
    /*
        nth-child(index)
          * 做用 - 匹配當前元素做爲第幾個子元素
          * index - 表示第幾個
          * 注意 - index是從 1 開始的,表示第幾個
            * 和索引值不一樣的是索引值是從 0 開始的
     */
    console.log($('div:nth-child(2)'));
    // only-child - 表示獲取到某個父級元素中惟一一個子元素的元素
    console.log($('div:only-child'));

</script>
</body>

表單對象過濾選擇器

示例代碼:

<title>表單對象過濾選擇器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<form action="#">
    <input type="text" disabled>
    <input type="checkbox">亞古獸
    <input type="checkbox" checked>加魯魯獸
    <select>
        <option>黑龍江</option>
        <!-- selected - 表示被選中的 -->
        <option selected>佳木斯</option>
        <option>哈爾濱</option>
    </select>
</form>
<script>
    // :disabled - 表示匹配到不可用的元素
    console.log($('input:disabled'));
    // :checked - 表示匹配到全部被選中的元素
    console.log($('input:checked'));
    // :selected - 表示匹配到選中的<option>元素
    console.log($('option:selected'))
</script>
</body>

1. JQuery中的選擇器
2. jquery中的選擇器
3. jQuery中的選擇器
4. jQuery中的DOM選擇器
5. Jquery 選擇器中的與
6. jQuery-jQuery選擇器
7. jQuery 的選擇器
8. jQuery的選擇器
9. JQuery的選擇器
10. jQuery選擇器
更多相關文章...
• jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
• XQuery 選擇和過濾 - XQuery 教程
• Docker容器實戰(七) - 容器眼光下的文件系統
• Docker容器實戰(六) - 容器的隔離與限制

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。