jQuery整理笔记5----jQuery大事

一、大事

1、载入中DOM

$(document).ready() 这个第一节里具体介绍了

2、事件绑定

jQuery定义了bind()方法作为统一的接口。用来为每个匹配元素绑定事件处理程序。其基本的语法：bind(type,[data],fn);

当中參数type表示事件类型，參数data是可选參数,它能够作为event.data属性值传递给事件对象的额外数据对象。參数fn表示事件处理函数。

比例如以下例中为p元素绑定单击事件，当点击不同段落文本的时候会提示不同段落文本的内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> toggle() </title>

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

  <script type="text/javascript">

  <!--

		$(function(){

			$("input[type='button']").one("click",function(){

				$(this).val('15210221200');

			})

		})

  //-->

  </script>

 </head>

 <body>

	<input type="button" value="查看联系方式" onclick="">

 </body>

</html>

假设希望向事件处理函数中传递很多其它的信息时，则能够把这些信息封装在一个对象结构中，然后把这个对象作为bind()方法的第二个參数。从而实现数据外与数据内进行数据通信。

比如在上面的演示样例基础上向其传递两个值A和B：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

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

  <script type="text/javascript">

  <!--

		$(function(){

			$("p").bind("click",{a:"A",b:"B"},function(event){

				$(this).text(event.data.a+event.data.b);

			})

		})

  //-->

  </script>

 </head>

 <body>

	<p>段落1</p>

	<p>段落2</p>

	<p>段落3</p>

 </body>

</html>

我们能够将绑定事件简写成 $("p").click(function(){})

使用one()绑定事件

one() 是bind()的一个特例，由它绑定的事件在运行一次响应之后就失效。

看个样例吧：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> toggle() </title>

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

  <script type="text/javascript">

  <!--

		$(function(){

			$("input[type='button']").one("click",function(){

				alert($(this).val());

			})

		})

  //-->

  </script>

 </head>

 <body>

	<input type="button" value="one绑定測试" onclick="">

 </body>

</html>

也就是说one()方法绑定的事件运行一次之后就注销了，可是实际开发中有些场景下某些事件须要在特定情况下注销，而不是触发一次就注销。

对此，jQuery定义了专门注销事件的方法

各种事件
blur()	focus()	mousedown()	resize()
change()	keydown()	mousemove()	scroll()
click()	keypress()	mouseout()	select()
dblclick()	keyup()	mouseover()	submit()
error()	load()	mouseup()	unload()

3、注销事件

unbind()，该方法与bind()是相应的，可以从一个匹配元素中删除全部绑定的事件或者是删除指定的绑定事件。

假设没有指定參数，那就删除全部。

參数：

第一个參数是事件类型

第二个參数是要移除的函数

假设没有參数。则删除全部绑定的事件，假设提供了事件类型作为參数，那么仅仅删除该类型的绑定事件

应该不算经常使用吧。

4、合成事件

jQuery有两个合成事件----hover()和toggle(),这两个方法都是jQuery自己定义的方法

(1)、hover()方法

语法结构为 hover(enter,leave)

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

这个函数非常好理解。并且实际开发中会有非常多妙用。

举个最简单的样例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> hover() </title>

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

  <script type="text/javascript">

  <!--

		$(function(){

			$("span").hover(

				function(){

					$("span").text("光标在我身上");

				},

				function(){

					$("span").text("光标跑了~~")

				}

			)

		})

  //-->

  </script>

 </head>

 <body>

	<span >三国杀杀天下</span>

 </body>

</html>

(2)、toggle()方法

语法结构 toggle(fn1,fn2,fn3...fnN)

toggle()方法用于模拟鼠标连续单击事件。第一次单击事件触发指定的第一个函数。第二次就触发第二个函数.... 假设有很多其它的函数则依次触发，直到最后一个。随后的每次单击都是对这几个函数的轮番调用。

看到这种方法第一想到的是toggleClass() 用于给元素对象切换样式。

toggle方法也是挺好理解的，曾经项目中倒是没有应用过。

举个样例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> unbind() </title>

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

  <script type="text/javascript">

  <!--

		$(function(){

			$("input").toggle(

				function(){$("ul").append($("<li><h2>左  慈</h2></li>"))},

				function(){$("ul").append($("<li><h2>曹  冲</h2></li>"))},

				function(){$("ul").append($("<li><h2>神周瑜</h2></li>"))},

				function(){$("ul").append($("<li><h2>神曹操</h2></li>"))},

				function(){$("ul").append($("<li><h2>孙尚香</h2></li>"))},

				function(){$("ul").append($("<li><h2>神关羽</h2></li>"));$(this).unbind()}

			)

		})

  //-->

  </script>

 </head>

 <body>

	<h1>三国杀变态武将</h1>

	<div >

		<ul>

		</ul>

	</div>

	<input type="button" value="连续点击按钮可切换事件" >

 </body>

</html>

注意：在上例中引用的jquery库不是曾经经常使用的jquery-2.1.0.min.js了，是由于在jquery1.9版本号中将toggle()的切换功能去掉了,如今toggle这个功能仅仅能控制元素的显隐。

