jquery中事件和DOM操作

在JavaScript中，常用的基础事件有鼠标事件、键盘事件、window事件、表单事件等。
事件绑定和处理函数的语法格式如下：
事件名=“函数名()”;
（1）载入事件
所谓载入事件，是window事件的一种，window事件表示当用户执行某些会影响浏览器的操作时，而触发的事件。在jQuery中，常用的window事件有文档载入事件，它对应的方法是ready().
（2）鼠标事件
鼠标事件，顾名思义就是当用户在文档上移动或单击鼠标而产生的事件。
常用的鼠标事件的方法如下：

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单机鼠标时
mouseover()	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout()	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseenter()	触发或将函数绑定到指定元素mouseenter事件	鼠标指针进入时
mouseleave()	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

Mouseenter()和mouseover()用法一样，都是鼠标指针移页面元素上时触发事件，这两个方法的区别如下：

方法	相同点	不同点
mouseover()/mouseenter()	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时：触发mouseover不触发mouseenter
mouseout()/mouseleave()	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时：触发mouseout不触发mouseleave

（3）键盘事件
键盘事件是指当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键都会产生事件。常用的键盘事件有keydown、keyup和keypress。
常用键盘事件的方法如下:

方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素keydown事件	按下键盘时
keyup()	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress()	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

（4）浏览器事件
在浏览网页时，经常会调整浏览器窗口的大小，这些操作都是通过jQuery中的resize()方法触发resize事件，进而处理相关函数来完成的一些特效。resize()语法如下:
$(selector).resize();

4.1.2 绑定事件与移除事件
（1）绑定事件
在jQuery中，如果需要为匹配的元素同时绑定一个或多个事件，则可以使用bind()方法，其语法格式如下：
bind(type,[data],fn)
bind()方法中三个参数的含义：
*type：事件类型（主要包括click、mouseover、mouseout等基础事件，还可以是自定义事件）
*[data] :可选参数（作为event.data属性值传递给事件对象的额外数据对象，该参数不是必需的）
*fn ：处理函数（用来绑定处理函数）
1）绑定单个事件
2）同时绑定多个事件
（2）移除事件
在jQuery中，提供了移除事件的方法unbind()。在绑定事件中，可以为匹配元素绑定一个或多个事件，那么同样可以为匹配的元素移除有个或多个事件。具体语法格式如下：
unbind([type],[fn])
Unbind()方法有两个参数，这两个参数不是必需的。当unbind()不带参数时，表示移除绑定的全部事件。
其中：
*[type] :事件类型（主要包括click、mouseover、mouseout等基础事件，还可以是自定义事件）
*[fn] :处理函数（用来解除绑定的处理函数）
4.1.3复合事件
（1）hover()方法
在jQuery中，hover() 用于模拟鼠标指针移入和移出事件。当鼠标指针移至元素上时，会触发指定的第一个函数（enter）；当鼠标指针移出这个元素时，会触发指定的第二个函数（leave）。其语法格式如下：
Hover(enter,leave);
（2）toggle()方法
在jQuery中，toggle()分为带参数的方法和不带参数的方法；带参数的方法用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数（fnl）;再次单击同一个元素，则触发指定的第二个函数（fn2）;
如果有更多函数，则依次触发，知道最后一个。
Toggle()方法的语法格式如下：
Toggle(fnl1,fn2,…,fnN);

4.2 使用jQuery改变页面内容呈现
4.2.1 DOM 操作
1.DOM操作分类
使用JavaScript操作DOM分为三类–DOM Core(核心)、HTML-DOM和CSS-DOM。使用jQuery操作DOM同样分为三类。
JavaScript中的getElementById()等方法都是DOM Core的组成部分。
在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。
2. jQuery中的DOM 操作
jQuery中国的DOM操作主要分为样式操作、文本和value属性值操作、节点操作，节点操作又包含属性操作、节点遍历和CSS-DOM操作。其中最主要的部分是节点操作和节点遍历。
4.2.2 样式操作
1.设置和获取样式值
回顾一下使用css()方法为指定的元素设置样式值，语法格式：

