jQuery 实战读书笔记之第二章：选择元素

基本选择器

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

jQuery 实战读书笔记之第二章：选择元素

相关推荐