jQuery

在Web编程中，提供更简单的API，并兼容所有浏览器

1.兼容浏览器

特性检测: 通过函数规则和返回结果，判断浏览器是否支持某项特性

因地制宜: 根据不同的特性，选择不同的解决方案，达到兼容不同浏览器的目的

2.天然封装逻辑

jQuery类: 将所有接口集为一身的类

实例方法: 对jQuery对象做操作

静态方法: 需要指定jQuery对象

3.易于扩展逻辑

实例插件: 面向DOM元素的扩展，扩展为实例方法

静态插件: 更通用的工具性质方法，扩展为静态方法

4.易于使用（创建jQuery对象）

选择器: 通过搜索语法，筛选DOM出元素，然后构建jQuery对象

DOM对象: 将DOM对象转换为jQuery对象，就可以使用jQuery的接口了

js对象: 将js对象转换为jQuery对象，就可以使用jQuery的接口了

Html文本: Html文本与DOM元素的本质相同，只是还不在当前的文档中

jQuery对象: 直接克隆

1.基本特征

#id: id匹配的第一个DOM元素

.class: class匹配的一类DOM元素

tag: 标签匹配的一类DOM元素

*: 所有DOM元素（不区分叶子和祖先）

selector1, selector2, selectorN: 多个匹配结果的并集

2.结构关系特征

祖先子孙: 在‘祖先’的后辈节点中，‘子孙’匹配的节点

父亲 > 孩子: 在‘父亲’的子节点中，‘孩子’匹配的节点

兄长 ~ 兄弟: 在‘哥哥’的兄弟节点中，‘兄弟’匹配的节点

哥哥 + 相邻的弟弟: ‘哥哥’相邻的弟弟节点，并且‘相邻的弟弟’能够匹配

:first-child: 老大

:last-child: 老小

:nth-child(index): 老几

:only-child: 独生子

:first-of-type: 每个Tag的老大

:last-of-type: 每个Tag的老小

:nth-of-type(index): 每个Tag的老几

:only-of-type: 每个Tag的独生子

3.attribute特征

[attribute]: 包含该attribute的DOM元素

[attribute=value]: 包含该attribute && 值为value

[attribute!=value]: 包含该attribute && 值不等于value

[attribute^=value]: 包含该attribute && 值的前缀为value

[attribute$=value]: 包含该attribute && 值的后缀为value

[attribute*=value]: 包含该attribute && 值包含value

[attribute~=value]: 包含该attribute && 用空格分隔的值中包含value

[attribute|=value]: 包含该attribute && 值的前缀为value-或value

[selector1][selector2][selectorN]: 多个匹配结果的交集

4.子元素的特征

:contains("text"): 文本内容模糊匹配

:has("selector"): 子元素能够匹配selector

:empty: 不包含子元素和任何文本

:parent: 与empty相反

5.可见性特征

:visible: visibility:hidden || opacity:0 也被认为是可见的，因为占用了空间

:hidden: width:0 || height:0

6.表单元素的特征

:enabled: 状态为启用的元素

:disabled: 状态为禁用的元素

:checked: 单选框 / 复选框中被选中的项目

:selected: 下拉列表中被选中的项目

:focus: 焦点所在的元素

7.超链接的特征

:link: 未被访问

:visited: 已经访问

:hover: 鼠标悬浮

:active: 鼠标按下

8.元素的某个部分

:first-letter: 首字母

:first-line: 首行

:before: 元素前面

:after: 元素后面

9.jQuery结果中的二次筛选

:first: 第一个

:last: 最后一个

:even: 偶数位置

:odd: 奇数位置

:eq(index): 索引等于index

:lt(index): 索引小于index

:gt(index): 索引大于index

1.读取和修改元素的属性

: ① html文本

.html(): 找到集合中的第一个元素，返回它的innerHtml（不包含本身）

.html('html文本'): 遍历集合中的所有元素，用新的html文本替换innerHtml

: ② attribute: html文本作为普通标签，所包含的无意义的文本键值对

.attr('键'): 找到集合中的第一个元素，返回'键'对应的'值'