$(selector).css(name,value)   //设置单个属性
或者
$(selector).css({name:valuek,name:value,name:value...})//同时设置多个属性
获取CSS属性的值 语法格式：
$(selector).css(name)  //获取属性

2.追加样式和移除样式
（1）追加样式
除了可以使用css()方法为元素添加样式外，还可以使用addClass()方法为元素追加类样式。其语法格式：

$(selector).addClass(class)
其中，class为类样式的名称，也可以增加多个类样式，各个类样式之间用空格隔开。
（2）移除样式
在jQuery中，与addClass()方法相对应的方法是移除样式方法removeClass(),其语法格式：
$(selector).removeClass(class)
或者
$(selector).removeClass(class1 class2 ...classN)

3. 切换样式
   在jQuery中，使用toggleClass()方法可以切换不同元素的类样式，其语法格式如下：

$(selector).toggleClass(class)

其中，参数class为类样式的名称，其功能是当元素中含有名称为class的CSS类样式时，删除该类样式，否则增加一个该名称的类样式。

4. 判断是否含指定的样式
   在jQuery中，提供了hasClass()方法来判断，其语法如下：

$(selector).hasClass(class);

参数class是类名，该名称是必选的，规定在指定元素中查找的类名，返回值为布尔类型。

4.2.3 内容操作
1.HTML代码操作
在jQuery中，可以使用html()方法对HTML代码进操作，，该方法类似于传统JavaScript中的innerHTML，通常用于动态地新增页面内容。
语法格式如下：

Html([content])

其中，comtent ：可选，规定被选元素的新内容，该参数可以包含HTML标签；无标签时，表示获取被选元素 的文本内容
2. 标签内容操作
在jQuery中，可以使用text()方法获取或设置元素的文本内容，不含HTML标签。其语法格式：

text([content])

其中，content：可选，规定被选元素的新文本内容，注：特殊字符会被编码；无参数时，表示获取被选元素的文本内容。

Html()方法和text()方法的区别，如下：

语法格式	参数说明	功能描述
html()	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content参数为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text()	无参数	用于获取所有匹配元素的文本内容
text(content)	content参数为元素的文本内容	用于设置所有匹配元素的文本内容

语法格式 参数说明 功能描述
html() 无参数 用于获取第一个匹配元素的HTML内容或文本内容
html(content) content参数为元素的HTML内容 用于设置所有匹配元素的HTML内容或文本内容
text() 无参数 用于获取所有匹配元素的文本内容
text(content) content参数为元素的文本内容 用于设置所有匹配元素的文本内容
此外，还需要注意的是，html()方法仅支持（X）HTML文档，不能用于XML文档，而text()方法既支持HTML文档，也支持XML文档。
3. 属性值操作
在jQuery中，提供了获取元素value属性值的方法val().该方法多用于操作表单的元素。
语法格式如下：
val([value])
其中，value：可选。规定被选元素的新内容；无参数时，返回值为第一个被选元素的value属性的值
4.2.4 节点与属性操作
1.在jQuery中，节点操作主要分为查找、创建、插入、删除、替换和复制六中操作方式。
（1）查找节点
在jQuery中，要查找某元素，可以使用jQuery选择器。
（2）创建节点
$():该函数用于将匹配到的DOM元素转换为jQuery对象，语法格式：

$(selector)
或者
$(element)
或者
$(html)

$()的参数说明：

参数	描述
selector	选择器。使用jquery选择器匹配元素
element	DOM元素。以DOM元素来创建jquery对象
html	HTML代码。使用HTML字符串创建jquery对象

（3）插入节点
从插入方式上主要分为 两大类：内部插入节点和外部插入节点
其对应的具体方法如表：
内部插入：

语法	功能
append(content)	$(A).append(B)表示将B追加到A中
appendTo(content)	$(A).appendTo(B)表示把A追加到B中
prepend(content)	$(A).prepend(B)表示将B前置插入到A中
prependTo(content)	$(A).prependTo(B)表示将A前置插入到B中

外部插入：

语法	功能
after(content)	$(A.after(B))表示将B插入到A之后
insertAfter(content)	$(A).insertAfter(B)表示将A插入到B之后
before(content)	$(A).before(B)表示将B插入至A之前
insertBefore(content)	$(A).insertBefore(B)表示将A插入到B之前

