Jquery学习之新特性详解

本文和大家分享的主要是jquery 中的一些新特性，一起来看看吧，希望对大家学习jquery有所帮助。

　　$(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();

　　});

　　 http://www.jquerycn.cn/a_5346

　　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 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空。

来源：网络

Jquery学习之新特性详解

热门帖子

Swift 教程

最新帖子

Xcode 9.4下载