.attr('键', '值'): 遍历集合中的所有元素，设定'键值对'

.removeAttr('键'): 遍历集合中的所有元素，移除'键值对'

: ③ property: html文本作为DOM元素，所包含的有意义的属性

.prop('属性名'): 找到集合中的第一个元素，返回对应'属性的值'

.prop('属性名', '值'): 遍历集合中的所有元素，设定'属性的值'

: ④ value: 表单元素的值

.val(): 找到集合中的第一个元素，返回它的value

.val('值'): 遍历集合中的所有元素，设定它的value

: ⑤ text: html标签内包含的文本内容（连接起来）

.text(): 遍历集合中的所有元素，将它们的内容连接起来返回

.text('文本'): 遍历集合中的所有元素，把内容设定为'文本'

2.读取和修改元素的皮肤

: ① class: 样式类

.addClass('样式类'): 遍历集合中的所有元素，增加'样式类'

.removeClass('样式类'): 遍历集合中的所有元素，移除'样式类'

.toggleClass('样式类'): 遍历集合中的所有元素，反转'样式类'

.hasClass('样式类'): 遍历集合中的所有元素，是否至少存在一个'样式类'

: ② css: 内联样式

.css('样式属性'): 找到集合中的第一个元素，返回它的'样式属性的值'

.css('样式属性', '值'): 遍历集合中的所有元素，设定'样式属性的值'

: ③ offset：相对于document左上角的位置，由坐标对象“{ top:_, left:_ }”表示

.offset(): 找到集合中的第一个元素，返回它的'坐标'

.offset(坐标): 遍历集合中的所有元素，设定'坐标'

: ④ position：相对于父元素左上角的位置，由坐标对象 { top:_, left:_ } 表示

.position(): 找到集合中的第一个元素，返回它的'坐标'

: ⑤ 滚动位置：由于拖动滚动条，被隐藏区域的长度

.scrollLeft(): 找到集合中的第一个元素，返回'水平方向，左侧隐藏的长度'

.scrollLeft(长度): 遍历集合中的所有元素，设定'水平方向，左侧隐藏的长度'

.scrollTop(): 找到集合中的第一个元素，返回'垂直方向，上侧隐藏的长度'

.scrollTop(长度): 遍历集合中的所有元素，设定'垂直方向，上侧隐藏的长度'

: ⑥ '内容'的尺寸

.width(): 找到集合中的第一个元素，返回'内容的宽度'

.width(宽度): 遍历集合中的所有元素，设定'内容的宽度'

.height(): 找到集合中的第一个元素，返回'内容的高度'

.height(高度): 遍历集合中的所有元素，设定'内容的高度'

: ⑦ '内容+padding'的尺寸

.innerWidth(): 找到集合中的第一个元素，返回'包含padding的宽度'

.innerHeight(): 找到集合中的第一个元素，返回'包含padding的高度'

: 不要在 window 和 document 上使用

: ⑧ '内容+padding+border+(?margin)'的尺寸：参数为true时，包含margin

.outerWidth(): 找到集合中的第一个元素，返回'包含border的宽度'

.outerWidth(宽度): 遍历集合中的所有元素，设定'包含border的宽度'

.outerHeight(): 找到集合中的第一个元素，返回'包含border的高度'

.outerHeight(高度): 遍历集合中的所有元素，设定'包含border的高度'

: 不要在 window 和 document 上使用

3.修改DOM结构

: ① 对DOM元素做包裹

.wrap(content): 遍历集合中的所有元素，在外层包裹content

.unwrap(): 遍历集合中的所有元素，移除父元素

.wrapInner(content): 遍历集合中的所有元素，在内层包裹content

: ② 在DOM元素内部做插入

.append(content): 遍历集合中的所有元素，在内部后侧插入content

.prepend(content): 遍历集合中的所有元素，在内部前侧插入content

.appendTo(): 与append相似，只是把主宾调换

.prependTo(): 与prepend相似，只是把主宾调换

: ③ 在DOM元素外部做插入

.after(content): 遍历集合中的所有元素，在外部后侧插入content

.before(content): 遍历集合中的所有元素，在外部前侧插入content

