jQuery 實戰讀書筆記之第二章：選擇元素

基本選擇器 html 代碼如下，後面的 js 使用的 html 基本大同小異。 js 代碼如下：根據層級查找元素 js 代碼如下：通過屬性來選擇元素過濾器表單過濾器及自定義過濾器 ...

基本選擇器

html 代碼如下，後面的 js 使用的 html 基本大同小異。

<!doctype html>
<html>
    <head>
        <title>基本選擇器</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="../css/main.css"/>
        <style>
            .found-element
            {
               border: 2px solid #000000;
               background-color: #DDDDDD;
            }
   
            .red-border
            {
               border: 2px solid #E80C0C;
            }
   
            .opaque
            {
               opacity: 0.5;
            }
         </style>
    </head>
    <body>
        <div id="sample-dom">
         <span>Some images:</span>
         <div>
            <img src="../images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
            <img src="../images/image.2.jpg" id="little-bear" title="A dog named Little Bear"/>
            <img src="../images/image.3.jpg" id="verbena" alt="Verbena"/>
            <img src="../images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
            <img src="../images/image.5.jpg" id="tiger-lily" alt="Tiger Lily"/>
            <img src="../images/image.6.jpg" id="coffee-pot"/>
         </div>

         <div id="some-div">This is a &lt;div&gt; with an id of <code>some-div</code></div>

         <h2>Hello, I'm a &lt;h2&gt; element</h2>
         <p>
            I'm a paragraph, nice to meet you.
         </p>

         <ul class="my-list">
            <li>
               <a href="http://jquery.com">jQuery website</a>
               <ul>
                  <li><a href="#css1">CSS1</a></li>
                  <li><a href="#css2">CSS2</a></li>
                  <li><a href="#css3">CSS3</a></li>
                  <li>Basic XPath</li>
               </ul>
            </li>
            <li>
               jQuery also supports
               <ul>
                  <li>Custom selectors</li>
                  <li>Form selectors</li>
               </ul>
            </li>
         </ul>

         <table id="languages">
            <thead>
            <tr>
               <th>Language</th>
               <th>Type</th>
               <th>Invented</th>
            </tr>
            </thead>
            <tbody>
            <tr>
               <td>Java</td>
               <td>Static</td>
               <td>1995</td>
            </tr>
            <tr>
               <td>Ruby</td>
               <td>Dynamic</td>
               <td>1993</td>
            </tr>
            <tr>
               <td>Smalltalk</td>
               <td>Dynamic</td>
               <td>1972</td>
            </tr>
            <tr>
               <td>C++</td>
               <td>Static</td>
               <td>1983</td>
            </tr>
            </tbody>
         </table>

         <form id="form-fake" action="#">
            <div>
               <label for="text-field">Text:</label>
               <input type="text" id="text-field" name="text-field"/>
            </div>
            <div>
               <span>Radio group:</span>
               <label><input type="radio" name="radio-group" id="radio-a" value="A"/> A</label>
               <label><input type="radio" name="radio-group" id="radio-b" value="B" checked="checked"/> B</label>
               <label><input type="radio" name="radio-group" id="radio-c" value="C"/> C</label>
            </div>
            <div>
               <span>Checkboxes:</span>
               <label><input type="checkbox" name="checkboxes" id="checkbox-1" value="1"/> 1</label>
               <label><input type="checkbox" name="checkboxes" id="checkbox-2" value="2"/> 2</label>
               <label><input type="checkbox" name="checkboxes" id="checkbox-3" value="3" checked="checked"/> 3</label>
               <label><input type="checkbox" name="checkboxes" id="checkbox-4" value="4"/> 4</label>
            </div>
            <input type="submit" id="button-submit" value="Submit" />
         </form>
      </div>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <!-- 如果 CDN 無法訪問，就使用本地文件 -->
        <script>
            window.jQuery || document.write('<script src="../js/jquery-3.2.1.js"><\/script>')
        </script>
        <script src="js/basicSelector.js"></script>
    </body>
</html>

js 代碼如下：

//IE6-7 不支持 console.log() 方法

//通用選擇器
var $allElements = $('*');

console.log('通用選擇器 "*" 結果：');
console.log($allElements);

//ID 選擇器，原生 Javascript 函數 getElementById()
var $idElement = $('#some-div');
console.log('ID 選擇器 "#some-div" 結果：');
console.log($idElement);
//$('\\.description')   圓點符號"." 在 CSS 中有特殊的用法，所以這裡需要使用轉義

//Class 選擇器，原生 Javascript 函數 getElementsByClassName()
var $classElements = $('.my-list');
console.log('Class 選擇器 ".my-list" 結果：');
console.log($classElements);

