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

运行结果:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180628A1SYC300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券