jquery事件

jQuery自动触发事件

由 早过忘川 提交于 2019-12-08 11:49:20
触发事件 事件都是在特定条件下发生的，不同类型的事件触发的实际时机是无法预测的。开发者无法知道用户何时单击按钮提交表单，或者何时输入文本。但是在很多情况下，开发人员需要在脚本中控制事件触发的实际。 例如，设计一个弹出广告，虽然广告画面提供了允许用户关闭的广告按钮，但是也应该设计一个条件，控制广告在显示3秒之后自动关闭。 也许用户可以把事件处理函数定义为独立的函数窗口，以便于直接通过名称调用她，而不需要特定的事件交互。但是如果允许直接调用事件的处理函数，会简化程序的设计，更为重要的是它的操作方便。 在传统表单设计中，表单域元素都拥有focus()和blur()方法，调用他们将会直接调用对应的focus和blur事件，是文本域获取焦点或失去焦点。 jQuery定义在脚本的控制下自动触发事件处理函数的一系列方法，其中最常用的就是trgger()方法。用法如下: trigger(type,[data]) 其中第一个参数的type表示事件类型，以字符串形式传递，第二个参数data是可选data可选参数，利用该参数可以向调用的事件处理函数传递额外的数据。 看下面的案例： $(function(){ $("li").click(function(){ alert($(this).text()); }); $("li").mouseover(function(){ $(this).trigger(

JQuery点击事件优化

由 邮差的信 提交于 2019-12-08 03:36:30
<div id= "content" ></div> var html = '' ; for ( var i= 0 ; i< 10000 ; i++) { html += '<p>' +i+ '</p>' ; } $( '#content' ).append(html); 第一种事件绑定方式 $( '#content p' ).off( 'click' ).on( 'click' , function () { $( '#content' ).append( '<p>啦啦啦啦</p>' ); }); 第二种事件绑定方式：事件委托 $( '#content' ).off( 'click' ).on( 'click' , 'p' , function () { $( '#content' ).append( '<p>啦啦啦啦</p>' ); }) 第三种事件绑定方式：事件委托 $( '#content' ).off( 'click' ).on( 'click' , function (e) { if (e.target.tagName == 'P' ) { $( '#content' ).append( '<p>啦啦啦啦</p>' ); } }); 区别： 1、第一种方式通过点击事件添加的p标签没有被绑定点击事件，后2种有 2、通过谷歌浏览器测试显示，浏览器内存消耗不同，第一种明显偏多

【前端面试】前端面试题300道~~熬夜吐血整理

由 蹲街弑〆低调 提交于 2019-12-08 01:48:06
人生也有涯 而知也无涯 以有涯随无涯 殆已！ –庄子 部分内容转载自网络，侵立删！如有错误，请指正！ 1、手写jsonp的实现 参考自： http://www.qdfuns.com/notes/16738/1b6ad6125747d28592a53a960b44c6f4.html 先说说JSONP是怎么产生的： 其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，着用自己的方式来阐释一下这个问题，看看是否有帮助。 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。 2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如script、img、iframe）。 3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。 4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持

jquery中对动态生成的标签不会响应click事件

由 不羁的心 提交于 2019-12-07 21:37:30
Jquery中对ajax动态生成的html标签不会响应 $(selector).click(function.. 或者$(selector).bind('click',function.., 需要用.live jQuery 1.7 开始 ，不再建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户，应该优先使用 .delegate() 来替代 .live()。 返回值:jQuerylive(type, [data] , fn) 概述 jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是 以后再添加进来的也有效。 这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说 <body> <div class="clickme">Click here</div> </body> 可以给这个元素绑定一个简单的click事件： $('.clickme').bind('click', function() { alert("Bound handler called."); }); 当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。 $('body').append('<div class

jQuery中的.bind()、.live()和.delegate()之间区别分析，学习jquery

由 孤者浪人 提交于 2019-12-07 21:36:58
DOM树 首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子： 事件冒泡(又称事件传播) 当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行。 click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。 在操纵DOM的语境中，document是根节点。 现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。 .bind() 复制代码 代码如下: $('a').bind('click',function(){alert('That tickles!');}) 这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a')元素，并把alert函数绑定到每个元素的click事件上。 .live() 复制代码 代码如下: $('a').live('click',function(){alert('That tickles!')}) JQuery把alert函数绑定到$(document)元素上

Zepto 使用中的一些注意点

由 旧巷老猫 提交于 2019-12-07 20:28:23
前段时间完成了公司一个产品的 HTML5 触屏版，开发中使用了 Zepto 这个著名的 DOM 操作库。 为什么不是 jQuery 呢？因为 jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。 而 Zepto 只针对移动端浏览器编写，因此体积更小、效率更高，更重要的是，它的 API 完全仿照 jQuery ，所以学习成本也很低。 但是在开发过程中，我发现 Zepto 还远未成熟，其中包含了一些或大或小的“坑”，与 jQuery 的差距还是很明显的，所以写篇文章记录下，希望对后来者有帮助 注意，本文撰写时 Zepto 版本为 1.0 正式版 从哪里下载 Zepto 这个问题看起来很蠢，从官网下载不就行了嘛！可是你有没有发现下载链接上面有行小字呢？ There are more modules; a list of all modules is available in the README. 在这个 README 里面你会惊奇地发现，Zepto 源码中有 14 个模块，而官网提供的标准版里面只有 7 个模块！而且居然不包含对移动端开发非常重要的 touch 模块（提供对触摸事件的支持）！ 所以我的建议是，不要从官网下载，而是从 Github 下载了源代码之后自己 Build 一个版本，这样你可以自行挑选适合的模块

jQuery的性能优化，你知道几条

由 岁酱吖の 提交于 2019-12-07 19:43:11
================================================================= 一、选择器性能优化建议 ================================================================= 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。 $('#content').hide(); 复制代码 或者从ID选择器继承来选择多个元素: $('#content p').hide(); 复制代码 2. 在class前面使用tag jQuery中第二快的选择器就是tag选择器（如$(‘head’)），因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID) varreceiveNewsletter = $('#nslForm input.on'); 复制代码 jQuery中class选择器是最慢的，因为在IE 浏览器 下它会遍历所有的DOM节点。尽量避免使用class选择器。也不要用tag来修饰ID。下面的例子会遍历所有的div元素来查找id为’content’的那个节点： varcontent = $('div

jQuery新的事件绑定机制on()

由 这一生的挚爱 提交于 2019-12-07 12:46:10
今天浏览jQuery的deprecated列表，发现live()和die()在里面了，赶紧看了一下，发现从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。 selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。 替换bind() 当第二个参数'selector'为null时，on()和bind()其实在用法上基本上没有任何区别了，所以我们可以认为on()只是比bind()多了一个可选的'selector'参数，所以on()可以非常方便的替换掉bind() 替换live() 在1.4之前相信大家非常喜欢使用live()

jQuery中的.bind()、.live()和.delegate()之间区别分析

由 北城余情 提交于 2019-12-07 12:45:54
jQuery中的.bind()、.live()和.delegate()之间区别分析，学习jquery的朋友可以参考下。 DOM树 首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子： 事件冒泡(又称事件传播) 当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行。 click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。 在操纵DOM的语境中，document是根节点。 现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。 .bind() 代码如下: $('a').bind('click',function(){alert('That tickles!');}) 这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a')元素，并把alert函数绑定到每个元素的click事件上。 .live() 代码如下: $('a').live('click',function(){alert(

jQuery中的.bind()、.live()和.delegate()之间区别分析

由 ＊爱你＆永不变心＊ 提交于 2019-12-07 12:45:42
jQuery中的.bind()、.live()和.delegate()之间区别分析: DOM树 首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子： 事件冒泡(又称事件传播) 当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行。 click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。 在操纵DOM的语境中，document是根节点。 现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。 .bind() 复制代码 代码如下: $('a').bind('click',function(){alert('That tickles!');}) 这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a')元素，并把alert函数绑定到每个元素的click事件上。 .live() 复制代码 代码如下: $('a').live('click',function(){alert('That tickles!
订阅 jquery事件