.insertAfter(): 与after相似，只是把主宾调换

.insertBefore(): 与before相似，只是把主宾调换

: ④ 替换DOM元素

.replaceWith(content): 遍历集合中的所有元素，用content替换

.replaceAll(): 与replaceWith相似，只是把主宾调换

: ⑤ 移除DOM元素

.remove(): 遍历集合中的所有元素，从DOM中移除

.detach(): 遍历集合中的所有元素，从DOM中移除（保留event等，还会重新插入）

.empty(): 遍历集合中的所有元素，将子元素从DOM中移除（保留自己）

: ⑥ 复制DOM元素

.clone(是否复制event): 遍历集合中的所有元素，做深度复制

4.添加动画效果

: ① 基本

.show(毫秒, callback): 显示匹配的元素

.hide(毫秒, callback): 隐藏匹配的元素

.toggle(毫秒, callback): 反转匹配的元素

.animate({css}, 毫秒, callback): 过渡到指定样式

: ② 淡入淡出

.fadeIn(毫秒, callback): 淡入匹配的元素

.fadeOut(毫秒, callback): 淡出匹配的元素

.fadeToggle(毫秒, callback): 反转匹配的元素

.fadeTo(毫秒, 透明度, callback): 调整匹配元素的透明度

: ③ 滑动

.slidingDown(毫秒, callback): 展开匹配的元素

.slidingUp(毫秒, callback): 收起匹配的元素

.slidingToggle(毫秒, callback): 反转匹配的元素

: callback 是动画完成时的回掉函数

1.监听事件

: ① 函数签名

$X.on(events,selector,data,handler(eventObject)): 为保证监听成功，在html文档加载完之后，再注册监听

: ② 参数详解

events: (string)以空格分隔的事件类型

: 事件类型可以是浏览器定义好的，也可以是自定义的

: 推荐用namespace给事件类型分类，方便分类管理（注册/取消）

: 浏览器触发标准事件 || .trigger()触发自定义事件和标准事件

selector: (string)匹配后辈元素的选择器

: 在匹配的元素（可以是动态附加的）上触发事件

: 出于性能考虑：选用的元素与后辈尽量离得近一些

data: (object)传递给handler的数据

: 在handler中，通过event.data来引用

handler(eventObject): 事件处理函数

: 事件发生时，event对象会传递到事件处理函数中

: 可以阻止事件继续冒泡：event.stopPropagation()

: 可以取消浏览器的默认行为：event.preventDefault()

: 阻止事件继续冒泡 && 取消浏览器的默认行为：return false

: 指代触发事件的DOM元素：this

2.取消监听

$X.off(): 取消对所有事件的监听

$X.off('.namespace'): 取消对namespace下所有事件的监听

$X.off('事件类型.namespace'): 取消对指定事件的监听

$X.off(events,selector,handler): 取消对指定事件的一种处理（仍然有其它处理方式）

: 程序模块化，使程序员不知道一个元素上到底监听了哪些事件，为了方便管理，最好用namespace给它们分类

3.事件对象

: ① 属性

event.target: (dom)事件传播过程中找到的目标html元素

event.currentTarget: (dom)触发事件的html元素

event.delegateTarget: (dom)监听事件的html元素

event.type: (string)事件类型

event.namespace: (string)事件的命名空间

event.data: (object)监听事件时，传过来的数据

event.metaKey: (boolean)是否在事件发生时按下了Ctrl键

event.which: (number)当前按下的鼠标或键盘上按键的编号

event.pageX, event.pageY: (number)相对于document左上角的坐标值

event.result: (object)上一个handler的返回值

: ② 方法

event.preventDefault(): 取消浏览器默认行为

event.stopPropagation(): 阻止事件继续冒泡

event.isDefaultPrevented(): (boolean)是否已经取消浏览器默认行为

event.isPropagationStopped(): (boolean)是否已经阻止事件继续冒泡

: 在事件触发的过程中，event对象作为参数被传递到handler中

4.代码触发事件

: ① 函数签名

$X.trigger(events,extraParameters): 激发事件，保留了事件传播过程和浏览器默认行为

