读jQuery之十事件模块概述-jquery

名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。

本篇文章具体介绍如下

后面会详细分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。

虽然事件模块具体代码很难读，但其提供的API接口还是很清晰的。如下

1 添加事件(bind/one/live/delegate/hover/toggle)
bind 基本的添加事件函数。
one 添加只执行一次的事件函数。
live 事件代理（使用document代理）。
delegate 事件代理（使用指定元素代理）。
hover 模拟css的hover。
toggle 显示/隐藏。

bind/one/live 都是使用内部的jQuery.event.add 来完成事件添加。
delegate 内部调用的是live。
hover 内部使用mouseenter/mouseleave，而mouseenter/mouseleave又使用bind。
toggle 内部使用click，而click内部又调用的是bind。

实际上jQuery的一个each调用就给jQuery对象上增加了24个添加事件的快捷方法
如下图

如下图

记住，bind调用的是jQuery.event.add，因此 jQuery.event.add 才是整个jQuery添加事件模块的核心。以上所有的方法都是在其之上构建的上层应用。如图

2 删除事件 (unbind/die/undelegate)

unbind 删除事件基础方法。可以删除一个指定handler，还可以删除某类型事件的全部handler，甚至可以删除挂在element上的全部事件。其内部调用jQuery.event.remove。

die/undelegate 删除事件代理。内部都使用unbind。

因此， jQuery.event.remove 才是整个jQuery删除事件模块的核心。unbind/die/undelegate都是在其之上构建的上层应用。如图

3 触发事件(trigger/triggerhandler)

trigger 触发一个事件（会冒泡）

triggerhandler 触发一个事件（不会冒泡）

trigger/triggerhandler 内部调用的都是jQuery.event.trigger，因此jQuery.event.trigger 才是整个jQuery触发事件模块的核心。如图

js的一些常用方法小结-基础知识
Val(),append(),get(),split(),substr(),each(),html(),keyup(),trim(),show(),hide(),indexOf() 一个一个来看： Val()：来对一个页面元素进行取值和赋值取值：var result = $(“#txtSearch”).val(); 赋值：$(“#txtSearch”).val(result); Each():对一个集合的操作,对集合里面的每一个元素进行后面的方法调用，例如： $.each(data.list, function (i, item) { Alert(item["WikiTitle"]” ” item["WikiID"]);//i是集合的元素下表，item代表元素本身 }); Append():在指定的页面元素后面追加元素比如一个列表元素
test!
,像这样的页面元素就可以通过append方法来动态添加多个
项例如：页面里面有一个id="div_keycontent"的div：
Js里面就可以这样写： $.each(data.list, function (i, item) { $("#div_keycontent").append("
" item["WikiTitle"] " 查看" "
"); }); Get():在页面上异步获取数据，这种方式是异步绑定的形式，在我的前面的文章里面有交代，这里就不说了吧。 Spilt():对字符串进行操作例如： Var str = spit(“liu,ming,feng”,”,”); 这样返回的str就是一个字符串数组：{“liu”,”ming”,”feng”} Substr();对字符串操作的，去里面的子字符串用法： ///判断最后一个字符是否为逗号 if (str.substring(str.length - 1, str.length) == "," || str.substring(str.length - 1, str.length) == "，"){ alert(“最后一个字符是逗号！”); } html():修改一个html的标签的内容，例如： $("#div_keycontent").html("
没有数据
"); Keyup();键盘按下弹起触发的方法 $("#txtSearchKey").keyup(function () { $("#div_keycontent").html("
数据检索中....
"); }); Trim()：去掉字符串的首尾空格用法：str.trim(); Show():让页面元素显示例如：$("#txtSearchKey").show(); hide()：隐藏页面的元素例如：$("#txtSearchKey").hide(); Indexof():查看字符串的中是否有对应的子字符串用法： if (str.indexOf(',,') != -1 || str.indexOf('，，') != -1) {///判断是否有连逗号 alert(“有两个逗号连用！”); }