在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发。...1.事件绑定的几种常见方式(以click事件为例) jquery: $(selector).click(function(){...})...bind方法 会给每一个符合selector的元素添加click执行函数,即:将click事件绑定到所有设置了的selector元素上,如果动态添加了元素,之前绑定事件也起作用 live方法 ...[注意:live事件,jQuery 1.7以后版本使用on代替live,且移动设备safari浏览器不支持live事件] 【穿插解决方案: 移动设备safari浏览器不支持live事件 方法一: 首先要给绑定....); } 在大量使用ajax时,为了触发事件会在success里调用clickEvent方法,然后由于其他地方需要触发同样的事件又会调用clickEvent,这样很容易导致多次触发。
live、delegate 不多用,在Jquery1.7中已经移除,这里不多说 重点介绍 bind、on bind(event,[data],function) bind 是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数...("click",myFun); on(event,childSelector,data,function) on() 方法在被选元素及子元素上添加一个或多个事件处理程序。...规定当事件发生时运行的函数。...语句,避免浏览器出现错误提示。...可以发现: 使用 jQuery 的事件绑定方法,对同一个元素的 click 事件先后绑定了三个处理函数,结果按顺序都输出了,说明了 jQuery 的事件处理函数是叠加的; 而使用 JavaScript
jQuery测试,看看浏览器在1秒内能够执行多少次。...可以看到,1.6.2版本的运行次数,远远超过两个老版本。尤其是第一条语句,性能有数倍的提高。 其他语句的测试,比如.attr(“value”)和.val(),也是新版本的jQuery表现好于老版本。...Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。...比如,有一个表格(table元素),里面有100个格子(td元素),现在要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次? ...选择作用域链最短的方法 严格地说,这一条原则对所有Javascript编程都适用,而不仅仅针对jQuery。 我们知道,Javascript的变量采用链式作用域。
This.toggleClass(“highline”); //动态切换,当有时去除,当没有时添加 }) } 4.给表格的偶数行添加样式 $(".mytable tr:even").addClass("tr1"); 5.在选中元素上添加内容...”,fnMyfun1=function(){ //添加事件1 $(“#show”).append(“事件1”); //在id为show的标签中添加文本 }) .bind (“click”,...(){ $(“img”).unbind(“click”,” fnMyfun1”); //移除事件监听fnMyfun1 }) 10.JQuery制作动画与特效――元素的显示与隐藏效果 $(“...的功能虑数 ·浏览器的检测 用$.browser方法 $.browser.verson //获取浏览器版本号 function detect(){ if($.browser.msie)...$.boxModel 如果是True,则是标准W3C,False则是其他。
三个版本的jQuery测试,看看浏览器在1秒内能够执行多少次。...可以看到,1.6.2版本的运行次数,远远超过两个老版本。尤其是第一条语句,性能有数倍的提高。 其他语句的测试,比如.attr("value")和.val(),也是新版本的jQuery表现好于老版本。...Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。...比如,有一个表格(table元素),里面有100个格子(td元素),现在要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次? ...选择作用域链最短的方法 严格地说,这一条原则对所有Javascript编程都适用,而不仅仅针对jQuery。 我们知道,Javascript的变量采用链式作用域。
,声明函数在全局作用域,此时作用域链只有一个环境对象;运行函数时作用域链顶端加入了函数内的环境对象,运行完毕时顶端环境对象被销毁,以此类推。...全局变量总是存在于运行期上下文作用域链的最末端,因此在标识符解析的时候,查找全局变量是最慢的。 (最好和闭包一起理解) 21、你对前端有什么理解?...34、移动设备浏览器的 click 事件 300毫秒延迟 来源于最初的 iOS Safari 浏览器在用户点击屏幕时会等待 300 毫秒,以判断用户是想进行单击还是进行双击缩放。...其他浏览器也借鉴 Safari 的特性,导致了这一问题。...touchend 事件的时候,会通过 DOM 自定义事件立即出发模拟一个 click 事件,并把浏览器在300ms之后的 click 事件阻止掉。
如何检测各种浏览器: (1)navigator.userAgent返回一个浏览器信息字符串。 (2)用到indexOf()方法,查找字符串中是否有指定的浏览器类型。...如何为任何与选择器相匹配的元素设置事件处理程序: $('button.someClass').live('click', someFunction); //注意,在jQuery 1.4.2中,delegate...如何强制在弹出窗口中打开链接: jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href...如何强制在新的选项卡中打开链接: jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href);...在jQuery中如何使用.siblings()来选择同辈元素 // 不这样做 $('#nav li').click(function(){ $('#nav li').removeClass('active
(W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。) 描述CSS Reset的作用和用途。...以button的Click事件为例: 1、直接在元素上绑定回调函数 click me 2、JS获取DOM元素对象后...jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。...如何判断当前脚本运行在浏览器还是node环境中?(阿里) 通过判断Global对象是否为window,如果不为window,当前脚本没有运行在浏览器中。...jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+,Opera 9.0+等。
三个版本的jQuery测试,看看浏览器在1秒内能够执行多少次。...可以看到,1.6.2版本的运行次数,远远超过两个老版本。尤其是第一条语句,性能有数倍的提高。...其他语句的测试,比如.attr("value")和.val(),也是新版本的jQuery表现好于老版本。 2. 用对选择器 在jquery中,你可以用多种选择器,选择同一个网页元素。...Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。...比如,有一个表格(table元素),里面有100个格子(td元素),现在要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次?
测试,看看浏览器在1秒内能够执行多少次。...可以看到,1.6.2版本的运行次数,远远超过两个老版本。尤其是第一条语句,性能有数倍的提高。 其他语句的测试,比如.attr("value")和.val(),也是新版本的jQuery表现好于老版本。...Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。...为了获取这个属性,必须连续两次调用jQuery,第一次是$(this),第二次是attr('id')。 事实上,这种处理完全不必要。...比如,有一个表格(table元素),里面有100个格子(td元素),现在要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次?
4、jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。 5、可以很容易的为jQuery扩展其他功能。...二、使用方法 在需要使用JQuery的页面中引入JQuery的js文件即可。...已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。...//删除所有p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能 其中toggle()和slidetoggle...11、几个有用的jQuery方法 $.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。
实现 $('#ele').click(function(event){ //获取鼠标在图片上的坐标 console.log('X:' + event.offsetX+'\n Y:' + event.offsetY...$('#btn').on('click', function (event) { event.stopPropagation(); }); 十一、检测浏览器是否支持svg function isSupportSVG...if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; //Safan浏览器 } if(isCamino...如果没有定义处理程序,其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序 ?...还有一种方法是在(前缀$)变量中高速缓存元素 ? 链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。
实现 $('#ele').click(function(event){ //获取鼠标在图片上的坐标 console.log('X:' + event.offsetX+'\n Y:' +...$('#btn').on('click', function (event) { event.stopPropagation(); }); 十一、检测浏览器是否支持svg function isSupportSVG...} if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari";...如果没有定义处理程序,其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序 ?...还有一种方法是在(前缀$)变量中高速缓存元素 ? 链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。
*jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。...'browser' : 'node'; 通过判断Global对象是否为window,如果不为window,当前脚本没有运行在浏览器中 41、jQuery 的 slideUp动画 ,如果目标元素是被外部事件驱动...内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。 垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。...知道怎么用浏览器的各种工具来调试和debug代码么? Chrome,Safari浏览器内核。 45、用js实现千位分隔符?...polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载JavaScript 代码或库,在不支持这些标准 API 的浏览器中模拟它们。
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。...polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码或库,在不支持这些标准 API 的浏览器中模拟它们。...列举IE与其他浏览器不一样的特性 事件不同之处: 触发事件的元素被认为是目标(target)。...*(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求, 因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。...向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取
blank"; }); }); // how to use open link 检测浏览器...注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量 $(document).ready(function() { // Target Firefox 2 and...鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 class...,你可以这么做: $('a.no-link').click(function (e) { e.preventDefault(); }); 切换 fade/slide fade 和 slide 是我们在...).ready(function() { jQuery.fx.off = true; }); 与其他Javascript类库冲突解决方案 $(document).ready(function()
2Browser Sandbox Browser Sandbox是一款可运行在桌面和平板上的应用程序,可以像运行原生浏览器那样运行多种浏览器。...BrowserStack 列出了数百种浏览器、设备和测试策略,确保你的网站可以在尽可能多的环境中正常运行。...9SauceLabs TestingBot为网站和原生移动 App 提供了完整的测试策略,可以在真实的 iOS 或 Android 设备上运行测试。...因为它是基于 W3C WebDriver 和 Chrome DevTools 的,所以可以在本地运行,也可以在云端运行,就像 SauceLab、BrowserStack 和 TestingBot 那样。...17 Selenium Selenium是一款浏览器自动化测试工具,相信测试伙伴们都对它很熟悉。实际上,它并没有提供现成的测试框架,但可以通过扩展来实现。
因为OJ需要在线运行代码的能力,所以我们在站点根目录下新建一个文件夹:api ? 在api文件夹里新建一个文件:python.php 代码如下: <?...php //Powered By ShengFAN //使用世界上最好的语言PHP进行开发-_- $randint = rand();//为用户的代码取一个随机数作为唯一码 $f = fopen("/tmp...接下来,我们去使用ACE编辑器制作自由模式(不添加判题系统) 在网站根目录创建editor目录 去Github上获取ACE编辑器的官方demo 这里我已经准备好了命令 git clone git://github.com.../2.1.1/jquery.min.js"> jquery-cookie/1.4.1/jquery.cookie.min.js...xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari
2、document.importNode 浏览器支持:IE9+和其他现代浏览器均支持。 作用:拷贝其他文档中的元素到当前文档中。...虽然规范中描述其作用为拷贝其他文档中的元素,但实际上是可以对当前文档的元素进行拷贝的; 4. ...作用:剪切其他文档中的元素到当前文档中。...虽然规范中描述其作用为拷贝其他文档中的元素,但实际上是可以对当前文档的元素进行拷贝的; 3. ...el替换为otherEl并将el作为函数返回值, 此时el已经脱离了DOM树; el.swapNode(HTMLElement} otherEl) 作用是交换el和otherEl在树层级结构中的位置,两者均在
领取专属 10元无门槛券
手把手带您无忧上云