jQuery 之 [ 選擇器 ]

時間 2019-12-05

標籤 jquery 選擇器欄目 JQuery 简体版

原文原文鏈接

jQuery

描述

jQuery是一個主流的JavaScript類庫javascript
- 做用：是簡化HTML頁面和DOM操做
- 特色：作得多，寫得少

jQuery()

稱爲jQuery工廠函數
用於操做jQuery的一個入口
jQuery()也能夠簡寫爲[ $() ]

注意

DOM操做會獲得DOM對象，jQuery操做會獲得jQuery對象
因爲不便進行區分，會有一個jQuery約定java
- 在數據前加一個前綴 "$" 表示爲jQuery操做

<body>
<p id="text">三步白頭</p>
<script>
    /*
        經過DOM操做來獲取指定元素
         * 獲取到指定元素
     */
    var p = document.getElementById( 'text' );
    console.log( p );// 顯示 <p id="text">三步白頭</p>

    /*
        經過jQuery來獲取指定元素
         * 獲取到一個jQuery對象
     */
    var $p = $( '#text' );
    console.log( $p );// 顯示 jQuery.fn.init [p#text, context: document, selector: "#text"]
</script>
</body>

DOM對象和jQuery對象

DOM對象和jQuery對象之間能夠相互轉換

DOM對象轉換成jQuery對象

利用工廠函數將DOM對象轉換成jQuery對象

jQuery對象轉換成DOM對象

jQuery對象加索引值
jQuery對象提供的get()方法jquery
- get()方法中的參數爲索引值

示例代碼

<body>
<p id="text">三步白頭</p>
<script>
    /* 定位頁面元素 */
    var p = document.getElementById( 'text' );
    /* DOM對象 */
    console.log( p );// 顯示 <p id="text">三步白頭</p>

    /* 將DOM轉換成jQuery對象 */
    var $p = $( p );
    console.log( $p );// 顯示 jQuery.fn.init(1)

    /* 將jQuery對象轉換成DOM對象 */
    var p1 = $p[0];
    console.log( p1 );// 顯示 <p id="text">三步白頭</p>

    /* 將jQuery對象轉換成DOM對象 */
    var p2 = $p.get( 0 );
    console.log( p2 );// 顯示 <p id="text">三步白頭</p>
</script>
</body>

選擇器

描述

jQuery的選擇器是用於定位HTML頁面中的元素

基本選擇器

ID選擇器 - 匹配指定ID的元素
元素選擇器 - 匹配全部指定元素名的元素
類選擇器 - 匹配指定class屬性名的元素
通配符選擇器 - 匹配頁面全部元素

示例代碼

<body>
<div id="d1">三步白頭</div>
<div id="d2" class="dd">天道昭彰</div>
<script>
    /* 經過ID選擇器來獲取指定元素 */
    console.log( $( '#d1' ) );// 顯示 jQuery.fn.init(1)

    /* 經過元素選擇器來獲取指定的元素 */
    console.log( $( 'div' ) );// 顯示 jQuery.fn.init(2)

    /* 經過類(class)選擇器來獲取指定元素 */
    console.log( $( '.dd' ) );// 顯示 jQuery.fn.init(1)

    /* 經過通配符選擇器來獲取頁面中全部元素 */
    console.log( $( '*' ) );// 顯示 jQuery.fn.init(9)

    /* 也能夠經過組合選擇器來獲取目標元素 */
    /* 並集組合選擇器 */
    console.log( $( '#d1, .dd' ) );// 顯示 jQuery.fn.init(2)
    /* 交集組合選擇器 */
    console.log( $( '#d2.dd' ) );// 顯示 jQuery.fn.init(1)
</script>
</body>

層級選擇器

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

示例代碼

<body>
<div id="fuji">
    <div id="ziji1">
        <div id="d6"></div>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d4"></div>
        <div id="d5"></div>
    </div>
    <div id="ziji2">
        <div id="d3"></div>
    </div>
