JQuery中Bind()事件用法分析

admin · 发表于 2019-9-13 23:46:11

篇一：jQuery 事件与应用

目录：

一、事件机制

二、页面载入事件

2.1、ready()方法的工作原理

2.2、ready()方法的几种相同写法

三、绑定事件

四、切换事件

4.1、hover()方法

4.2、toggle()方法

五、移除事件

六、其他事件

6.1、方法one()

6.2、方法trigger()

七、表单应用

7.1、文本框中的事件应用

7.2、下拉列表框中的事件应用

八、列表应用

九、网页选项卡的应用

十、综合案例分析——删除数据时的提示效果在项目中的应用

一、事件机制

众所周知，页面在加载时，会触发Load事件。当用户单击某个按钮时，触发该按钮的Click事件，通过种种事件实现各种功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用。那么，事件被出发后是如何执行代码的呢？

严格来说，事件在触发后被分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）；但有些遗憾的是，大多数浏览器并不是都支持捕获阶段，jQuery也不支持。因此在事件触发后，往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。

二、页面载入事件

2.1、ready()方法的工作原理

jQuery中的页面载入事件ready()方法，类似于传统JavaScript中的OnLoad()方法，只不过在事件执行时间上有区别：OnLoad()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发，在这种情况下，如果页面中的图片过多或图片过大，那么有可能要等OnLoad()方法执行完毕，用户才能进行其他的操作；如果使用jQuery中的ready()方法加载页面，则只要页面中的DOM模型加载完毕，就会触发ready()方法。因此，两者在事件的执行效果上ready()方法明显优于JavaScript中的OnLoad()方法。

我们剖析一下jQuery()中的ready()方法的工作原理：在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度，当然遇到执行ready()方法时，通过查看isReady值是否被设置，如果

未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。

2.2、ready()方法的几种相同写法

写法一：

$(document).ready(function() {

//代码部分

})

写法二：

$(function() {

//代码部分

})

写法三：

jQuery(document).ready(function() {

//代码部分

})

写法四：

jQuery(function() {

//代码部分

})

其中写法二简单明了，使用较为广泛。

三、绑定事件

我们可以使用如下的代码绑定按钮的单击事件：

$(function() {

$("#btnShow").click(function() {

//执行代码

})

})

除了上述绑定事件的写法外，在jQuery中，还可以使用bind()方法进行事件的绑定。下面对该方法进行详细的介绍。

bind()功能是为每个选择元素的事件绑定处理函数，其语法格式如下：

bind(type, [data], fn)

其中，参数type为一个或多个类型的字符串，如“click”或“change”，也可以自定义类型；可以被参数type调用的类型包括blur、focus、load、resize、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error。

参数data是作为event.data属性值传递给事件对象的额外数据对象。

参数fn是绑定到每个选择元素的事件中的处理函数。

如果要在一个元素中绑定多个事件，可以将事件用空格隔开。

四、切换事件

在jQuery中，有两个方法用于事件的切换，一个是方法hover()，另一个是方法toggle()。所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。如一个超链接标记<a>，若想实现当鼠标悬停时触发一个事件，鼠标移出时又触发另一个事件，就可以调用jQuery中的hover()方法轻松实现。

4.1、hover()方法

调用jQuery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换，该方法在实际运用中，也可以通过jQuery中的事件mouseenter与mouseleave进行替换。

hover()功能是当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个函数，其语法格式如下：

hover(over, out)

参数over为鼠标移到元素时触发的函数，参数out为鼠标移出元素时触发的函数。

示例用hover方法绑定事件

#========================================================================

#FileName: demo12.html

# Author: lowkey

#Email: 361789273@qq.com

#HomePage: http://blog.csdn.net/Iamduoluo

# LastChange: 2012-04-11 14:04:39

#========================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

#HomePage: http://blog.csdn.net/Iamduoluo

# LastChange: 2012-04-11 14:07:49

#========================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>切换事件toggle</title>

<script src="../jquery.js" type="text/javascript"

charset="utf-8"></script>

<style type="text/css">

body { font-size:13px;}

