• 电话咨询
  • 400-0731-856

最新活动

  • 初中学什么好
  • 高中学什么好
  • 男生学电脑
  • 女生学电脑

当前位置:主页 > 硅谷新闻 > 知识教程 > > jQuery新特性总结 > 正文

jQuery新特性总结

2017-11-23 作者:admin来源:未知 点击:

$(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这种方法会刷新和重新赋予绑定操作,所以一定程度上更为全面。

 

示例:

//绑定加载更多事件

Js代码  收藏代码
  1. $(document).on('click''.vCommit'function (e) {  
  2.     e.preventDefault();  
  3.     saveTopic();  
  4. });  

 

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

 
硅谷学院专业职业规划师为你提供更多帮助【在线咨询】

地址:长沙市岳麓区学士路339号 邮编:410208 电话:400-0731-856

湘ICP备17003047号

湖南硅谷云教育科技有限公司 版权所有 Copyright (c) 2012-2018 All Rights Reserved.