最近在iteye的新闻中看到jQuery已经更新到了1.6.1。和之前版本的最大变化是增加了.prop方法。但是.prop()方法和.attr()方法,单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。
下面根据这篇博文(javascript:mctmp(0);),简要翻译了.prop()和.attr()的用法:

1、从1.5.2升级到1.6.1

通过介绍新方法.prop()以及.attr()方法的改变,jQuery1.6.1引起了一场关于attributes和properties之间有何区别和联系的激烈讨论。同时,1.6.1也解决了一些向后兼容性问题。当从1.5.2升级到1.6.1时,你不必修改任何attribute代码。

下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使用。然而,正如前面所述,jQuery1.6.1允许你使用.attr()方法就像以前它被使用在所有的情况中一样。

2、发生了什么变化

Attributes模块的变化是移除了attributes和properties之间模棱两可的东西,但是在jQuery社区中引起了一些混乱,因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug,很难维护。jQuery1.6.1对Attributes模块进行了更新,并且修复了几个bug。

特别提到的是,boolean attributes,比如:checked,selected,readonly和disabled在1.6.1中和1.6之前的处理相同。这意味着下面的代码:

Js代码  
  1. $(“:checkbox”).attr(“checked”, true);
  2. $(“option”).attr(“selected”, true);
  3. $(“input”).attr(“readonly”, true);
  4. $(“input”).attr(“disabled”, true);

$(“:checkbox”).attr(“checked”, true);$(“option”).attr(“selected”, true);$(“input”).attr(“readonly”, true);$(“input”).attr(“disabled”, true);

甚至是这样的代码:

Js代码  
  1. if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }

if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }

在1.6.1中没有必要为了保持之前期望的运行结果而发生任何改变。

为了让jQuery1.6中的.attr()方法的变化被理解的清楚些,下面是一些使用.attr()的例子,虽然在jQuery之前的版本中能正常工作,但是现在必须使用.prop()方法代替:

首先,window或document中使用.attr()方法在jQuery1.6中不能正常运行,因为window和document中不能有attributes。它们包含properties(比如:location或readyState),必须使用.prop()方法操作或简单地使用javascript原生的方法。在jQuery1.6.1中,window和document中使用.attr()将被自动转成使用.prop,而不是抛出一个错误。

其次,checked,selected和前面提到的其它boolean attributes,因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上,一个attribute就是以下html中你看到的:

Js代码  
  1. <input type=”checkbox” checked=”checked”>

<input type=”checkbox” checked=”checked”>

boolean attributes,比如:checked,仅被设置成默认值或初始值。在一个checkbox的元素中,checked attributes在页面加载的时候就被设置,而不管checkbox元素是否被选中。

properties就是浏览器用来记录当前值的东西。正常情况下,properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时,boolean properties保持最新。但相应的boolean attributes是不一样的,正如上面所述,它们仅被浏览器用来保存初始值。

Js代码  
  1. $(“:checkbox”).get(0).checked = true;
  2. // Is the same as $(":checkbox:first").prop(“checked”, true);

$(“:checkbox”).get(0).checked = true;// Is the same as $(":checkbox:first").prop(“checked”, true);

在jQuery1.6中,如果使用下面的方法设置checked:

Js代码  
  1. $(“:checkbox”).attr(“checked”, true);

$(“:checkbox”).attr(“checked”, true);

将不会检查checkbox元素,因为它是需要被设置的property,但是你所有的设置都是初始值。

然而,曾经jQuery1.6被释放出来的时候,jQuery团队明白当浏览器仅关心页面加载时,设置一些值不是特别的有用。所以,为了保持向后兼容性和.attr()方法的有用性,我们可以继续在jQuery1.6.1中使用.attr()方法取得和设置这些boolean attributes。

最普通的attributes是checked,selected,disabled和readOnly,但下面是jQuery1.6.1支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表:

Js代码  
  1. autofocus, autoplay, async, checked, controls, defer, disabled,
  2. hidden, loop, multiple, open, readonly, required, scoped, selected

autofocus, autoplay, async, checked, controls, defer, disabled,hidden, loop, multiple, open, readonly, required, scoped, selected

(译者注:大部分都是html5新增的属性)

还是建议使用.prop()方法来设置这些boolean attributes/properties,即使这些用例没有转换成使用.prop()方法,但是你的代码仍然可以在jQuery1.6.1中正常运行。

