jQuery学习笔记（三）

jQuery中的DOM操作

DOM操作分为3个方面，即DOM Core、HTML-DOM、CSS-HTML

（1）DOM Core

DOM Core并不专属于JS，任何一种支持DOM的程序设计语言都可以使用它。

JS中的getElementById()、getElementByTagName()、getAttribute()、setAttribute()等方法，都是DOM的组成部分。

（2）HTML-DOM

HTML-DOM提供了一些简明的记号来描述各种HTML元素的属性。

如

document.forms

element.src

（3）CSS-DOM

CSS-DOM主要用于获取和设置style对象的各种属性。

如：

element.style.color = "red"

jQuery中的事件

1、加载DOM

页面加载完毕之后，浏览器会通过JavaScript为DOM元素添加事件。在常规的JS中，通常使用wind.onload方法；在jQuery中。使用的是$(document).ready()方法。

通过该方法，就可以在DOM载入就绪时就对其进行操作兵调用执行它所绑定的函数。

window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行；

而$(document).ready方法在DOM完全就绪时就可以被调用。

2、事件绑定

如果要为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind方法的调用格式：

bind( type [,data] , fn)

第一个参数是事件类型，包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象

第三个参数是用来绑定的处理函数

3、合成事件

jQuery有两个合成事件——hover()方法、toggle()方法

（1）hover方法

语法：hover(enter, leave)

用于模拟光标悬停事件，方光标移动到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发指定的第二个函数。

（2）toggle()方法

语法：toggle(fn1, fn2, ... fnN)

用于模拟鼠标连续单击事件，第一次单击元素，触发指定的第一个函数；再一次单击同一元素时，则触发指定的第二个函数；依次触发。

4、事件冒泡

事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

解决方案：

（1）使用事件对象，只要为函数添加一个参数即可，如$("element").bind("click", function( event ))

这样，当单击element元素时，事件对象就被创建了。这个事件对象只有处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。

（2）停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。jQuery提供stopPropagation()方法来停止事件冒泡。

（3）阻止默认行为。jQuery中提供了prevenDefault()方法来阻止元素的默认行为。可以将event.preventDefault()或event.stopPropagation()改为return false

（4）事件捕获。从最顶端往下开始触发。

5、事件对象的属性

jQuery对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。

（1）event.type——获取事件的类型

（2）event.preventDefault()——阻止默认的事件行为。
（3）event.stopPropagation()——阻止事件的冒泡

（4）event.target——胡群殴触发事件的元素

（5）event.relatedTarget——mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget来访问的。

（6）event.pageX、event.pageY——获取到光标想归于页面的x坐标和y坐标。

（7）event.which——在鼠标单击事件中获取到鼠标的左、中、右键。

（8）event.metaKey

6、移除事件

unbind([type], [data])

one()方法，可以为元素绑定处理函数。当处理函数触发一次后，立即被删除。

7、模拟操作

（1）常用模拟

trigger()方法

（2）传递数据

trigger(type, [data])

第一个参数是要触发的事件类型；

第二个参数是要传递给事件处理函数的附加数据。