JQuery使用教程-事件/显示效果/内容操作

1.3事件

事件是指可以被控件识别的操作。例如按下确定按钮，选择某个单选按钮或者复选框。每一种控件都有自己可以识别的事件，如窗体能识别加载、单击、双击等事件，文本框能识别文本改变等事件……

jQuery事件是对JavaScript事件的封装，大体上可以分为基础事件和复合事件。

事件方法的语法格式如下：

jQuery对象.事件方法(function(){

…

});

例如：文档就绪事件

1.3.1基础事件

基础事件可以分为window事件、鼠标事件、键盘事件、表单事件等。

(1) window事件

所谓window事件，就是指当用户执行某些会影响浏览器的操作时而产生的事件。例如，第一次打开网页时的加载页面、关闭窗口、移动窗口、调节窗口大小等操作引发的事件。在jQuery中，最常用的window事件是文档就绪事件，即当页面中的DOM元素全部加载完毕时所触发的事件，该事件对应的方法是ready()。

(2)鼠标事件

鼠标事件是指当用户在文档中移动或单击鼠标时而产生的事件，常用鼠标事件的方法有：

示例：event.jsp

运行结果：

当鼠标悬浮在边框以内时：

当鼠标移出边框时：

(3)键盘事件

键盘事件是指每次按下或者释放键盘上的按键时所产生的事件，常用键盘事件的方法有：

使用键盘事件时，通常会使用event参数的keyCode属性来判断具体的按键，如下：

示例：event.jsp

通过$(document).keydown(function(event) {…});给整个文档注册了keydown事件，当按下键盘时，就会触发keydown中的function()。并且通过event.keyCode判断当按下回车键时，执行alert()方法。常见按键与keyCode的对照表如下：

字母和数字键的键码值(keyCode)

字母和数字键的键码值(keyCode)

多媒体键码值(keyCode)

(4)表单事件

表单事件是指在HTML表单内的动作所触发的事件，常用表单事件的方法如下：

示例：event.jsp

运行结果：

当鼠标光标在用户名的输入框时，背景色是黄色，如图：

当鼠标光标离开用户名的输入框时，背景色恢复为白色，如图：

1.3.2绑定事件与移除事件

如果需要为匹配的元素绑定或移除一个或多个事件，可以使用绑定事件方法bind()或移除事件方法unbind()。

(1)绑定事件

语法：

绑定一个事件：

jQuery对象.bind(type,[data],fn);

绑定多个事件：

jQuery对象.bind();

其中参数的含义如下：

绑定单个事件

以绑定click事件为例。当单击div内容时，改变div的背景色，如下：

示例：event.jsp

单击div后的运行结果：

同时绑定多个事件

还可以使用bind()方法，一次性绑定多个事件，如下：

示例：event.jsp

当鼠标悬浮在div上面时，div背景色变为黄色，如图：

当鼠标离开div后，div背景色恢复为白色，如图：

(2)移除事件

在jQuery中，可以使用unbind()方法为元素移除一个或多个事件。

语法:

jQuery对象.unbind([type],[fn]);

参数的简介如下：

当unbind()不带参数时，表示移除绑定的全部事件。

1.3.3复合事件

jQuery提供了两个复合事件方法：hover()和toggle()方法。

(1)hover()

hover()方法相当于mouseover()和mouseout()方法的组合

语法：

jQuery对象. hover(fn1,fn2);

其中，fn1相当于mouseover()，fn2相当于mouseout()。

示例：

当鼠标悬浮到id=” textId”的div时，背景色变为黄色；鼠标移出时，背景色变为白色。

(2)toggle()

语法（适用于jQuery1.9以前版本）：

jQuery对象.toggle(fn1,fn2,…,fnN);

在jQuery1.9版本以前，可以用toggle()方法模拟鼠标连续的click事件：第一次单击元素时，触发第一个事件方法fn1；第二次单击元素时，触发第二个事件方法fn2；…；当最后一个事件方法fnN被触发完后，若再次单击，就又会触发第一个事件方法fn1，如此轮番循环调用。

