jQuery技术

jQuery 1.9升级指南 WEB前端开发(2)

字号+ 作者:H5之家 来源:H5之家 2017-08-18 14:08 我要评论( )

当用户点击一个复选框或单选按钮时,如果节点上没调用event.preventDefault(),事件处理程序中会根据复选框或单选按的当前状态判断并且得到它的新状态。因此,例如,如果用户点击一个未选中的checkbox,事件处理程序

当用户点击一个复选框或单选按钮时,如果节点上没调用event.preventDefault(),事件处理程序中会根据复选框或单选按的当前状态判断并且得到它的新状态。因此,例如,如果用户点击一个未选中的checkbox,事件处理程序将选中(checked)这个checkbox。1.9之前,.trigger(“click”) 或 .click()任何一个将触发一个合成事件,根据用户点击行为,我们可以看到checkbox与实际checked属性相反的状态。在1.9中修复了这个bug,用户行为会得到相应的状态。

focus事件触发顺序

当用户再表单元素上点击或者按tab键,使元素获取焦点,浏览器首先在焦点元素上触发一个blur(失去焦点)事件,然后在新元素上触发一个focus(获取焦点)事件。在1.9之前,使用.trigger(“focus”) 或 .focus() 绑定一个focus事件,新元素将触发一个focus事件,然后触发先前焦点元素的blur事件,1.9已修正此问题。

如果目标元素没有获取焦点并且可以成功的获取焦点(译者注:比如disabled被禁用的表单元素获取不到焦点),那么使用DOM原生的focus事件,浏览器只访问focus事件处理程序。jQuery总是调用.trigger(“focus”) 或 .focus()绑定的处理程序,无论元素是否获取焦点。在jQuery 1.9中还是这样处理的。和DOM的.focus()方法不同之处在于,在许多情况下,元素已经获取焦点或者元素被禁用,DOM的.focus()方法不会调用事件处理程序。

不幸的是,所有版本的Internet Explorer(6-10)触发焦点事件是异步的。当你在IE中使用.trigger(“focus”),jQuery无法“预知”异步focus事件以后会发生什么。所以它总是会触发一个自己的focus事件,以确保功能正常。这可能会造成focus事件重覆执行,建议改用DOM内建的focus()较单纯,例如: $(“#boo”).get(0).focus()。

译者注:具体查看API

jQuery(htmlString)与jQuery(selectorString)

在1.9以前,如果一个字符串中有任何HTML标签,那么这个字符串将被认为是一个HTML字符串。这有可能造成意外的代码执行和拒绝有效的选择器字符串。 1.9开始,以一个小于号(“<”)字符开头的字符串才被认为是HTML字符串。Migrate(延迟)插件可以恢复到1.9以前的行为。

如果一个字符串被认为是HTML,但可能会以不是一个HTML标签的任意文本开始,将它传递给jQuery.parseHTML()将返回一个DOM节点数组表示的标记。我们可以通过它来创建一个jQuery集合,例如:$($.parseHTML(htmlString))。例如,在处理HTML模板方面这被认为是最佳实践。简单使用文字字符串,如$(“<p>Testing</p>”).appendTo(“body”)不会受此影响。

总之:HTML字符串传递给jQuery(),除了以一个小于号(“<”)字符开始以外的其他字符串都将被解释为一个选择器。因为字符串通常不能被解释为一个选择器,最有可能的结果是Sizzle选择器引擎错误抛出的“无效的选择器语法”。使用jQuery.parseHTML()来解析任意的HTML。

使用jQuery Migrate(迁移)插件,如果该字符串传递给$(),“看起来像HTML”,它会使用旧的规则来确定。

译者注:具体查看API

.data()中名称包含点(“.”)改变

.data()有一个未公开并且令人难以置信的非高性能监控值的设置和获取,1.9中被移除。这已经影响到了包含点的数据名称的解析。从1.9开始,调用 .data(“abc.def”)只能通过名称为“abc.def”检索数据,原本还可以通过“abc”取得的技巧已被取消。需要注意的是较低级别的jQuery.data()方法不支持事件,所以它并没有改变。即使使用jQuery Migrate(迁移)插件也恢复不到原来的行为。

译者注:具体查看API

脱离文档节点在jQuery集合中的顺序

对于许多版本,几乎所有的jQuery的方法,返回一组新的节点集合,这个集合是一个使用他们在文档中顺序排序的结果集。(有几个方法,如.parents()返回的结果是他们在文档反向顺序排序,但在1.9中这些例外情况已经记录并没有改变。)

在1.9之前,若jQuery集合中混杂DOM的节点及未放进DOM的脱离文档节点,则可能出现不可预期的随机排序。从1.9开始,在文档中的连接节点都总是按文档顺序放置在集合的开头,脱离文档节点被放置在他们的后面。即使使用jQuery Migrate(迁移)插件也恢复不到原来的行为。

加载并且执行HTML内容中的scripts

在1.9之前,任何接受HTML字符串的方法(例如,$()、.append()、.wrap())会执行HTML字符串中所包含的Script,并且将它们从文档中移除,以防止他们再次被执行。在特殊情况下,使用这些方法一个脚本可能会被移除并重新插入到文档中,比如.wrap()。从1.9开始,插入到文档的脚本会执行,但仍然保留在文档中并且标记为已经被执行过的,这样它们就不会被再次执行,即使它们被删除并重新插入。

尽管这种变化,在HTML标记中混合可执行的JavaScript是非常不好的习惯;它对设计,安全性,可靠性和性能有影响。例如,外部脚本标签包含在HTML中同步地取出,然后评估执行,这可能需要大量的时间。没有任何接口通知这些脚本何时何地加载,或者当有错误产生的时候获得纠正提示。

试图通过克隆一个现有的脚本标签加载和注入脚本,克隆到文档将不再起作用,因为克隆的脚本标记已经被标记为已执行。要加载一个新的脚本,建议使用jQuery.getScript()代替。

.attr() 和 .prop()对比

译者注:@caikan的建议,在这里将property翻译成了“对象属性”,以区别attributes(标签属性),后面括号标注了原文。

jQuery 1.6 介绍了.prop()方法设置或获取节点上的对象属性(property),并且不建议使用.attr()方法设置对象属性(property)。然而版本一直到1.9,在某些特殊情况下继续支持使用.attr()方法。当选择器是用来区分标签属性(attributes)和对象属性(properties)时,这种行为在向后兼容的命名方面会引起混乱。

例如,一个复选框的布尔标签属性(attributes),如checked和disabled受到这种变化的影响。”input[checked]“的正确行为是选择有checked属性的复选框,不管是它的字符串值,还是它当前的状态。与此相反, “input:checked” 选择当前checked属性的布尔值(true或false)为true的复选框,例如当用户单击复选框时,会受到影响。1.9之前版本这些选择器有时不选择正确的节点。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 小教程:自己创建一个jQuery长阴影插件

    小教程:自己创建一个jQuery长阴影插件

    2017-08-19 12:02

  • 标签:jQuery

    标签:jQuery

    2017-08-18 13:01

  • jQuery基础 (一) 样式篇

    jQuery基础 (一) 样式篇

    2017-08-18 12:01

  • jQuery标签选项卡切换代码

    jQuery标签选项卡切换代码

    2017-08-18 12:00

网友点评