6、自己定义事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> 自己定义事件 </title>

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

  <script type="text/javascript">

  <!--

		$(function(){

			$("input").bind("delay",function(event){

				setTimeout(function(){	//延迟运行

					alert(event.type);

				},2000)

			});

			$("input").click(function(){

				$("input").trigger("delay");

			})

		})

  //-->

  </script>

 </head>

 <body>

	<input type="button" value="jQuery自己定义事件" >

 </body>

</html>

6、事件对象的属性

jQuery的Event对象的属性和方法
属性/方法	说明
type	获取事件的类型，如click、mouseover等，返回值为事件类型的名称。
target	发生事件的节点。一般利用该属性来获取当前被激活事件的详细对象。
relatedTarget	引用与事件的目标节点相关的节点。对于mouseover事件来说，他是鼠标指针移到某目标上时所离开的那个节点；对于mouseout来说就是离开目标时鼠标指针要进入到的那个目标
altKey	表示在声明鼠标事件的时候是否按下了【alt】键。假设返回值为true，则表示按下
ctrlKey	表示在声明鼠标事件的时候是否按下了【ctrl】键。假设返回值为true，则表示按下
shiftKey	表示在声明鼠标事件的时候是否按下了【shift】键。假设返回值为true，则表示按下
metaKey	表示在声明鼠标事件的时候是否按下了【meta】键。假设返回值为true，则表示按下
which	当在声明mousedown、mouseup时，显示鼠标键的状态值。也就是说哪个鼠标键改变了它的状态，返回值为1。表示按下左键，返回值为2，表示按下中键，返回值为3。表示按下右键
which	当在声明keydown和keypress事件时，显示触发事件的键盘键的数字编码
pageX	对于鼠标事件来说,指定鼠标指针相对于页面原点的水平坐标
pageY	对于鼠标事件来说,指定鼠标指针相对于页面原点的垂直坐标
screenX	对于鼠标事件来说,指定鼠标指针相对于屏幕原点的水平坐标
screenY	对于鼠标事件来说,指定鼠标指针相对于屏幕原点的垂直坐标
data	存储事件处理函数第二个參数所传递的额外数据
preventDefault()	取消可能引起不论什么语义操作的事件，如元素特定事件类型的默认操作，比如取消submit默认的表单提交操作
stopPropagation()	防止事件沿着DOM树向上传播，能够防止事件冒泡的发生

7、事件冒泡

(1)、什么是事件冒泡

如果网页上有两个元素。当中一个元素嵌套在还有一个元素里，而且都绑定了click事件。

同事body元素也绑定了click事件。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> 事件冒泡 </title>

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

  <script type="text/javascript">

  <!--

		$(function(){

			//为input元素绑定click事件

			$('input').click(function(){

				var txt=$('#msg').html()+"<p>div内的button被点击.</p>";

				$('#msg').html(txt);

			})

			//为第一个div绑定click事件

			$('div').eq(0).click(function(){

				var txt=$('#msg').html()+"<p>div作用范围发生点击.</p>";

				$('#msg').html(txt);

			})

			//为body元素绑定click事件

			$('body').click(function(){

				var txt=$('#msg').html()+"<p>body元素被单击.</p>";

				$('#msg').html(txt);

			})

		})

  //-->

  </script>

 </head>

 <body >

	<h3>div作用范围外</h3>

	<div id="" class="">

		<h3>div作用范围内</h3>

		<input type="button" value="div内的一个button" onclick="">

		<h3>div作用范围内</h3>

	</div>

	<h3>div作用范围外</h3>

	<div id="msg" class="">

	</div>

 </body>

</html>

以下几个图各自是初始页面、点击button、点击非button的div作用范围、点击div作用范围外的效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

之所以称为冒泡，就是由于事件像气泡一样不断向上直到顶部。

(2)、事件冒泡引发的问题：

就像上面那个样例，我们单击了div内button，仅仅想触发button的单击事件，可是实际结果在我们的预料之外。所以我们必须限定事件的作用范围。

为了解决问题，有两个个办法：

A、通过事件对象(event)的stopPropagation()方法

	//为input元素绑定click事件

	$('input').click(function(event){

		var txt=$('#msg').html()+"<p>div内的button被点击.</p>";

		$('#msg').html(txt);

		event.stopPropagation();//停止事件冒泡

	})

改完之后单击button变成如图：

B、也能够在事件处理函数运行后加上return false;来防止事件冒泡。

	//为input元素绑定click事件

	$('input').click(function(){

		var txt=$('#msg').html()+"<p>div内的button被点击.</p>";

		$('#msg').html(txt);

		return false;

	})

8、事件委派与解除委派

live()与die()

样例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> 事件委派与解除委派 </title>

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

  <script type="text/javascript">

  <!--

		$(function(){

			$("p").live("click",function(){

				$(this).after("<p>段落文字</p>");

			})

			$("input").click(function(){

				$("p").die();//不带參数就是解除live事件。假设带了參数type，那会移除对应的live事件，假设同一时候指定了第二个參数，则仅仅能移除指定事件的处理函数。

			})

		})

  //-->

  </script>

 </head>

 <body >

	<input type="button" value="解除事件绑定">

	<p>段落文本</p>

 </body>

