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 实战读书笔记之第二章：选择元素的更多相关文章

jQuery 实战读书笔记之第三章：操作 jQuery 集合
创建新 HTML 元素 $('<div>Hello</div>'); /* 创建等价的空 div 元素 */ $('<div>'); $('<div /> ...
【vue.js权威指南】读书笔记（第二章）
[第2章:数据绑定] 何为数据绑定?答曰:数据绑定就是将数据和视图相关联,当数据发生变化的时候,可以自动的来更新视图. 数据绑定的语法主要分为以下几个部分: 文本插值:文本插值可以说是最基本的形式了. ...
Javascript高级程序设计读书笔记（第二章）
第二章在HTML中使用Javascript 2.1<script>元素延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到 ...
<算法图解>读书笔记:第2章选择排序
第2章选择排序 2.1 内存的工作原理需要将数据存储到内存时,请求计算机提供存储空间,计算机会给一个存储地址.需要存储多项数据时,有两种基本方式-数组和链表 2.2 数组和链表 2.2.1 链表 ...
《深入理解java虚拟机》读书笔记一——第二章
第二章 Java内存区域与内存溢出异常 1.运行时数据区域程序计数器: 当前线程所执行的字节码的行号指示器,用于存放下一条需要运行的指令. 运行速度最快位于处理器内部. 线程私有. 虚拟机栈: 描述 ...
jQuery 实战读书笔记之第六章：事件本质
理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...
jQuery 实战读书笔记之第五章：使用 jQuery 操作页面
html 如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...
jQuery 实战读书笔记之第四章：使用特性、属性和数据
使用属性 /* 每个元素都有一或多个特性,,这些特性的用途是给出相应元素或其内容的附加信息.(出自 JavaScript 高级程序设计) */ /* 特性是固有的 JavaScript 对象属性指的 ...
《深入理解bootstrap》读书笔记：第二章整体架构
一. 整体架构 1. CSS-12栅格系统把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件包括排版.按钮.表格.布局.表单等等. 3.jQu ...

随机推荐

AllJoyn 的JoinSession() 返回timeout问题
在项目中AllJoyn一直有个问题困扰着我们:client在加入session时调用JoinSession()函数有时会timeout失败. 注意:是“有时”失败,而有时又运行的很好.这种不确定性问题 ...
php 中拓展 xdebug的完全理解
question: Xdebug unable to connect to client, where do I start debugging the debugger? I'm setting u ...
ActiveMQ订阅模式持久化实现
实现步骤:1.配置发送xml,applicationContext-send.xml <?xml version="1.0" encoding="UTF-8&quo ...
Linux 倒引号、单引号、双引号
1.倒引号表示命令,用于命令替换,获取命令的返回结果. echo now is `date` 或者 echo now is $(date) 2.单引号 name=Andy 没有问题, 如果想 nam ...
Android传感器的介绍
在Android2.3 gingerbread系统中,google提供了11种传感器供应用层使用. #define SENSOR_TYPE_ACCELEROMETER 1 //加速度#de ...
Zxing二维码扫描
源代码地址有问题能够加QQ:312122330 之前对于Zbar的二位码扫描.到项目上线以后才发现扫描过于灵敏.导致有时候扫描到半截就启动了. 后来翻看ZXING的源代码,没有想象的复杂,复杂的地 ...
好用的Android屏幕适配
前言网上关于屏幕适配的文章已经铺天盖地了,为什么还要讲?因为网上现在基本都是使用px适配,即每种屏幕分辨率的设备需要定义一套dimens.xml文件.再加上有些手机还有虚拟按键(例如华为),这样就还 ...
Java多态和动态绑定是如何实现的
最近深入学习java,看到了动态绑定和多态这一章节,但遗憾的是,大部分的相关文章都停留于表面文字的描述.不得已,最后google了几篇英文文章,在此总结下这个问题. 一.静态绑定和动态绑定的区别在J ...
CSS-常用媒体查询
width:视口宽度.height:视口高度.device-width:渲染表面的宽度(对我们来说,就是设备屏幕的宽度).device-height:渲染表面的高度(对我们来说,就是设备屏幕的高度). ...
CI框架下nginx重写规则
因为: server { listen ; server_name 222.73.130.124; location / { index index.html index.htm index.php; ...

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

jQuery 实战读书笔记之第二章：选择元素的更多相关文章

随机推荐

热门专题