示例：event.jsp

当在body中连续单击鼠标时，背景色会在红、黄、蓝之间切换。

但从jQuery1.9版本开始，jQuery去掉了toggle()方法的此功能。

toggle方法还可以用来切换元素的显示与隐藏，会在后续讲解。

1.4显示效果

还可以使用jQuery来控制网页元素的显示、隐藏、改变透明度等显示效果。

1.4.1控制元素的隐藏与显示

jQuery中，控制元素隐藏与显示的方法如下：

其中speed和callback都是可选参数。

speed：元素显示或隐藏的时间（单位是毫秒；默认值是，表示会立刻显示或隐藏）。如hide(1000)，表示在1秒中内隐藏某元素；此外还可以使用show、normal、fast来控制隐藏或显示的时间，如hide(“fast”)。需要注意，如果speed使用数字来表示，是不需要引号的；但如果使用的是show等关键字，则需要加上引号。

callback：隐藏或显示后，会执行的方法（回调方法）。

示例：event.jsp

当在body中单击鼠标时，id=”textId”的div会在1秒中内切换显示或隐藏状态。

1.4.2控制元素的透明度

fadeIn()和fadeOut()可以改变元素的透明度，从而实现淡入淡出效果。

1.4.3控制元素的高度

可以使用slideUp()和slideDown()方法来控制元素的高度。

从效果上看，hide()、fadeOut()、slideUp()都可以将显示的元素隐藏；show()、slideDown()、fadeIn()都可以将隐藏的元素显示。

1.5操作DOM

jQuery对JavaScript操作DOM的方法进行了封装，使用起来也更加简便。

1.5.1样式操作

在jQuery中，可以通过以下几种方式来设置元素的样式：直接设置样式、追加样式、移除样式、切换样式。

(1)直接设置样式

jQuery使用css()方法为指定的元素直接设置样式值。

语法：

设置单个样式属性：jQuery对象.css(name,value);

同时设置多个样式属性：jQuery对象.css();

其中的参数简介如下：

示例：jQueryDemo.jsp

运行结果：

当鼠标悬浮在图片上面时：

当鼠标离开图片时：

(2)追加或移除类样式追加类样式

除了使用CSS()直接设置样式外，还可以使用addClass()为元素追加类样式。

语法：

追加一个类样式：jQuery对象.addClass(class)

同时追加多个类样式（用空格隔开）：

jQuery对象.addClass(class1class2 …classN)

示例：jQueryDemo.jsp

运行结果：

当单击

元素时，会给

元素追加.myStyle1和.myStyle2两个样式，如图

移除类样式

addClass()可以为元素追加类样式；与之相反，removeClass()可以为元素删除类样式。

语法：

移除一个类样式：jQuery对象.removeClass(class)

移除多个类样式：jQuery对象.removeClass(class1class2 … classN)

移除全部类样式：jQuery对象.removeClass()

切换类样式

toggle()方法可以切换元素的显示与隐藏状态；类似的，toggleClass()方法可以切换（增加或删除）元素的类样式。

语法：

切换（增加或删除）一个类样式：jQuery对象.toggleClass(class)

切换（增加或删除）多个类样式：jQuery对象.toggleClass(class1class2 … classN)

例如，当执行“jQuery对象.toggleClass(class)”时：如果元素中含有名为class的类样式时，就删除该样式；如果元素中不存在名为class的类样式时，就为元素加入该样式，即toggleClass()就相当于addClass()和removeClass()的轮番切换使用。

示例：jQueryDemo.jsp

当连续点击

元素的内容时，

元素就会不断的追加或移除.myStyle1和.myStyle2两个类样式。

1.5.2内容操作

jQuery还提供了对元素内容（HTML代码、文本内容、属性值）的操作方法。

(1)对HTML代码的操作

jQuery可以使用html()方法对元素的HTML代码进行操作，该方法类似于JavaScript中的innerHTML。

语法：

jQuery对象.html([content])