</html>

9、事件命名空间

jQuery支持事件命名空间以方便管理事件。比如，在以下演示样例中为div元素绑定多个事件类型，然后使用命名空间进行规范，从而方便管理。

所谓事件命名空间，就是在事件类型后面以点语法附加一个别名。以便于引用事件，如。click.a ，当中a就是click当前事件的别名。

例如以下演示样例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> jQuery命名空间 </title>

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

  <script type="text/javascript">

  <!--

		$(function(){

			$("div").bind("click.a",function(){

				$("body").append("<p>click事件<p/>")

			});

			$("div").bind("dblclick.a",function(){

				$("body").append("<p>dblclick事件<p/>")

			});

			$("div").bind("mouseover.a",function(){

				$("body").append("<p>mouseover<p/>")

			});

			$("div").bind("mouseout.a",function(){

				$("body").append("<p>mouseout<p/>")

			});

		})

  //-->

  </script>

 </head>

 <body >

	<div id="" class="">

		jQuery命名空间

	</div>

 </body>

</html>

我们为div绑定的几个事件都指定了命名空间，这样在删除事件的时候。就能够直接指定命名空间就可以。

比如调用以下一行代码就能够把上面绑定的事件所有删除：

$("div").unbind(".a");

相同，假如我们为click事件类型指定了不同的命名空间，那么当我们仅仅想删一个的时候仅仅要指定它的命名空间就可以。

10、绑定多个事件

我们能够为同一元素绑定多个事件，既能够是同类型的也能够是不同类型的。

jQuery整理笔记5----jQuery大事的更多相关文章

jQuery整理笔记八----jQuery的Ajax
Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是依据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我认为说法挺靠谱的. jQuery封装了Ajax的交互过程,用户 ...
jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
jQuery整理笔记七----几个经典表单应用
1.文本框获得(失去)焦点当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...
jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
jQuery:自学笔记(2)——jQuery选择器
jQuery:自学笔记(2)——jQuery选择器基本选择器说明 jQuery的基本选择器与CSS的选择器相似: 实例标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...
jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
jQuery整理笔记9----函数形式发展
在一些照片中使用演示样本.插入.样式文件下载:点我进入下载过去在开发过程中关于table方面的jquery应用不过局限于使用jquery操作table添加一行.删除一列等等操作.今天整理的跟过去用的 ...
jQuery整理笔记九----功能性表格开发
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/hai_cheng001/article/details/27536965 演示样例中用到的一些图片. ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

随机推荐

Windows上的的神技
Windows上的的神技不用借助任何第三方软件,其实Windows也大有可为——比你目前了解得至少要多得多,强大技能快来get起来! 1.文件隐藏谁的电脑里没点小秘密?东藏西藏到最后自己都找不到了有 ...
基数排序---Java实现+C++实现
基数排序是基于桶排序实现的,总之基本思想是:先基于个位进行桶排序,更新原序列:再基于十位进行桶排序,更新原序列-- code1:java import java.util.*; public clas ...
Java Web整合开发(78) -- Struts 1
在Struts1.3中已经取消了<data-sources>标签,也就是说只能在1.2版中配置,因为Apache不推荐在 struts-config.xml中配置数据源.所以建议不要在st ...
bootstarp modal自己主动调整宽度的JS代码
$('#ajaxPage').modal('show').css({ width: 'auto', 'margin-left': function () { return -($(this).widt ...
高质量c c++编程
第1章文件结构每一个C++/C程序通常分为两个文件.一个文件用于保存程序的声明(declaration),称为头文件.还有一个文件用于保存程序的实现(implementation),称为定义(de ...
Gradle cookbook(转)
build.gradle apply plugin:"java" [compileJava,compileTestJava,javadoc]*.options*.encoding ...
5月，专用程序猿的经典大作——APUE
五一小长假刚刚过去,收回我们游走的心.開始你们的读书旅程吧! 本期特别推荐经典UNIX著作最新版. 20多年来,这本书帮助几代程序猿写出强大.高性能.可靠的代码. 第3版依据当今主流系统进行更新,更 ...
MONGO DB windows 设备
1,下载安装包 https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-ssl-3.0.0-signed.msi?_ga=1.22 ...
axWindowsMediaPlayer1获取音频长度
OpenFileDialog openFileDialog1 = new OpenFileDialog { InitialDirectory = "c:\\", Filter = ...
Centos6.5下一个Ceph存储集群结构
简单的介绍 Ceph的部署模式下主要包括下面几个类型的节点 • Ceph OSDs: A Ceph OSD 进程主要用来存储数据,处理数据的replication,恢复,填充.调整资源组合以及通过检查 ...

jQuery整理笔记5----jQuery大事

jQuery整理笔记5----jQuery大事的更多相关文章

随机推荐

热门专题