</div>
<script>
    /* 經過後代選擇器來獲取指定元素的全部後代元素 - 不會區分後代的層級關係 */
    console.log( $( '#fuji div' ) );// 顯示 jQuery.fn.init(8)

    /* 經過子級選擇器來獲取指定元素的全部子級元素 */
    console.log( $( '#fuji > div' ) );// 顯示 jQuery.fn.init(2)

    /* 經過相鄰兄弟選擇器來獲取指定元素的下一個相鄰的兄弟元素 */
    console.log( $( '#d1 + div' ) );// 顯示 jQuery.fn.init(1)
    /* 經過普通兄弟選擇器來獲取指定元素的後面全部兄弟元素 */
    console.log( $( '#d1 ~ div' ) );// 顯示 jQuery.fn.init(3)

    /* jQuery提供了siblings()方法 - 能夠獲取指定元素的全部兄弟元素(前面 + 後面) */
    console.log( $( '#d1' ).siblings( 'div' ) );// 顯示 jQuery.fn.init(4)
</script>
</body>

基本過濾選擇器

<head>
    <meta charset="UTF-8">
    <title>基本過濾選擇器</title>
    <script src="jquery.js"></script>
    <style>
        #donghua {
            width: 100px;
            height: 200px;
            background-color: yellowgreen;
        }
    </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="donghua"></div>
<script>
    /* 獲取指定元素的第一個子元素 */
    console.log( $( 'div:first' ) );// 顯示 jQuery.fn.init(1)
    /* 獲取指定元素的最後一個子元素 */
    console.log( $( 'div:last' ) );// 顯示 jQuery.fn.init(1)

    /* 獲取指定元素中全部偶數行(索引值)的子元素 */
    console.log( $( 'div:even' ) );// 顯示 jQuery.fn.init(4)
    /* 獲取指定元素中全部奇數行(索引值)的子元素 */
    console.log( $( 'div:odd' ) );// 顯示 jQuery.fn.init(3)

    /* 獲取與指定索引值相等的元素 */
    console.log( $( 'div:eq( 0 )' ) );// 顯示 jQuery.fn.init(1)
    /* 獲取大於指定索引值的元素 */
    console.log( $( 'div:gt( 2 )' ) );// 顯示 jQuery.fn.init(4)
    /* 獲取小於指定索引值的元素 */
    console.log( $( 'div:lt( 2 )' ) );// 顯示 jQuery.fn.init(2)

    /* 獲取標題元素 */
    console.log( $( ':header' ) );// 顯示 jQuery.fn.init(2)

    /* 設置動畫效果 */
    function donghua(){
        $( '#donghua' ).slideToggle( donghua );
    }
    donghua();
    /* 獲取正在執行動畫的元素 */
    console.log( $( ':animated' ) );// 顯示 jQuery.fn.init(1)

    /* 獲取去除指定目標的元素 */
    console.log( $( 'div:not("#child")' ) );// 顯示 jQuery.fn.init(6)
</script>
</body>

內容過濾選擇器

<body>
<div id="d1">這是編號d1的div元素</div>
<div id="d2">這是編號d2的元素</div>
<div id="d3"></div>
<div id="d4">
    <div id="d5">這是編號d5的元素</div>
</div>
<script src="javascript/jquery.js"></script>
<script>
    /* 匹配擁有指定文本內容的元素 - :contains( )「括號中填寫指定的文本內容」 */
    console.log( $( 'div:contains("div")' ));
    /* 匹配沒有文本內容的元素 - :empty */
    console.log( $( 'div:empty' ));
    /* 匹配有文本內容的元素 - :parent */
    console.log( $( 'div:parent' ));
    /* 匹配擁有指定文本內容的元素的父級元素 - :has( )「括號中填寫帶有指定文本內容的子級元素」 */
    console.log( $( 'div:has(:contains("d5"))' ));
</script>
</body>

可見性過濾選擇器

<head>
    <meta charset="UTF-8">
    <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>
