jQuery API学习之DOM操作与事件篇

DOM属性操作：

名称	描述
.addClass()	为每个匹配的元素添加指定的样式类名
.hasClass()	确定任何一个匹配元素是否有被分配给定的类
.attr()	获取或设置属性的值。可以有一个或两个参数，，返回集合中的第一个，两个参数代表设置属性值（第一个 属性名称 第二个是属性值），设置集合中的全部
.prop()	获取匹配的元素集中第一个元素的属性值为匹配的元素设置一个或多个属性，设置集合中的全部
.removeAttr()	移除指定属性
.removeClass()	从所有匹配的元素中删除全部或者指定的类。
.removeProp()	为集合中匹配元素删除一个属性
.toggleClass()	在匹配元素集合中的每个元素上添加或删除一个或多个样式类
.val()	设置或返回匹配元素的值。

attr()与prop()的区别：

.attr()	.prop()
已有或自定义的属性都可以获取到	获取到已有的默认的属性，自定义的获取不到

DOM操作：

获取或设置文本内容：

名称	描述
.text()	设置或获取所选元素的文本内容
.html()	设置或获取匹配的元素集合中的 HTML 内容。

text()与html()区别：

操作	text()	html()
设置文本时	text()不会区别html代码，会把里面的内容全部识别为文本内容。设置集合中的全部	html()方法会自动识别里面是文本内容还是html代码。设置集合中的全部
获取文本时	获取的是纯文本内容，并且获取匹配集合中的所有匹配元素的文本内容	文本和html代码都会获取到，并且获取匹配集合中的第一个html内容

添加并包裹现有内容:

名称 | 描述
---|---|---
.wrap(wrappingElement) | 在每个匹配==元素外层==包上一个html元素。
.unwrap() | 将匹配元素集合的父级元素删除，保留自身在原来的位置上。只能删掉紧挨的父级元素。没有参数 (unwrap()不会移除body元素)。
.wrapAll(wrappingElement) | 在所有匹配元素外面包一层html结构
.wrapInner(wrappingElement) | 在==匹配元素里的内容==外包一层结构

添加到现有的元素内：

名称	描述	注释
.append()	在每个匹配元素里面的==末尾==处插入参数内容	append 附加
.appendTo()	将匹配的元素插入到目标元素的最后面
.prepend()	将参数内容插入到每个匹配元素的==前面==（元素内部）	prepend 前缀
.prependTo()	将所有元素插入到目标前面（元素内）

添加到现有的元素外：

名称	注释
.after()	在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
.before()	根据参数设定，在匹配元素的前面插入内容
.insertAfter()	在目标元素后面插入集合中每个匹配的元素（注：插入的元素作为目标元素的兄弟元素）
.inserBefore()	在目标元素前面插入集合中每个匹配的元素

复制元素：

名称	描述
clone()	生成被选元素的副本，包含子节点、文本和属性(只是拷贝，不会移动) 元素包含的事件
clone(true)	生成被选元素的副本，包含子节点、文本和属性,含有此元素包含的事件

DOM移除：

名称	描述
.detach()	从DOM中去掉所有匹配的元素（不会移除元素上的事件及JQuery数据）
.empty()	从DOM中移除集合中匹配元素的所有子节点
.remove()	将匹配元素集合从DOM中删除 （同时移除元素上的事件及JQuery数据）
.unwrap()	将匹配元素集合的父级元素删除，保留自身在原来的位置上。只能删掉紧挨的父级元素。

DOM替换：

名称	描述
A.replaceAll(B)	用集合的匹配元素替换每个目标元素 用A替换B中所有节点
A.repalceWith(B)	用提供的内容替换集合中所有匹配的元素 用B替换A

---

jQuery 事件：

浏览器事件：

名称	描述
.error（）	当元素遇到错误（没有正确载入）时，发生 error 事件。error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数
.resize（）	当调整浏览器窗口的大小时，发生 resize 事件。resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。
.scroll（）	当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数

文档加载：

名称	描述
.load（）	当指定的元素（及子元素）已加载时，会发生 load() 事件。该事件适用于任何带有 URL的元素（比如图像、脚本、框架、内联框架）。根据不同的浏览器（Firefox 和IE），如果图像已被缓存，则也许不会触发 load 事件。
.ready（）	当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档，因此无需选择器。
.unload（）	当用户离开页面时，会发生 unload 事件。具体来说，当发生以下情况时，会发出 unload 事件：1点击某个离开页面的链接。2.在地址栏中键入了新的 URL。3.使用前进或后退按钮。4.关闭浏览器。5.重新加载页面unload() 方法将事件处理程序绑定到 unload 事件。unload() 方法只应用于 window 对象。

表单事件：

名称	描述
.blur（）	当元素失去焦点时发生 blur 事件。blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。
.focus（）	当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。
.change（）	当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。
.focusin（）	focusin 事件会在元素（或者其内部的任何元素）获得焦点时触发。这跟 focus 事件的显著区别在于，它可以在父元素上检测子元素获得焦点的情况
.focusout（）	focusout 事件会在元素（或者其内部的任何元素）失去焦点时触发。这跟 blur 事件的显著区别在于，它可以在父元素上检测子元素失去焦点的情况
.select（）	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。select() 方法触发 select 事件，或规定当发生 select 事件时运行的函数。
.submit（）	当提交表单时，会发生 submit 事件。该事件只适用于表单元素。submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

键盘事件：

名称	描述
.keydown（）	当按钮被按下时，发生 keydown 事件。keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。
.keypress（）	keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。
.keyup（）	当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。

鼠标事件：

名称	描述
.click（）	触发、或将函数绑定到指定元素的 click 事件
.dblclick（）	触发、或将函数绑定到指定元素的 double click 事件
.hover（）	将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。
.mousedown（）	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数。
.mouseenter（）	当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与 mouseleave 事件一起使用。mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。
.mouseleave（）	当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与 mouseenter 事件一起使用。mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。
.mousemove（）	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove() 方法触发 mousemove 事件，或规定当发生 mousemove 事件时运行的函数。
.mouseout（）	当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。
.mouseover（）	当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。
.mouseup（）	当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数。

---

相关链接：

DOM操作demo以及资料访问地址：vss上面 \99.Study\DOM operation.rar
事件demo以及资料访问地址：vss上面 \99.Study\event.rar