下面是一些attributes和properties的列表,正常情况下,应该使用其对应的方法(见下面的列表)来取得和设置它们。下面的是首用法,但是.attr()方法可以运行在所有的attributes情况下。

注意:一些DOM元素的properties也被列在下面,但是仅运行在新的.prop()方法中

*例如: window.location
**如果需要在(if needed over) .width()

.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以继续运行,就像1.6之前做的那样)

3、首选用法的概述

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

jquery1.6中的.prop()和.attr()异同的更多相关文章

  1. Jquery学习笔记(5)--jquery1.6中的.prop()和.attr()异同

    jquery1.6中的.prop()和.attr()异同 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop()方法和.attr ...

  2. jQuery中的prop和attr区别

    最近在做一个项目用jq时发现一个问题  在谷歌中可以正常出效果  但是在火狐中就是不行 就是这个prop和attr   之前用的是attr方法   但是在火狐中不出效果  于是特意看了两者的区别 主要 ...

  3. jquery中的prop和attr比较区别

    近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...

  4. JQuery中的prop和attr

    prop和attr都可以用来获取并改变对象的属性, 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 栗子: ...

  5. JQuery1.11版本对prop和attr接口的含义分离导致问题分析

    问题背景 实验中, 在jquery1.7版本, attr("value")  和 val() 接口获取 input 控件的值, 都是一致的, 都是当前控件值. 但是 jquery1 ...

  6. jQuery1.6以上版本prop和attr的区别

  7. jQuery中的prop()和attr()的区别

    1.jQuery中的prop()和attr()的区别 prop()是在jQuery1.6版本之后才有的,在之前一直都是使用attr(), prop()修复了attr()的一些小bug. 2.推荐用法: ...

  8. 【Jquery系列】prop和attr区别

    问题描述 由于prop(property的缩写)和attr(attribute的缩写)翻译成汉语,均有“特性.属性”等意思的原因,导致大家容易混淆分不清,本篇文章将试图从英文含义,中文含义和Jquer ...

  9. jquery中prop()和attr()用法

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

随机推荐

  1. Servlet第一篇(Tomcat)

    Tomcat 什么是Tomcat Tomcat简单的说就是一个运行JAVA的网络服务器,底层是Socket的一个程序,它也是JSP和Serlvet的一个容器. 为什么我们需要用到Tomcat 提供能够 ...

  2. zabbix学习笔记----安装----2019.03.26

    1.zabbix官方yum源地址:repo.zabbix.com 2.安装zabbix server zabbix server使用mysql作为数据库,在zabbix 3.X版本,安装zabbix- ...

  3. XML Linq 学习笔记

    XML如下: <?xml version="1.0" encoding="utf-8"?> <Dishes> <Dish> ...

  4. LeetCode解题录-51~100

    [leetcode]51. N-QueensN皇后    Backtracking Hard [leetcode]52. N-Queens II N皇后 Backtracking Hard [leet ...

  5. 201621123002《JAVA程序设计》第十四周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 用 ...

  6. GUI学习之八——QToolButton的学习总结

    QToolButton提供一个快速的访问按钮,通常在工具栏内使用,一般不显示文本标签而显示图标. 一.按钮的样式风格设置 可以按照下面的风格对按钮进行样式设置 从左到右依次是仅显示图标.仅显示文字.图 ...

  7. MySQL 1053错误 服务无法正常启动的解决方法

    MySQL 1053错误 服务无法正常启动的解决方法 1.右键我的电脑,管理,进入服务 2.右键单击Mysql8 属性,选择登陆  选择此账号  登陆管理员账号

  8. java38

    字符串内存分析 String str = new String("ABCD") 会先在堆中开辟一个空间,然后去常量池(方法区)中寻找是否有该变量,如果有,直接引用常量池中的内容 如 ...

  9. eclipse 安装 maven

    一共需要3个步骤,1 安装maven环境   2  安装eclipse的maven插件   3 配置eclipse的maven环境 1. 安装maven环境 1.1  下载    去网址http:// ...

  10. TJOI2010中位数

    中位数 上面是题目链接. 这一题比较水. 思路非常显然. 用mid查询时,只要返回中间值就行了. 主要就是add操作. 我们肯定不能插在末尾,然后用系统快排,这样只有30分. 那么正确的操作应该是二分 ...