【jQuery】之選擇器

時間 2019-12-06

原文原文鏈接

jQuerycss

JS類庫其實就是簡化Js的開發，主要是DOM的操做，JS類庫會預約義一系列對象和函數，下降對JS的使用難度，兼容各個瀏覽器html

工廠函數

主要是簡化經過函數定位頁面元素，將
DOM對象包裝成jQuery對象，創建頁面元素jquery

<script src="js/jquery.js"></script>
    <!--引入jQuery-->
</head>
<body>
<button id="qyc">按鈕</button>
<script>
    var qyc = document.getElementById('qyc');
//    DOM對象（返回該對象），獲取頁面中的按鈕元素
    console.log(qyc);
//    var qyc = $('#qyc');
    var qyc = jQuery('#qyc');
    /*獲取頁面中按鈕元素
    jQuery()是jQuery的工廠函數
    * 函數是jQuery的人口
    * 定位頁面中元素
    * 另外一個用法；$()=jQuery()
     */
    console.log(qyc);
</script>
</body>

DOM對象與jQuery對象

DOM對象和jQuery對象是能夠互相轉換的，是爲了簡化DOM的瀏覽器

<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按鈕</button>
<script>
    var qyc = document.getElementById('qyc');
//    DOM操做()返回該對象
    var $qyc = $(qyc);
    console.log($qyc);
//    DOM對象轉換爲jQuery對象-工廠函數
    var qyc1 = $qyc[0];
    console.log(qyc1);
//    jQuery對象轉換爲DOM對象-jQuery對象[索引值]
    var qyc2 = $qyc.get(0);
    console.log(qyc2);
//    jQuery對象提供了get(index)方法-index爲索引值
</script>
</body>

選擇器

基本選擇器

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

<title>基本選擇器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="qi">愛新覺羅</div>
<div id="q2" class="cla">呼延覺羅</div>
<script>
    console.log($('#q1'));
    console.log($('div'));
    console.log($('.cla'));
    console.log($('*'));
    // 通配符選擇器-匹配全部
    console.log($('#d1, .cls'));
//    組合選擇器-多個選擇器使用逗號分隔(並集)
    console.log($('#q2.cla'));
//    組合選擇器-多個選擇器沒有分隔(交集)
</script>
</body>

層級選擇器

後代選擇器-匹配祖先元素中後代元素
子選擇器-匹配父元素中子元素
相鄰兄弟選擇器-匹配該元素下一個兄弟元素
普通兄弟選擇器-匹配該元素後全部兄弟元素函數

<body>
<div id="qh">
    <div id="cq">
        <div id="q6"></div>
        <div id="q1"></div>
        <div id="q2"></div>
        <div id="q4"></div>
        <div id="q5"></div>
    </div>
    <div id="cq2">
        <div id="q3"></div>
    </div>
</div>
<script>
    console.log('#qh div');
    console.log('#qh>div');
    // 指定元素的下個相鄰兄弟元素
    console.log('#q1~div');
    // 指定元素後面全部的兄弟元素
    console.log('#q1').siblings('div');
    // siblings()方法-獲取指定元素全部兄弟元素(前面+後面)
</script>
</body>

基本過濾選擇器

<script src="js/jquery.js"></script>
    <style>
        #qyc {
           width: 100px;
           height: 200px;
           background-color: blue;
        }
    </style>
</head>
<body>
<h1>標題</h1>
<h2>標題</h2>
<div id="q1">
    <div id="qh"></div>
</div>
<div></div>
<div></div>
<div id="animated"></div>
<script>
    console.log($('div:first'));
    console.log($('div:last'));
//  在指定範圍匹配元素中進行篩選
    console.log($('div:even'));
    console.log($('div:odd'));
//  索引值爲偶數時-奇數元素；索引值爲奇數十-偶數元素
    console.log($('div:eq(0)'));//等於
    console.log($('div:gt(2)'));//大於
    console.log($('div:lt(2)'));//小於

    console.log(':header');
//  :header-匹配h1到h6元素
    function animated() {
        $('animated').slideToggle(animated);
    }
    animated();
    console.log($(':animated'));
//    :animated-只匹配由jQuery實現動畫
    console.log($('div:not("#qh")'));
</script>
</body>

內容過濾選擇器

<script src="js/jquery.js"></script>
</head>
<body>
<div>div元素</div>
<div></div>
<div>
    <div id="qh"></div>
</div>
<script>
    console.log($('div:contains("q1")'));
    console.log(('div:empty'));
    console.log($('div:parent'));
    console.log($('div:has("#qh")')[0]);
//    :has()-表示包含匹配指定選擇器元素父級元素
</script>
</body>

可見性過濾選擇器

<script src="js/jquery.js"></script>
    <style>
        #q1 {
            display: none;
        }
        #q2 {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="q1">呼延覺羅</div>
<div id="q2">愛新覺羅</div>
<input type="hidden" value="用戶名">
<input type="text" name="username">
<script>
    /*
        :hidden選擇器
        * 不能匹配CSS樣式屬性visibility設置爲hidden的隱藏元素
        * 還能匹配HTML頁面中不作任何顯示效果的元素
        * 用法 - 儘可能肯定元素類型或指定範圍
     */
    console.log($(':hidden'));
    /*
        :visible選擇器
        * 匹配CSS樣式屬性visibility設置爲hidden的隱藏元素
          * 當visibility設置爲hidden時的元素，依舊佔有頁面空間
        * 還能匹配HTML頁面中<html>和<body>元素
     */
    console.log($(':visible'));

</script>
</body>

屬性過濾選擇器

<script src="js/jquery.js"></script>
</head>
<body>
<div id="username" name="q1" class="mydiv"></div>
<div id="PASSWORD" name="d2" class="mycls"></div>
<div id="d1"></div>
<div class="myq"></div>
<script>
    console.log($('div[name]'));
    console.log($('div[class=mydiv]'));
    // [attr!=value]選擇器-包含沒有attr屬性的元素
    console.log($('div[class!=mydiv]'));

    console.log($('div[class^=my]'));
    // 屬性過濾選擇器組合用法-交集
    console.log($('div[name=q1][class^=my]'));

</script>

</body>

子元素過濾選擇器

<script src="js/jquery.js"></script>
</head>
<body>
<div id="q1">id爲qi的div元素</div>
<div id="q2">id爲qi的div元素</div>
<div id="q3">id爲qi的div元素
    <div id="qh"></div>
</div>
<script>
    console.log($('div:first-child'));
//    :first-child- 當前元素是否爲第個子元素
    console.log($('div:last-child'));

    console.log(('div:nth-child'));
    console.log(('div:only-child'));
//    匹配當前元素做爲第index個字元素
//    index是從1開始，即是第幾個
</script>
</body>

表單對象屬性過濾選擇器

<body>
<form action="#">
    <input type="text" disabled>
    <input type="checkbox">html
    <input type="checkbox" checked>css
    <select>
        <option>端遊</option>
        <option selected>單機</option>
        <option>頁遊</option>
    </select>
</form>
<script>
    console.log($('input:disabled'));
    console.log($('input:checked'));
    console.log($('option:selected'));
</script>
</body>

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

相關標籤/搜索

每日一句

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