- 浏览: 3315933 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
2,jquery文本改变事件绑定
介绍:change:焦点离开时触发事件
focus:获得焦点时触发事件
keyup:按键弹起时触发事件
keypress:按键按下时触发事件(先响应事件,再显示输入结果(获得的是上一次结果),可能被输入法拦截)
propertychange:属性改变时触发事件(不管是获得焦点还是value改变等)
1,live 和 delegate 一样吗?
例如以下代码片段
两种方法得到的最终结果没有区别,但是执行的过程却不一样。前者是先扫描页面上所有 'a' 元素,然后绑定事件到 document 节点,最后根据事件类型及事件源作判断;后者是直接扫描 document 节点,然后绑定事件到 document 上,最后判断。前者扫描的是 'a',后者扫描的就是 document 本身,理论上后者更快一些。
live()方法的一个不足在于它不支持链式写法:
上边这种写法并不会输出,我们使用delegate()可以写为:
这样就可以正常的输出我们想要的结果了。本篇总结了click()、bind()、live()和delegate()方法,其中并没有做非常详细的解释,仅望能对大家在具体使用时有所帮助。
2,jquery文本改变事件绑定
介绍:change:焦点离开时触发事件
focus:获得焦点时触发事件
keyup:按键弹起时触发事件
keypress:按键按下时触发事件(先响应事件,再显示输入结果(获得的是上一次结果),可能被输入法拦截)
propertychange:属性改变时触发事件(不管是获得焦点还是value改变等)
<html> <head> <title>Jquery操作DOM对象</title> <script type="text/javascript" src="D:/jquery study/jquery_js/jquery-1.6.4.js"></script> <script type="text/javascript"> $(function(){ $(".txt").bind("propertychange",function(){ var txtChange = $("input").val(); $("#p2").html(txtChange); }); }) </script> </head> <body> <input type="text" name="test" class="txt" value="test"/> <p id="p2"></p> </body> </html>
$(".txt").change(function(){ $(".txt").val(""); }); $(".txt").focus(function(){ $(".txt").val(""); }); $(".txt").keyup(function(){ var txtChange = $("input").val(); $("#p2").html(txtChange); }); $(".txt").keypress(function(){ var txtChange = $("input").val(); $("#p2").html(txtChange); }); $(".txt").bind("propertychange",function(){ var txtChange = $("input").val(); $("#p2").html(txtChange); });
1,live 和 delegate 一样吗?
例如以下代码片段
$('a').live('click', function() { blah() }); // or $(document).delegate('a', 'click', function() { blah() });
两种方法得到的最终结果没有区别,但是执行的过程却不一样。前者是先扫描页面上所有 'a' 元素,然后绑定事件到 document 节点,最后根据事件类型及事件源作判断;后者是直接扫描 document 节点,然后绑定事件到 document 上,最后判断。前者扫描的是 'a',后者扫描的就是 document 本身,理论上后者更快一些。
live()方法的一个不足在于它不支持链式写法:
$("#test").children("a").live("mouseover", function() { alert("hello"); });
上边这种写法并不会输出,我们使用delegate()可以写为:
$("#test").delegate("a", "mouseover", function() { alert("hello"); });
这样就可以正常的输出我们想要的结果了。本篇总结了click()、bind()、live()和delegate()方法,其中并没有做非常详细的解释,仅望能对大家在具体使用时有所帮助。
发表评论
-
终止jQuery的$.ajax方法abort
2015-03-30 15:24 25061作者:zccst 最近遇到,如果用户频繁点击ajax请求,有 ... -
至今仍未使用过的jQuery方法
2015-02-02 17:54 933作者:zccst jQuery用了很久了,但还是有很多方法, ... -
jQuery工具方法还不会的知识点
2015-01-26 16:29 903作者:zccst 2015-2-9 grep( ... -
jquery post时content-type的几种取值
2015-01-26 15:42 101706zccst转载 以后用得着的时候慢慢研究 参考:http: ... -
通过html的id或class查看事件定义源码
2015-01-22 11:26 4192作者:zccst整理 jQuery通 ... -
$.ajax的error,complete,success方法
2014-12-16 14:48 31792作者:zccst 2015-03-30 今天发现从1.8后, ... -
jQuery的$.each循环的对象
2014-11-07 18:20 9397作者:zccst //最简单的对象 var ... -
jquery.proxy的四种使用场景及疑问
2014-08-01 15:18 1307作者:zccst 其实只有两种使用方式,只不过每一种又细分是 ... -
jquery 中size() length的区别
2014-07-10 10:37 2034作者:zccst size()跟length同样的功能,都是 ... -
attr与prop的区别
2014-07-09 18:20 961作者:zccst jQuery在1.6.1 ... -
学习jQuery API文档
2014-05-21 20:15 551作者:zccst 文档处理 remove和detach区 ... -
jquery获取浏览器高度、宽度和滚动条高度
2014-01-15 16:35 5011作者:zccst 遇到过一个问题,网页宽度大于浏览器宽度时出 ... -
jQuery的$.fn使用
2013-12-25 16:10 1158$.fn是指jquery的命名空间 ... -
jQuery的$.load使用
2013-12-25 15:37 1454作者:zccst 基本用法(来自手册) //用法一 $ ... -
jquery的deferred用法
2013-11-20 15:39 1432作者:zccst 参考文档:jQuery的deferred对 ... -
jQuery.extend 函数详解
2013-06-03 14:24 923zccst转 JQuery的extend扩展方法: ... -
jquery的表单内容序列化方法serialize
2012-09-06 16:03 6665jquery的表单内容序列化方法serialize 一、前端 ... -
jquery操作相同class的dom节点
2012-05-21 22:48 13475作者:zccst 使用jquery操作相同class的dom ... -
jquery想开发jQuery插件?跟我来
2012-05-20 03:59 1538zccst转载 首先了解两个概念 1,jquery(fun ... -
jquery【CSS】
2012-05-17 16:09 1065作者:zccst jquery操作CSS也算是比较常见的,之 ...
相关推荐
jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...
jQuery事件和动画.,对刚学习的同学帮助很大
在JavaScript的世界里,jQuery库为开发者提供了极大的便利,特别是在处理DOM操作和事件处理上。"jQuery鼠标滚轮事件"是一个非常实用的功能,它允许我们监听并响应用户使用鼠标滚轮时的操作,以此来实现诸如页面滚动...
三、jQuery事件 1. 基本事件绑定:jQuery提供了`.on()`方法来绑定事件。例如,`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时,执行匿名函数内的代码。 2. 鼠标事件:常见...
原生JavaScript监听滚轮事件稍微复杂一些,因为需要考虑浏览器兼容性问题。可以使用`addEventListener`方法添加事件监听器,并处理不同的滚轮事件名称。 ```javascript document.addEventListener('...
通过以上对jQuery事件处理和动画效果的讲解,相信你已经对这两个主题有了全面的理解。结合实际的HTML文档,不断练习和探索,你将能熟练运用jQuery,提升网页交互体验。在实践中,不断学习,持续进步,是成为优秀的...
jQuery历史事件时间轴插件;jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件
jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4...
《jQuery事件函数共4页.pdf》是一份详细探讨jQuery事件处理的资料,它涵盖了JavaScript库jQuery中的关键事件处理概念和函数。jQuery简化了DOM(文档对象模型)事件处理,使得在网页交互中添加、移除和触发事件变得...
在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何为jQuery添加自定义事件机制,这将帮助开发者扩展jQuery的功能,实现更加个性化的...
3. jQuery中的事件委托技术:为了解决动态元素的事件处理问题,jQuery引入了一种名为“事件委托”的技术。事件委托允许我们将事件监听器绑定到一个父级元素上,而不是直接绑定到目标元素上。这样,即使目标元素是...
在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理和Ajax交互等任务。本篇文章将深入探讨如何使用jQuery来监听一个DIV元素的事件,以便于我们在其状态变化时执行相应的代码。 首先,理解...
triggerTracker, 用于跟踪jQuery事件的jQuery调试工具 triggerTrackerTriggerTracker是跟踪jQuery事件的工具。 它是一个单独的JavaScript文件,当加载时,它向与jQuery事件触发和事件处理程序相关的浏览器的控制台...
《jQuery带事件记录的多功能日历详解》 在网页开发中,日历插件是一种常见的交互元素,用于显示日期、安排事件以及提醒用户。本文将深入探讨一款特别的jQuery日历插件,它具备事件记录功能,使得日历不仅美观,而且...