//元素選擇器，原生 Javascript 函數 getElementsByTagName()
var $divs = $('div');
console.log('元素選擇器 "div" 結果：');
console.log($divs);

//選擇 div 和 span 的所有元素
var $divAndSpan = $('div, span');
console.log('元素選擇器 "div, span" 結果：');
console.log($divAndSpan);

//選擇 div 下的 span 子元素
var $divSpan = $('div span');
console.log('元素選擇器 "div span" 結果：');
console.log($divSpan);

根據層級查找元素

js 代碼如下：

//直接子元素
var $aDirectChild = $('ul.my-list > li > a');
console.log('層次選擇器直接子元素 "ul.my-list > li > a" 結果：')
console.log($aDirectChild);

//子元素
var $aChild = $('ul.my-list li a');
console.log('層次選擇器子元素 "ul.my-list li a" 結果：')
console.log($aChild);

//緊鄰同級元素
var $siblingDirect = $('ul+table');
console.log('層次選擇器緊鄰同級 "ul+table" 結果：');
console.log($siblingDirect);

//同級元素
var $siblingNotDirect = $('ul~table');
console.log('層次選擇器同級 "ul~table" 結果：');
console.log($siblingNotDirect);

通過屬性來選擇元素

//屬性 href 值以 http:// 開頭
var $externalLinks = $('a[href^="http://"]');
console.log('選擇器 "a[href^=\"http://\"]" 結果:')
console.log($externalLinks);

//屬性 href 值不等於 http://jquery.com
var $externalNotEqualLinks = $('a[href!="http://jquery.com"]');
console.log('選擇器 "a[href^=\"http://jquery.com\"" 結果:')
console.log($externalNotEqualLinks);

/*  不能識別。。。書上講錯了？？？
//屬性 href 值不以 http:// 開頭
var $notExternalLinks = $('a[href!^="http://"]');
console.log('選擇器 "a[href!^=\"http://\"]" 結果:')
console.log($notExternalLinks);
*/

//屬性 src 值以 .jpg 結尾
var $endMatch = $('[src$=".jpg"');
console.log('選擇器 "[src$=\".jpg\"" 結果:');
console.log($endMatch);

//屬性 href 值包含 jquery
var $includeMatch = $('[href*="jquery.com"]');
console.log('選擇器 "[href*=\"jquery.com\"" 結果:');
console.log($includeMatch);

//屬性 id 包含首碼 tiger (包含 tiger 本身)
var $includePrefixMatch = $('[class|="my"]');
console.log('選擇器 "[class|=\"my\"]" 結果:');
console.log($includePrefixMatch);

//滿足兩個條件
var $doubleMatch = $('input[type="checkbox"][checked]');
console.log('選擇器 "input[type|=\"checkbox\"][checked]" 結果:');
console.log($doubleMatch);

過濾器

/*
過濾器是與其他類型的選擇器結合進一步篩選匹配元素結果集的選擇器。
通常以冒號（:）開頭，其中一些選擇器接受括弧內的傳遞參數。
*/


/*
位置過濾器
*/

var $aFisrt = $('a:first');
console.log('頁面第一個a元素選擇器 "a:first" 結果:')
console.log($aFisrt);

var $aLast = $('a:last');
console.log('頁面最後一個a元素選擇器 "a:last" 結果:')
console.log($aLast);

//索引從 0 開始，返回偶數索引元素
var $aEven = $('a:even');
console.log('a偶數元素選擇器 "a:even" 結果:')
console.log($aEven);

//索引從 0 開始，返回奇數索引元素
var $aEven = $('a:odd');
console.log('a奇數選擇器 "a:odd" 結果:')
console.log($aEven);

var $aEqule = $('a:eq(2)');
console.log('a選擇器 "a:eq(2)" 結果:')
console.log($aEqule);

var $aGreaterThan = $('a:gt(2)');
console.log('a選擇器 "a:gt(2)" 結果:')
console.log($aGreaterThan);

var $aLessThan = $('a:lt(2)');
console.log('a選擇器 "a:lt(2)" 結果:')
console.log($aLessThan);


/*
子過濾器
*/
var $firstChild = $('div:first-child');  //查找的是 div 類型標簽，是它的父元素的第一個子元素
console.log('匹配上下文第一個子元素選擇器 "div:first-child" 結果:')
console.log($firstChild);

var $lastChild = $('div:last-child');  //查找的是 div 類型標簽，是它的父元素的最後一個子元素
console.log('匹配上下文最後一個子元素選擇器 "div:last-child" 結果:')
console.log($lastChild);

var $typeFirstChild = $('div:first-of-type');  //查找的是 div 類型標簽，是它的父元素的第一個符合指定類型的子元素
console.log('匹配上下文第一個符合指定類型的子元素選擇器 "div:first-of-type" 結果:')
console.log($typeFirstChild);