$X.triggerHandler(events,extraParameters): 仅仅调用事件处理函数（并且限于第一个匹配的元素）

: ② 参数详解

events: (string)事件类型.namespace

extraParameters: (Array)触发事件时，传递给handler的数据

: 增加传递数据的灵活性：extraParameters用在触发时，event.data用在监听时

: javascript对象的方法，可以被当成事件触发

5.标准浏览器事件

: ① 鼠标触发

click: 单击

dblclick: 双击

mousedown: 鼠标任意键被按下

mouseup: 鼠标任意键被松开

mouseenter: 鼠标指针进入元素

mouseleave: 鼠标指针离开元素

mousemove: 鼠标指针在元素内移动

mouseenter + mouseleave: 模拟hover效果

: ② 键盘触发

keydown: 按键被按下

keyup: 按键被松开

keypress: 通过按键输入字符

: ③ 文档加载过程中触发

$( handler ): DOM加载完成后（不考虑其它资源是否加载完成）

: ④ 浏览器窗口触发

window.onload: 全部加载完成

window.onbeforeunload = function () { return '提示内容'; }: 离开页面之前（可以取消）

window.onunload: 离开页面（不能取消），卸载文档之前

window.onresize: 缩放浏览器窗口

window.onerror: js执行出错

scroll: 拖动滚动条（任何包含滚动条的容器都可触发）

: ⑤ 表单元素相关

change: value值发生了改变

focus: 获得焦点

blur: 失去焦点

focusin: 获得焦点（支持事件冒泡）

focusout: 失去焦点（支持事件冒泡）

: 除了window.事件句柄，所有的事件类型都在.on()和.trigger()中使用

1.存取数据

$.data(DOM元素, key, value): 将键值对存储到DOM元素上

$.data(DOM元素, key): 从DOM元素上取出键值对

$.removeData(DOM元素, key): 从DOM元素上移除键值对

: 以上静态方法，都有对应的实例方法$(DOM元素).data(...)

2.判断目标特征

.is(selector): 能否匹配选择器

$.isNumeric(obj): 是否为一个数字

$.isArray(obj): 是否为一个纯粹的数组(形如：'[]')

$.isPlainObject(obj): 是否为一个Plain Object(由{}或new创建)

$.isEmptyObject(obj): 是否为一个空对象(不包含任何属性)

$.isFunction(obj): 是否为一个函数

$.contains(container, contained): container是否为contained的祖先(仅限DOM元素)

$.isXMLDoc(obj): 是否为XML文件中的一个节点

: 以上工具函数，全部返回 Boolean 类型

3.处理集合

$.each(集合, function(key, value) { ... }): 遍历集合，自定义对元素的操作

$.grep(数组, function(元素, index){ ... }): 筛选集合，自定义筛选规则（返回true的）

$.inArray(元素, 数组): 定位元素，返回元素在数组中的位置

$.map(数组, function(元素, index){ ... }): 转换集合，自定义转换规则，映射出一个新数组

4.解析文本

$.parseHTML('html格式的字符串'): DOM对象，将文本解析成DOM对象

$.parseJSON('json格式的字符串'): js对象，将文本解析成js对象

$.parseXML('xml格式的字符串'): XML文档对象，将文本解析成XML文档

: 文本必须符合相应的格式，否则会出错

5.其它

$.extend(target [,obj1] [,obj2]): 将多个obj的属性合并到target上（若存在，就覆盖）

$.fn.extend(obj): 将obj的属性合并到jQuery的prototype上，为jQuery扩展属性（制作jQuery插件）

$.globalEval('js语句'): 在全局环境中执行js语句

$.now(): 获取当前时间，相当于(new Date).getTime()

$.proxy(函数, 调用对象): 改变函数的调用对象，相当于f.call()

$.trim(字符串): 改变函数的调用对象，相当于f.call()

$.trim(字符串): 字符串Trim

$.type(obj): 用jQuery自己的方式返回obj的数据类型，不同于typeof

1.Ajax全局事件

.ajaxStart(): 第一个Ajax请求开始时

.ajaxSend(): 请求发送前

.ajaxSuccess(): 请求成功

.ajaxError(): 请求失败