如果存在参数content，表示给选中的元素赋上新的内容content；如果不存在参数content，表示获取被选中的元素内容。

示例：htmlDemo.jsp

先通过html([content])给

赋值，再通过html()获取

的值，运行结果如图

(2)对文本内容的操作

jQuery还可以使用text()方法获取或设置元素的文本内容。

语法：

jQuery对象.text([content]);

如果存在参数content，表示给选中的元素赋上新的文本内容content；如果不存在参数content，表示获取被选中元素的文本内容。

示例：textDemo.jsp

运行结果：

可以发现html(content)会将内容先渲染成html/css样式，然后再赋值给元素；而text(content)只是简单的将内容以文本形式赋值给元素。html()会将渲染样式和文本内容一起返回，而text()只返回文本内容。

(3)对属性值的操作

jQuery还可以通过val()方法来获取或设置元素的value属性值。

语法：

jQuery对象.val([v])

如果存在参数v，表示将选中元素的value值设置为v；如果不存在参数v，表示获取被选中元素的value值。

示例：valDemo.jsp

运行结果：

当鼠标光标停留搜索框中时，value值为空，如图

当鼠标光标离开搜索框中时，value值为“搜索”，如图

1.5.3节点与属性操作

jQuery对节点的操作主要有两种：对节点本身的操作，以及对节点中属性的操作。

(1)节点操作

节点操作主要包括查找节点、创建节点、插入节点、删除节点、替换节点和复制节点等六种操作。

查找节点

查找节点是通过jQuery选择器实现，详见“jQuery选择器”一节。

创建节点

$()称之为工厂函数，可以用于获取节点、转化节点或创建节点：

$(选择器)：通过选择器获取节点

$(DOM节点)：把DOM节点转化成jQuery节点

$(HTML字符串)：使用HTML字符串创建jQuery节点

因此，创建jQuery节点主要是通过$(HTML字符串)实现。

示例：node.jsp

以上就创建了一个新的jQuery节点。

插入节点

$node节点创建完毕后，就可以插入到DOM文档之中。jQuery提供了多种方法实现节点的插入。

假设网页中存在如下节点：

node.jsp

运行结果：

以插入$node节点为例，插入节点的方法如下：

替换节点

在jQuery中，可以使用replaceWith()和replaceAll()方法来替换节点。

删除节点

jQuery提供了3种删除节点的方法：remove()、detach()、empty()。

复制节点

jQuery提供的clone()方法，可以对节点进行复制操作（包含复制子节点、文本和属性）。

语法：

$(A).clone([flag])

可选参数flag为布尔值true或false，为true时表示会复制节点的所有事件处理方法；false时反之。默认为false。

例如：可以使用以下代码，在

中输出A节点自身的HTML代码

(2)属性操作

jQuery主要是通过attr()和removeAttr()方法来对节点的属性进行操作。

获取或设置属性值

可以使用attr()来获取或设置属性值，如下：

删除属性值

使用removeAttr()删除属性值，如下：

示例：node.jsp

运行结果：

1.5.4获取节点集合与遍历节点集合

jQuery还提供了获取子节点集合、同辈节点集合、父节点集合，以及遍历节点集合的方法。

为了便于讲解，首先设计一个HTML页面，如下

nodeList.jsp

可知，

是

的子节点。

(1)获取子节点集合

在jQuery中，使用children()来获取子节点集合，如下

(2)获取同辈节点集合

在jQuery中，使用next()、prev()、siblings()来获取同辈节点集合，如下：

(3)获取前辈节点集合

在jQuery中，使用parent()、parents()来获取前辈节点集合，如下：

(4)过滤与遍历节点集合过滤节点集合

如果已经获取了一组节点集合，还可以使用filter(选择器)对其进行过滤。如，$('li').filter(':even')表示过滤出所有索引为偶数的

节点。

遍历节点集合

如果已经获取了一组节点集合，还可以使用each()方法对该集合进行遍历，如下：

示例：nodeList.jsp

运行结果：