img { border:1px solid #ccc; padding:3px;}

</style>

<script type="text/javascript" charset="utf-8">

$(function() {

$("img").toggle(function() {

$("img").attr("src", "logo.jpg");

$("img").attr("title", $("img").src);}, function() {

$("img").attr("src", "logo1.jpg");

$("img").attr("title", $("img").src);}, function() {

$("img").attr("src", "logo2.jpg")

$("img").attr("title", $("img").src);})

})

</script>

</head>

<body>

<img src="#" alt="">

</body>

</html>

五、移除事件

在DOM对象的实践操作中，既然存在用于绑定事件的bind方法，也相应存在用于移除绑定事件的方法，在jQuery中，可以通过unbind()方法移除绑定的所有事件或指定的某一个事件。

unbind()的功能是移除元素绑定的事件，其调用的语法格式如下：

unbind([type], [fn])

篇二：jquery试题与答案

一、Jquery测试题

1下面哪种不是jquery的选择器？(单选)

A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器

考点:jquery的选择器 (C)

2当DOM加载完成后要执行的函数，下面哪个是正确的？(单选)

jQuery(expression, [context]) B、jQuery(html, [ownerDocument]) C、jQuery(callback) D、jQuery(elements)

考点：jquery的核心函数 (C)

3下面哪一个是用来追加到指定元素的末尾的？(单选)

A、insertAfter() B、append() C、appendTo() D、after()

考点：jquery的核心函数 (C)

4下面哪一个不是jquery对象访问的方法？(单选)

A、each(callback) B、size() C、index(subject) D、index()

考点： jquery的核心函数之对象访问（D）

5．jquery访问对象中的size()方法的返回值和jQuery对象的_______属性一样.

考点：jquery的核心函数之对象访问（length）

6.jquery中$(this).get(0)的写法和__________是等价的。

考点：jquery的核心函数之对象访问（$(this)[0]）

7. 有这样一个表单元素

，想要找到这个hidden元素，下面哪个是正确的？(单选)

A、visible B、hidden C、visible() D、hidden()

考点：jquery的选择器（B）

8.如果需要匹配包含文本的元素，用下面哪种来实现？(单选)

A、text() B、contains() C、input() D、attr(name)

考点：jquery的选择器（B）

9.现有一个表格，如果想要匹配所有行数为偶数的，用________实现，奇数的用_______实现。

考点：jquery的选择器（even,odd）

10.如果想要找到一个表格的指定行数的元素，用下面哪个方法可以快速找到指定元素？(单选)

A、text() B、get() C、eq() D、contents（）

考点：jquery的选择器（C）

11.在一个表单里，想要找到指定元素的第一个元素用_________实现，那么第二个元素用_________实现。

考点：jquery的选择器（first,eq(1)）

12.下面哪种不属于jquery的筛选？（单选）

A、过滤 B、自动 C、查找 D、串联

考点：jquery的筛选 (B)

13.下面哪几种是属于jquery文档处理的？（多选）

A、包裹 B、替换 C、删除 D、内部和外部插入

考点：jquery的文档处理 (ABD)

14.如果想在一个指定的元素后添加内容，下面哪个是实现该功能的？（单选）

A、append(content) B、appendTo(content) C、insertAfter(content) D、after(content) 考点：jquery的文档处理 (D)

15.在jquery中，用一个表达式来检查当前选择的元素集合，使用______来实现，如果这个表达式失效，则返回___________值。

考点：jquery的筛选（is(expr),false）

16.在jquey中，如果想要从DOM中删除所有匹配的元素，下面哪一个是正确的？（单选）

A、delete() B、empty() C、remove() D、removeAll()

考点：jquery的文档处理（C）

17.在jquery中，想要给第一个指定的元素添加样式，下面哪一个是正确的？（单选）

A、first B、eq(1) C、css(name) D、css(name,value)

考点： jquery的css处理（C）

18.在编写页面的时候，如果想要获取指定元素在当前窗口的相对偏移，用_________来实现，该方法的返回值有两个属性，分别是________和__________。

考点：jquery的css处理（offset,top,left）

19.在jquery中，如果想要获取当前窗口的宽度值，下面哪个是实现该功能的？（单选）

A、width() B、width(val) C、width D、innerWidth()

考点：jquery的css处理（A）

20.在一个表单中，如果将所有的div元素都设置为绿色，实现功能是____________________________。

考点：jquery的css处理 ($(“div”).css(“color”,”green”))

21.为每一个指定元素的指定事件（像click）绑定一个事件处理器函数，下面哪个是用来实现该功能的？（单选）

A、trigger (type) B、bind(type) C、one(type) D、bind

考点：jquery的事件操作 (B)

22．在jquery中，鼠标移动到一个指定的元素上，会触发指定的一个方法，实现该操作的是______________。

考点：jquery的事件操作 (hover(over,out))

23.下面哪几个不是属于jquery的事件处理? (多选)

A、bind(type) B、click() C、change() D、one(type)

考点：jquery的事件处理 (BC)

24.在一个表单中，如果想要给输入框添加一个输入验证，可以用下面的哪个事件实现？ (单选)

A、hover(over ,out) B、keypress（fn） C、change() D、change(fn)

考点：jquery的事件处理 (D)

25.当一个文本框中的内容被选中时，想要执行指定的方法时，可以使用下面哪个事件来实现？（单选）

A、click(fn) B、change(fn) C、select(fn) D、bind(fn)

考点：jquery的事件处理 (C)

26.在jquery中，想让一个元素隐藏，用________实现，显示隐藏的元素用_________实现。考点：jquery的页面效果（hide(),show()）

27.在一个表单中，用600毫秒缓慢的将段落滑上，用__________________________________来实现。

考点：jquery的页面效果（$(“p”).slideUp(“slow”)）

28.在jquery中，如果想要自定义一个动画，用___________________________函数来实现。考点：jquery的页面效果 (animate(params, options))

29.在jquery中想要实现通过远程http get请求载入信息功能的是下面的哪一下事件？ (单选)

A、$.ajax() B、load(url) C、$.get(url) D、$. getScript(url)

考点：jquery的ajax (C)

30.下面不属于ajax事件的是？ (单选)

A、ajaxComplete(callback) B、ajaxSuccess(callback) C、$.post(url) D、ajaxSend(callback) 考点：jquery的ajax （C）

31.彻底将jQuery变量还原，可以使用___________________方法实现。

考点：jquery的多库共存 ($.noConflict(extreme))

32.在一个表单中，查找所有选中的input元素，可以用jquery中的____________________来实现。

考点：jquery的选择器（:not()）

33.下面哪几种是jquery中表单的对象属性？（多选）

A、:checked B、: enabled C、:hidden D、:selected E、:file F、: disabled

考点：jquery的选择器（ABDF）

34.在jquery中如果将一个“名/值”形式的对象设置为所有指定元素的属性，可以用________________实现。

考点：jquery选择器之属性（attr(pro)）

35.在jquery中指定一个类，如果存在就执行删除功能，如果不存在就执行添加功能，下面哪一个是可以直接完成该功能的？（单选）

A、removeClass() B、deleteClass() C、toggleClass(class) D、addClass()

考点：jquery的属性（C）

36.在jquery中想要找到所有元素的同辈元素，下面哪一个是可以实现的？（单选）

A、eq(index) B、find(expr) C、siblings([expr]) D、next()

考点：jquery的筛选（C）

篇三：实验三 jQuery事件处理

实验三 jQuery事件处理

【实验目的】

1、掌握jQuery的事件处理机制；

2、掌握jQuery的事件处理、委派、切换的常用方法； 3、掌握jQuery事件处理的常用事件。【实验准备】

1、复习教材相关内容； 2、预习本次实验；

【实验内容】

1、实现类似京东商城的商品展示效果。当鼠标移入某一个图片时，图片模糊，鼠标移出时恢复。效果如图3-1所示。

图3-1

代码如下：

photo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/retype/zoom/b0334d7c011ca300a6c39013?pn=3&x=0&y=0&raww=321&rawh=158&o=png_6_0_0_240_216_412_204_892.979_1262.879&type=pic&aimh=158&md5sum=8c35738dd8cffeb22a458bf2ec51b9aa&sign=89d9164497&zoom=&png=55932-57465&jpg=0-0" target="_blank">点此查看

图3-2

代码如下：

table.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/retype/zoom/b0334d7c011ca300a6c39013?pn=4&x=0&y=0&raww=445&rawh=151&o=png_6_0_0_236_750_420_142_892.979_1262.879&type=pic&aimh=151&md5sum=8c35738dd8cffeb22a458bf2ec51b9aa&sign=89d9164497&zoom=&png=57466-58150&jpg=0-0" target="_blank">点此查看

代码如下：

menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>第三题</title><style type="text/css"> .mainmenu {

float:left;width:200px; list-style-type:none; margin-right:5px;} li.mainmenu ul { margin:0;}

a { width:200px; display:block; text-decoration:none; background:#00f; color:#fff; padding:0.5em; border-bottom:1px solid #fff;}

ul#dropdownmenu li a:hover{ background:#000;} li{ list-style-image:none; }</style>

<script type="text/javascript" src="js/jquery-1.4.2.js"></script><script type="text/javascript">

$(document).ready(function() { $(".mainmenu ul").hide();

$(".mainmenu ").bind("mouseenter mouseleave", function() {

$("ul", this).toggle(); }); });</script> </head> <body>

<ul id="dropdownmenu"> <li class="mainmenu"> <a href="">Books</a> <ul>

<li><a href="">web development</a></li><li><a href="">Programming</a></li><li><a href="">RDBMS</a></li> </ul> </li>

<li class="mainmenu">

<a href="">Movies</a> <ul>

<li><a href="">Latest Movie Trailers</a></li><li><a href="">Movie Reviews</a></li><li><a href="">Celebrity Interviews</a></li> </ul> </li>

《JQuery中Bind()事件用法分析》出自：百味书屋
链接地址：http://www.850500.com/news/69703.html
转载请保留,谢谢!

		自动登录	找回密码
密码			立即注册