.ajaxComplete(): 请求完成

.ajaxStop(): 最后一个Ajax请求结束时

: 不支持跨域请求，全局事件只能绑定到 document 上

ajax全局方法说明

2.辅助方法

.serializeArray(): 表单元素 → json（将'form element'转换成js对象数组：[{ name:'', value:'' } ...]）

: 只筛选表单元素中的'successful controls'

$.param(): js对象 → QueryString（将'对象/数组'序列化成字符串，方便 QueryString/Ajax 使用）

: 在序列化的同时，进行 url 编码（不需要再考虑中文乱码的问题了）

.serialize(): 表单元素 → QueryString（封装上面两个步骤，将'表单元素'序列化成字符串，方便Ajax提交表单）

successful controls: 表单提交所包含的有效控件(不包含上传的文件、被禁用的控件、没有name属性的控件)

辅助方法示例

3.底层接口

$.ajax(options): 执行异步 Ajax 请求

$.ajaxPrefilter(): 发送 Ajax 请求前，修改Ajax options

$.ajaxSetup(): 设置 Ajax 请求的默认参数

$.ajaxTransport(): 创建一个对象，处理 Ajax 的数据传输

: 所有的Ajax请求都是通过 $.ajax() 来实现，一般使用的是简单易用的高层接口

: $.ajaxPrefilter() 和 $.ajaxTransport() 不常用，$.ajaxSetup() 在调试时很好用

Ajax Options详细说明

4.简略接口

$.get(): 用Get方式获取数据

$.getJSON(): 用Get方式获取JSON

$.getScript(): 用Get方式获取Script

$.post(): 用Post方式提交请求

$( selector ).load(): 获取数据，并替换匹配元素的innerHTML

: 它们都是 jQuery.ajax() 固定参数后的缩写

都是对$.ajax()做的封装

5.如何使用 Ajax ?

局部视图刷新: 不需要包含css、js、模板页，数据按需索取

数据逻辑验证: 发出请求后，就去做其它任务，无需等待

在当前页面展现 '进度提示': 不刷新整个页面

1.类插件

$.插件名称 = function () { //代码 }: 直接定义

$.extend { 插件名称 : function () { //代码 } }: 用方法扩展

$.命名空间 = { 插件1 : function () { //代码 }, 插件2 : function () { //代码 } }: 同时定义多个

: 插件名称就是静态方法的名字，可以包含命名空间：命名空间.插件名称

: 函数也是对象，所以第一种方式可以转化为第三种方式

2.对象插件

$.fn.插件名称 = function () { //代码 }: 直接定义

$.fn.extend { 插件名称 : function () { //代码 } }: 用方法扩展

$.fn.命名空间 = { 插件1 : function () { //代码 }, 插件2 : function () { //代码 } }: 同时定义多个

: 对象插件与类插件的定义相比，只是多了个 .fn

: 插件的目的是逻辑复用，两种插件仅是挂接的位置不同

3.开发习惯

使用闭包: 隔离外界干扰

类定义: 实现核心逻辑

插件定义: 将核心逻辑附加到jQuery上

默认值定义: 将配置参数组织到一起

data API: 按约定查找DOM读取数据，并使用插件初始化

: 类定义时：实例方法定义在prototype中，私有方法在类外直接定义

: 在插件定义时，间接使用核心类的逻辑（插件其实就是代理）

: 默认值定义将所有可配置参数罗列出来，一目了然

: 插件可以提供两种使用方式：编程方式和数据定义方式（可选）

: data API有3个插件初始化时机：DOM加载完成后、页面加载完成后、事件触发

: 使用模版，快速创建jquery插件，参考http://jqueryboilerplate.com/

开发插件的代码模版

1. id, class, tag 是Html元素本身的基本特征,使用它们来筛选是最基础的
2.“可见性”的含义：在窗口中占用了空间（不是指看得到）
3. attribute: html文本作为普通标签，所包含的无意义的文本键值对
4. property: html文本作为DOM元素，所包含的有意义的属性
5. 参考jQuery官方API文档：http://api.jquery.com/
6. W3C介绍successful controls: https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2