（4）删除节点
在jQuery中，提供了remove()方法、detach()和empty()三种删除节点的方法，其中detach()的使用频率不太高，了解即可。
首先介绍remove()方法 语法格式如下：

$(selector).remove([expr])

其中参数expr为可选项，如果接收参数，则该参数为删选元素的jQuery表达式，通过该表达式获取指定元素并进行删除。

其次是empty()方法。严格意义上讲，empty()方法不是删除节点，而是清空节点，它能清空元素中的所有后代节点。其语法格式：

$(selector).empty()

（5）替换节点
在jQuery中，如果要替换某个节点，可以使用replaceWith()方法和replaceAll()方法。
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。
（6）复制节点
在jQuery中，若要对节点进行复制，可以使用clone()方法。该方法能够生成被选元素的副本，包括子节点、文本和属性。其语法格式：

$(selector).clone([includeEvents])

其中，参数includeEvents为可选值，取布尔值ture或false，规定是否复制元素的所有元素事件处理，为ture时复制事件处理，为false时不复制。

2. 属性操作
   在jQuery中。属性操作的方法有两种，即获取与设置元素属性的 attr()方法和删除元素属性的removeAttr()。
   （1）获取和设置元素属性
   在jQuery中，可以使用attr()方法来获取与设置元素属性，使用removeAttr()方法删除元素属性。
   首先介绍attr()的使用方法，其语法格式如下：

$(selector).attr([name])  //获取属性值
或者
$(selector).attr({[name1:value1],[name2:value2],...,[nameN:valueN]})  //设置多个属性值

（2）删除元素属性
用法与removeAttr()方法非常相似，其语法格式如下：

$(seletor).removeAttr(name)

其中，参数为元素属性的名称

4.2.5 节点遍历
在jQuery中 主要 提供了遍历子元素、遍历同辈元素、遍历前辈元素和一些特别的遍历方法，即children()、next()、prev()、siblings()、parent()和parents()等。

1. 遍历子元素
   在jQuery中，遍历子元素的方法只有一个，即children()方法。其语法格式如下：

$(selector).children([expr])

参数expr为可选，是用于过滤子元素的表达式
2. 遍历同辈元素
在jQuery中，提供了三种遍历同辈元素的方法，即next()、prev()和siblings()，它们分别用于获取匹配元素紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素。
遍历同辈元素的方法说明，如下：

语法	功能
next([expr])	用于获取紧邻匹配元素之后的元素$(“li:eq(1)”).next().addClass(“orange”);
prev([expr])	用于获取紧邻匹配元素之前 的 元 素$(“li:eq(1)”).prev().addClass(“orange”);
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素$(“li:eq(1)”).siblings().addClass(“orange”);

3. 遍历前辈元素
   在jQuery中，用于遍历前辈元素 的方法主要有parent()和parents()。前者用于获取当前匹配元素集合中每个匹配元素的父级元素，后者用于获取当前匹配元素集合中每个匹配元素的祖先元素，它们的语法分别是：

$(selector).parent([selector])
$(selector).parents([selector])

两者的参数都是可选的，表示被匹配元素的选择器表达式。
Parent()和parents()的参数说明：
parent():获取元素的父级元素
parents()：获取元素的祖先元素
4. 其他遍历方法
除了以上介绍的节点遍历方法外，jQuery中还有许多遍历方法，如each()、end()、find()、eq()、first()、last()等。主要 介绍each()和end()的应用。
（1）each()方法
each()规定为每个匹配元素运行的函数，语法如下所示：

$(selector).each(function(index,element))

其中，参数index表示选择器的index位置，element表示当前的元素，当返回值为false时可用于及早停止循环。
（2）end()方法
end()方法结束当前链条中最近的删选操作，并将匹配元素集还原之前的状态，语法格式如下：

.end();

CSS-DOM操作
CSS-DOM相关操作方法说明，如下表：

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	设置或返回以像素为单位的top和left坐标 仅对可见元素有效
offsetParent()	返回最近的已定位祖先元素。定位元素指的是元素的CSSposition值被设置为relative、absolute或fixed的元素
posittion()	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置活返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条项