$(document).on:
从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。
jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。
jquery中用on来绑定事件,经常的写法有
$(document).on('click','#idname',function(){});
$('#idname').on('click',function(){});
这两种写法又有什么不同呢?
$(document).on是把事件委托到了document上。$('#idname').on是把事件委托到了元素上。
在需要为较多的元素绑定事件的时候,优先考虑事件委托,可以带来性能上的好处。
当事件冒泡到document对象时,检测事件的target,如果与传入的选择符(这里是button)匹配,就触发事件,否则不触发。
在确保所选择的元素已经存在的情况下,进行事件绑定时,您可以使用委派的事件,以避免频繁的绑定事件及解除绑定事件。
$(document).on是把事件委托到document上,$('className').on是把事件绑定到.className元素上。效率方面,直接绑定在元素上会更为高效,绑定在document上,每次document有点击动作,浏览器都会判断当前点击的对象,如果匹配,再决定要不要执行,多了一个判断的环节。但在目前开发中,JS渲染效率很高,所以此异同基本可以忽略不计。此外,针对$(document).on的触发特点,延伸一下,$("className").on为onclick绑定,只有在页面onload的时候执行一次,当页面刷新后,新加载的具有className的元素便没有事件绑定到上面了,相反$(document).on这种方法会刷新和重新赋予绑定操作,所以一定程度上更为全面。
示例:
//绑定加载更多事件
$(document).on('click', '.vCommit', function (e) { e.preventDefault(); saveTopic(); });
document.querySelector:
现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,querySelector 和 querySelectorAll 作为查找 DOM 的又一途径,极大地方便了开发者,使用它们,你可以像使用 CSS 选择器一样快速地查找到你需要的节点。
假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,你也许会像下面这样:
document.getElementById("test");
现在我们来试试使用新方法来获取这个 DIV:
document.querySelector("#test");
document.querySelectorAll("#test")[0];
感觉区别不大是吧,但如果是稍微复杂点的情况,原始的方法将变得非常麻烦,这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子,我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素,当然这很拗口,但是用本文的新方法来选择这个元素,比用言语来描述它还要简单。
document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];
querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素,而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素,如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组,如果没有匹配的元素则返回的数组为空。
http://www.nowamagic.net/librarys/veda/detail/388
http://www.runoob.com/jsref/met-document-queryselector.html
相关推荐
**jQuery 特性** 1. **选择器**: jQuery 提供了丰富的 CSS 选择器,使得开发者能够快速准确地选取页面元素,如 `$("#id")` 选取 id 为 id 的元素,`$(".class")` 选取所有 class 为 class 的元素。 2. **链式操作*...
较新的版本可能不支持某些旧浏览器,而旧版本可能缺少新特性。目前,jQuery 3.x是稳定且广泛支持的版本。 10. **学习资源** 学习jQuery,官方文档是基础,网站如iteye、Stack Overflow等社区提供的问题解答和示例...
jQuery 的核心特性可以概括为:选择器、DOM操作、事件处理、动画效果和Ajax。 1. **选择器** jQuery 提供了丰富的选择器,使得我们能够更方便地选取 HTML 元素。例如: - `$("#id")` 选取ID为指定值的元素。 - `...
jQuery 3.x系列致力于提高对ES6及以后新特性的支持,并优化了性能。对于不再支持的旧浏览器,开发者可能需要引入polyfills以确保兼容性。同时,通过压缩和优化,`jquery-3.2.1.min.js`的体积更小,加载速度更快。 #...
总结来说,jQuery 3的新特性主要集中在提升开发效率、代码清晰度以及性能优化上,这些改变确保jQuery继续在JavaScript库领域保持领先地位,同时也更好地适应不断演进的Web开发环境。随着这些新特性的引入,开发者...
### jQuery个人总结 #### 1. 认识jQuery **jQuery** 是一款快速、简洁的JavaScript库,它的设计目标是简化HTML文档遍历、事件处理、动画以及Ajax交互等常见功能的操作。通过一个简单的语法就能实现强大的功能,...
### JQuery的小小总结 #### 一、概述 JQuery是一种流行的JavaScript库,它极大地简化了JavaScript编程中的HTML文档遍历、事件处理、动画以及Ajax交互等任务。由于其易用性和强大的功能,JQuery成为了前端开发中最...
jQuery的核心特性包括: 1. **访问页面元素**:jQuery提供了简洁的API来选取和操作DOM元素,如`$(selector)`可以快速选取页面中的元素。 2. **修改页面表现**:通过CSS类的增删和属性的改变,jQuery能方便地改变...
jQuery选择器是其核心特性之一,它极大地简化了DOM元素的选择。例如,`$("#id")`用于选取ID为指定值的元素,`$(".class")`用于选取所有class属性包含指定值的元素,`$("tag")`则选取所有特定类型的元素。这些选择器...
jQuery 1.9.1通过其强大的选择器和事件处理机制,使得开发者能够轻松地利用这些特性。例如,使用jQuery可以便捷地处理HTML5的表单元素,如`<input type="date">`或`<input type="range">`,并通过AJAX技术实现异步...
总结:jQuery.jqGrid是一款功能强大的表格组件,其全面的数据处理能力使得它在Web开发中占据了重要地位。通过深入学习和灵活运用,开发者可以构建出高效、美观的数据管理界面,提升用户体验。理解并熟练掌握jqGrid的...
这篇"jquery三年经验总结"旨在分享作者在使用jQuery过程中积累的知识和经验,帮助初学者或有一定基础的开发者更好地理解和运用jQuery。 首先,jQuery的核心特性包括选择器、DOM操作和事件处理。选择器类似于CSS,但...
总结来说,jQuery 1.4.4.min.js是jQuery的一个经典版本,它以其高效、易用的特性在Web开发中发挥了重要作用。尽管现在有更新的版本,但对于那些依赖旧代码库或者对兼容性有特殊要求的项目,1.4.4仍然是一个可靠的...
随着时间的推移,jQuery不断进化,1.x系列的更新主要集中在性能优化、新特性的添加以及对新浏览器的兼容性支持。例如,jQuery 1.4引入了更多的DOM操作方法,如`.detach()`用于安全地移除元素而不丢失绑定的事件,...
总结来说,jQuery 1.4作为一款强大的JavaScript库,不仅提供了丰富的功能,还注重性能和易用性,使得前端开发效率大大提高。无论你是初学者还是经验丰富的开发者,jQuery 1.4都是值得学习和使用的工具。通过深入理解...
jQuery 诞生于 ECMAScript 3 (ES3) 时代,但随着 JavaScript 语言的发展(如 ES6, ES7, ES8...),jQuery 也不断更新以兼容新特性。然而,jQuery 并不完全等同于 JavaScript,它更专注于提供一套统一且易用的工具集...
总结,jQuery是一个功能强大且易用的JavaScript库,它极大地简化了前端开发工作。通过理解jQuery的选择器、对象模型、DOM操作、事件处理、动画和Ajax功能,开发者可以更高效地构建动态、响应式的Web应用。虽然现代...
总结来说,jQuery通过其高效、易用的特性,改变了JavaScript开发的格局,成为Web开发领域不可或缺的一部分。通过深入学习和实践,开发者可以更好地利用jQuery提升工作效率,构建出更富交互性的Web应用程序。