一 什么是jQuery
-
定义： jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。jQuery API 中文文档
-
核心： 接收一个选择器，根据选择器得到一些元素，然后返回一个API对象，对象上有操作元素的方法(链式操作基于返回API对象)。
-
jQuery算构造函数，但又不是严格意义上的构造函数，因为他不用new即可构造对象。
二 jQuery的设计模式
- 不用new的构造函数
- 重载：$(可以支持多种参数)，对传入的参数做一个判断，不同的参数不同的操作
- 用闭包隐藏细节，也就是函数内访问函数外的变量
- $div.text()即可读也可写，getter/setter
- 别名：
$.fn是$.prototype的别名 - 适配器：jQuery针对不同的浏览器使用不同的代码
三 用jQuery风格(链式风格)重新封装DOM
四 jQuery的Dom操作
- class 属性
.addClass()
//为每个匹配的元素添加指定的样式类名。
.hasClass()
//确定任何一个匹配元素是否有被分配给定的（样式）类。
.removeClass()
//移除集合中每个匹配元素上一个，多个或全部样式。
.toggleClass()
//在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
- 复制元素
.clone()
//创建一个匹配的元素集合的深度拷贝副本。
- 将插入的新内容包裹现有内容
.unwrap()
//将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
.wrap()
//在每个匹配的元素外层包上一个html元素。
.wrapAll()
//在所有匹配元素外面包一层HTML结构。
.wrapInner()
//在匹配元素里的内容外包一层结构。
- DOM 插入现有元素内
append()
//在每个匹配元素里面的末尾处插入参数内容。
.appendTo()
//将匹配的元素插入到目标元素的最后面（译者注：内部插入）。
.html()
//获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。
.prepend()
//将参数内容插入到每个匹配元素的前面（元素内部）。
.prependTo()
//将所有元素插入到目标前面（元素内）。
.text()
//得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。
- DOM移除
.detach()
//从DOM中去掉所有匹配的元素。
.empty()
//从DOM中移除集合中匹配元素的所有子节点。
.remove()
//将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）
.unwrap()
//将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置
- DOM替换
.replaceAll()
//用集合的匹配元素替换每个目标元素。
.replaceWith()
//用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
- 通用属性操作
.attr()
//获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。
.prop()
//获取匹配的元素集中第一个元素的属性（property）值为匹配的元素设置一个或多个属性（properties）。
.removeAttr()
//为匹配的元素集合中的每个元素中移除一个属性（attribute）。
.removeProp()
//为集合中匹配的元素删除一个属性（property）。
.val()
//获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。
- 通用属性操作
.attr()
//获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。
.prop()
//获取匹配的元素集中第一个元素的属性值为匹配的元素设置一个或多个属性。
.removeAttr()
//为匹配的元素集合中的每个元素中移除一个属性。
.removeProp()
//为集合中匹配的元素删除一个属性。
.val()
//获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。
- CSS 属性
.css()
//获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性。
.height()
//获取匹配元素集合中的第一个元素的当前计算高度值。
.innerHeight()
//为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
.innerWidth()
//为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。
.offset()
//在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。 设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。
.outerHeight()
//获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。
.outerWidth()
//获取元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。（注：返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。）
.position()
//获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 )
.scrollLeft()
//获取匹配的元素集合中第一个元素的当前水平滚动条的位置。设置每个匹配元素的水平滚动条位置。
.scrollTop()
//获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。设置每个匹配元素的垂直滚动条位置
.width()
//为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度。