<script src="javascript/jquery.js"></script>
<script>
    /* 匹配未隱藏的元素 - :visible */
    console.log( $( 'div:visible' ));
    /* 匹配隱藏的元素 - :hidden */
    console.log( $( 'div:hidden' ));
</script>
</body>

屬性過濾選擇器

<body>
<div id="d"></div>
<div class="ad"></div>
<div class="ad c1 kda"></div>
<div class="kda ad c2"></div>
<div class="c3 kda ad"></div>
<script src="javascript/jquery.js"></script>
<script>
    /* 匹配具備指定屬性的元素 - [屬性名] */
    console.log( $( 'div[id]' ));
    /* 匹配具備指定屬性和屬性值的元素 - [屬性名=屬性值] */
    console.log( $( 'div[class="ad"]' ));
    /* 匹配沒有指定屬性和屬性值的元素 - [屬性名!=屬性值]「包含沒有指定屬性的元素」 */
    console.log( $( 'div[class!="ad"]' ));
    /* 匹配具備以指定屬性值爲開始的指定屬性的元素 - [屬性名^=屬性值] */
    console.log( $( 'div[class^="ad"]' ));
    /* 匹配具備以指定屬性值爲結束的指定屬性的元素 - [屬性名$=屬性值] */
    console.log( $( 'div[class$="ad"]' ));
    /* 匹配具備以指定屬性包含指定屬性值的元素 - [屬性名*=屬性值] */
    console.log( $( 'div[class*="kda"]' ));
</script>
</body>

子元素過濾選擇器

<body>
<div id="d1">
    <div id="d11"></div>
    <div id="d12">
        <div id="d121"></div>
    </div>
    <div id="d13"></div>
</div>
<script src="javascript/jquery.js"></script>
<script>
    /*
        匹配指定元素的第一個子元素 - :first-child
        * 會對其進行判斷，判斷當前指定的目標元素是不是其父級的第一個子元素
     */
    console.log( $( 'div:first-child' ));
    /*
        匹配指定元素的最後一個子元素 - :last-child
        * 會對其進行判斷，判斷當前指定的目標元素是不是其父級的最後一個子元素
     */
    console.log( $( 'div:last-child' ));
    /* 匹配指定元素的第幾個子元素 - :nth-child( )「括號中填寫的數字表示第幾個，不是索引值」 */
    console.log( $( 'div:nth-child(2)' ));
    /* 匹配是父元素惟一的子元素的元素 - :only-child */
    console.log( $( 'div:only-child' ));
</script>
</body>

表單對象屬性過濾選擇器

<body>
<form action="#">
    <input disabled type="text" id="in1">
    <input type="text" id="in2">
    <br>
    <input checked type="radio" name="sj" value="yl1">蘋果
    <input type="radio" name="sj">樂視
    <br>
    <input checked type="checkbox" name="yxj" value="yl2">PS4
    <input type="checkbox" name="yxj">PSV
    <br>
    <select>
        <option value="sj">手機</option>
        <option selected value="dn">電腦</option>
        <option value="yxj">遊戲機</option>
    </select>
    <br>
    <input type="submit">
</form>
<script src="javascript/jquery.js"></script>
<script>
    /* 匹配全部可用的元素 - input:enabled */
    $( 'input[type="text"]:enabled' ).val( '密碼' );
    /* 匹配全部不可用的元素 - input:disabled */
    $( 'input:disabled' ).val( '用戶名' );
    /* 匹配全部被選中的元素（單選和多選） - input:checked */
    console.log( $( 'input:checked' ).val() );
    var $input = $( 'input:checked' );
    /* 經過遍歷獲取全部被選中的元素 */
    for ( var s = 0; s < $input.length; s++ ) {
        var ins = $input[s];
        console.log( ins.value );
    }
    /* 匹配下拉列表中選中的元素 - select>option:selected */
    console.log( $( 'select>option:selected' ).val() );
</script>
</body>

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

相關標籤/搜索

每日一句

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