var $typeLastChild = $('div:last-of-type');  //查找的是 div 類型標簽，是它的父元素的最後一個符合指定類型的子元素
console.log('匹配上下文最後一個符合指定類型的子元素選擇器 "div:last-of-type" 結果:')
console.log($typeLastChild);

/*
nth-child 索引從 1 開始而不是從 0 開始
*/
/*
查找的是 div 類型標簽，是它的父元素的第二個子元素
*/
var $threeChild = $('div:nth-child(2)');
console.log('匹配上下文第二個子元素選擇器 "div:nth-child(2)" 結果:')
console.log($threeChild);

/*
查找的是 div 類型標簽，是它的父元素的偶數個子元素
*/
var $evenChild = $('div:nth-child(even)');
console.log('匹配上下文偶數個子元素選擇器 "div:nth-child(even)" 結果:')
console.log($evenChild);

var $evenChild = $('div:nth-child(2n + 1)');
console.log('匹配上下文偶數個子元素選擇器 "div:nth-child(2n + 1)" 結果:')
console.log($evenChild);

表單過濾器及自定義過濾器

/*
被勾選的覆選框
*/
var checkedCheckBox1 = $('input[type="checkbox"][checked]'); //通過屬性進行匹配的方式只能檢查控制項的初始化狀態值
var checkedCheckBox2 = $('input[type="checkbox"]:checked');  //偽樣式類 :checked 可以匹配被勾選的元素
var checkedCheckBox3 = $('input:checkbox:checked');  // :checkbox 可以標識所有的覆選框元素
console.log('選中的覆選框："input:checkbox:checked"');
console.log(checkedCheckBox3);

/*
:disabled,  :enabled, :file, :focus, :image, :input, :password, :radio, :reset, :submit, :text
:selected：選取被選擇的 <option> 元素（下拉列表）。
*/

var selectedElement = $('input:selected');
console.log('處於選中狀態的列表元素："input:selected"');
console.log(selectedElement);


/*
內容過濾器
根據內容並不是說只根據文本內容，也可能是子元素
*/
var $hasDiv = $('div:has(img[src*="1.jpg"])');
console.log('包含 src 中含有 1.jpg 的img 元素的 div 元素："input:selected"');
console.log($hasDiv);

var $emptyElement = $('input:empty');
console.log('沒有子元素的元素（包括文本）："input:empty"');
console.log($emptyElement);

var $parentElement = $(':parent');
console.log('包含至少有一個子節點的元素（子節點是文本或者元素）：":parent"');
console.log($parentElement);

var $containsElement = $('p:contains("nice")');
console.log('包含特定文本的元素（直接包含在文本中的元素，或者被包含在子元素中）："p:contains(\"nice\")"');
console.log($containsElement);

var $containsElement2 = $('ul:contains("CSS1")');
console.log('包含特定文本的元素（直接包含在文本中的元素，或者被包含在子元素中）："ul:contains(\"CSS1\")"');
console.log($containsElement2);


/*
其他過濾器
*/
/*
:not 選擇器
*/
var $notElement = $('img:not(img[src$="1.jpg"])');
console.log('src 不是 1.jpg 結尾的 img 元素："img:not(img[src$=\"1.jpg\"])');
console.log($notElement);

/*
:visible, :hidden, :root, :target, :lang(language)
*/

/*
:header   <h1> - <h6>
*/
var $headerElement = $(':header');
console.log('頭元素：":header');
console.log($headerElement);



/*
自定義過濾器
*/
$.expr[':'].requiredLevel = $.expr.createPseudo(function(filterParam){
    return function(element, context, isXml){
        return element.getAttribute('data-level') > 2 &&
            element.getAttribute('data-points') > 100;
    };
});

$.expr[':'].pointsHigerThan = $.expr.createPseudo(function(filterParam){
    var points = parseInt(filterParam, 10);
    return function(element, context, isXml){
        return element.getAttribute('data-points') > points;
    }
});

var $higerElement = $('ul.levels li:pointsHigerThan(50)');
console.log('自定義選擇器： ul.levels li:pointsHigerThan(50)');
console.log($higerElement);

/*
使用上下文增強性能
給 $() 函數傳遞第二個參數 context，這個參數根據使用的選擇器來限制篩選 DOM 子元素的範圍，這個參數在頁面有大量元素的情況下
非常有用，當忽略該參數時，預設為整個 document
*/
var $spansInDiv = $('span', 'div'); //等同於 $('div span')
console.log('增加了選擇上下文的選擇器： "span", "div"');
console.log($spansInDiv);