《jQuery实战（第二版）》读书笔记

Posted 2020-09-04

第一部分 jQuery核心

1、jQuery基础

第一章总结了jquery的大致功能，基本原理，使用方式。

point：

（1）、引入：<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js">

（2）、强大的选择器：var checkedValue = $(‘[name="someRadioGroup"]:checked‘).val();用于选择分组名为someRadioGroup的单选按钮中被选中的按钮的值。更高级选择器:$("p:even")选择所有偶数行的p元素、$("tr:nth-child(1)")选择每个表格的第一行元素、$("body > div:has(a)")选择body中的直接子节点中包括a标签的div元素。

（3）、实用函数。jQuery会提供一些实用函数，例如trim等便于编写jQuery插件等。

（4）、文档就绪处理机制。由于window.onload = function () { // 触发脚本}该方法需要将文档完全加载完成，包括外部资源之后才可以执行脚本。而使用$(document).ready(function() { //加载完毕后触发的脚本} )，则是在DOM树加载完毕之后就可以触发，页面加载延迟问题得以优化。

（5）、创建DOM元素。$("<p>HI<p>").insertAfter("#followMe")可通过$()函数直接创建,并通过insertAfter函数将新创建的DOM元素放在指定元素后。

（6）、拓展jQuery。为了保持功能的简洁和高可用性，jQuery并未提供满足用户所有需求的函数，不过为用户提供了自定义函数方法来拓展$包装器。

$.fn.disable= function() { //自定义函数实现  

        return this.each( function () {

              if ( this.disable != null) this.disable = true;

              //XXX != null 会正确的测试null和undefined

        });

}。

返回each方法的执行结果（即包装器），保持jQuery的函数特性，支持链式操作。

（7）、jQuery与其他库共存。当$或者jQuery全局变量发生冲突的时候，调用jQuery.noConflict()函数。

2、选择要操作的元素

第二章玩转选择器，从选择器到创建新元素再到管理包装集。

（1）、$(selector)或$(selector,‘div#sampleDOM‘)，第一个参数为选择器，第二个参数为操作的上下文，如果省略的话，上下文为" * "即整个document。例中表示的是在id为sampleDOM的div元素的子集中选择符合选择器selector的元素。

（2）、选择器。标签选择器li，id选择器#id，类选择器.class，按照DOM之间层级关系选择，以及自定义选择器等。

a、其中基础选择器有：

*        匹配所有元素；  

E       匹配标签名为E的所有元素，如$("div")；

E  F  匹配E的子节点中标签名为F的所有元素，如$("div p")；

E>F  匹配E的直接子节点中标签名为F的所有元素，如$("div>p")；

E+F  匹配E后边的第一个兄弟元素中标签名为F的所有元素，如$("li+li")；

E~F  匹配E后边的所有兄弟元素中标签名为F的所有元素，如$("li~li")；

E .C  匹配E的所有元素中类名为C的元素，如$("div .sampleClass")；

E #I  匹配E的所有元素中ID为I的元素，如$("div #ID")；

E[A]  匹配E的所有所有元素中含有A属性的元素，如$("a[href]")；

E[A=V]  匹配E的所有元素中A属性的值为V的元素，如$("a[href=‘url‘]")；

E[A^=V] 匹配E的所有元素中A属性值以V开头的元素，如$("a[href^=‘my‘]")；

E[A$=V] 匹配E的所有元素中A属性值以V结尾的元素，如$("a[href$=‘.html‘]")；

E[A!=V] 匹配E的所有元素中A属性值以V结尾的元素，如$("a[href!=‘url‘]")；

E[A*=V] 匹配E的所有元素中A属性值以V结尾的元素，如$("a[href*=‘jquery‘]")；

b、通过位置选择：

:even，:odd，:first，:last，:first-child，:last-child   如字面意思；

:nth-child(n)  匹配上下文中的第n个子节点，可以拓展为函数式例如:nth-child(5n+1) ；

:eq(n)  第n个元素，:gt(n)  第n个元素之后的（不包含n），:lt(n) 第n个元素之前的（不包含n）；

注意：nth-child(n)是从1开始计数，而其他的选择器是从0开始计数。

c、自定义选择器

:animated   选择处于动画状态的元素；

:button  选择按钮元素（包括button以及input中type为submit、reset、button的元素）；

:checkbox   选择复选框元素（input[type = checkbox]） ；

:checked   选择处于选中状态的复选框或者单选按钮元素；

:contains（food）   选择包含文本food的元素；

:disabled / :enabled   选择处于禁用 / 启用状态的元素；

:file   选择文件输入元素（input[type = file]）;

:has(selector) / not(selector)   选择 至少包含一个 / 没有包含   选择器选中的元素    的元素；

:header   选择标题元素  <h1>到<h6>；

:hidden / :visible  选择隐藏 / 可见元素；

:image   选择图片输入元素(input[type = image])；

:input    选择表单元素（input、select、textarea、button）;

:parent   选择有子节点（包含文本）的元素，空元素除外;（是:empty的取反）；

:password   选择口令元素（input[ type = password ]）；

:radio    选择单选框元素（input [ type = radio ]）；

:reset    选择重置按钮元素（input[ type = reset ] 或者 button[ type = reset ]）；

To Be Continue！！