复选框是网站开发的时候经常用到的网页标签之一,常见的在页面上对复选框的操作包括取值和修改复选框的状态。在jquery中,常见的操作标签的值得函数为attr,然而在操作复选框的时候,通常采用的却是prop,因为关于复选框的值,来自于properties而不是attributes。

 

很多人对Javascript中的properties和attributes都很迷惑,在英文中这两个词属同义词。不光是我们,浏览器中的IE8之前的版本包括IE8的兼容模式,对它们同样很迷惑,这是我的一篇翻译文章。

英文原文请看Attributes and custom properties。这篇文章中的代码示例在原文中都可以运行。需要运行代码看结果的同学们,请到原文中运行。

注:我在这篇文章里将attribute翻译成属性,将property翻译成特性,自认为这是严谨的。

一个DOM节点可能既有属性也有特性。人们经常混淆这两个概念,因为它们相互关联但的确又是两个不同的东西。

特性

DOM节点也是个对象,所以它能像Javascript的对象一样,存储一些自定义的特性和方法。

下面这个例子将myData这个对象作为一个特性赋给了document.body。

document.body.myData = { name: 'John' } alert(document.body.myData.name) // John document.body.sayHi = function() { alert(this.nodeName) } document.body.sayHi() // BODY

自定义的特性和方法只在javascript中可见,不影响HTML。

与此同时,自定义的特性可以用for...in遍历到,它们和原生的特性混在一起。

document.body.custom = 5 var list = [] for(var key in document.body) { list.push(key) } alert(list.join('\n'))

自定义的DOM对象特性有以下特点:

  • 可能有任意值,特性名是大小写敏感的
  • 不影响HTML

属性

DOM节点提供以下获取HTML属性的标准方法:

* elem.hasAttribute(name)-----检查属性是否存在 * elem.getAttribute(name)-----获取属性值 * elem.setAttribute(name,value)-----设置属性 * elem.removeAttribute(name)-----移除属性 敬告:这些属性在IE<8和IE8的兼容模式下是被误解的: * 只存在getAttribute和setAttribute方法 * 这些方法实际上修改的是DOM对象的特性,而不是属性 * 属性和特性在IE<8的环境中是被合并了的。有时这引发奇怪的结果,但是我们在这里讨论的管理属性的方法工作良好。

相对于特性,属性有以下特点:

* 可能只接受字符串 * 名字大小写不敏感,因为HTML的属性就是大小写不敏感的 * 它们可以出现在innerHTML里(除了更老版本的IE) * 你可以通过元素的attributes伪数组特性列举所有属性

举个例子,让我们看看下面的HTML片段:

 <body> <div about="Elephant" class="smiling"></div> </body>

下面的这个例子设置属性。

<body> <div about="Elephant" class="smiling"></div> <script> var div = document.body.children[0] alert( div.getAttribute('ABOUT') ) // (1) div.setAttribute('Test', 123) // (2) alert( document.body.innerHTML ) // (3) </script> </body>

当你运行上面的代码的时候,请注意下面几点:

* ```getAttribute('ABOUT')```用大写的属性名,不过这没有关系 * 你可以试着给属性赋除字符串外的其他基本类型值,但它们都会被转化成字符串。如果是对象的话,也会被自动转化成字符串。但在IE下对象可能会有问题,所以还是坚持用基本类型值。 *innerHTML中包含了新加的"test"属性

特性和属性的同步性

每种类型的DOM节点都有其标准的特性。

例如,'A'标签:Interface HTMLAnchorElement

它有"href"和"accessKey"还有其他特殊的属性。它从HTMLElement继承了"id"和其他属性。

标准的DOM特性和属性是同步的
id

比如,浏览器同步了"id"属性和"id"特性

<script> document.body.setAttribute('id','la-la-la') alert(document.body.id) // la-la-la </script>
href

同步性并没有保证值的一致,让我们一"href"为例。

<a href="#"></a> <script> var a = document.body.children[0] a.href = '/' alert( 'attribute:' + a.getAttribute('href') ) // '/' alert( 'property:' + a.href ) // IE: '/', others: full URL </script>

这是因为,href根据W3C的定义必须是格式良好的链接。

有一些其他的属性,是同步的,但值却不同。例如,input.checked:

<input type="checkbox" checked> <script> var input = document.body.children[0] alert( input.checked ) // true alert( input.getAttribute('checked') ) // empty string </script>

input.checked特性的值要么是true要么是false,但是这个属性的值就是你赋给它的值。

value

也有内建特性是单向同步的

比如说,input.value可以从属性上同步过来:

<input type="checkbox" checked> <script> <body> <input type="text" value="markup"> <script> var input = document.body.children[0] input.setAttribute('value', 'new') alert( input.value ) // 'new', input.value changed </script> </body>

但是,这个属性却不能从特性那同步过来:

<body> <input type="text" value="markup"> <script> var input = document.body.children[0] input.value = 'new' alert(input.getAttribute('value')) // 'markup', not changed! </script> </body>

当特性的值更新后属性还是保持着原始的值。比如当一个客户输入些东西的时候,原始的值可以被用来检车input标签的值是否发生了变化,或者用于重置的时候。

class/className

命名异常:"class"属性和className特性的联系

因为,在Javascript中"class"是一个保留字,与"class"属性相关联的特性是className.

<body> <script> document.body.setAttribute('class', 'big red bloom') alert( document.body.className ) // ^^^ </script> </body>

注意,上面的例子在IE<9中不好用,因为在它们中特性和属性被混淆了。

但是,我们也能和它和平共处,方法就是总是用className特性管理classes,而不是属性。

和老版本IE玩出乐趣来

首先,IE<9中,同步了所有特性和属性

document.body.setAttribute('try-in-ie', 123) alert( document.body['try-in-ie'] === 123 ) // true in IE<9

注意,这里的123没有被转化成字符串。

第二,在IE<8(或者在处于IE7兼容模式的IE8中)特性和属性是同一个这样就引发了一个可笑的结果。

比如,特性名是大小写敏感的,而属性不是。如果浏览器认为它们是同一个值的话,那么下面这段代码的结果又如何呢?

document.body.abba = 1 // assign property (now can read it by getAttribute) document.body.ABBA = 5 // assign property with another case // must get a property named 'ABba' in case-insensitive way. alert( document.body.getAttribute('ABba') ) // ??

浏览器会跳过这个陷阱而默认采用第一个值。它也为getAttribute提供了第二个可选的只有IE支持的参数,这个参数标示了是不是大小写敏感。具体请看MSDN getAttribute

在所有的浏览器中,除了ie<9,"class"属性可用来更改class。所以,任何时候都不要用attribute,要用className.

为了与IE和平相处,要正确地使用属性。 换句话说,尽量使用特性,除非你真的需要属性的时候。 仅限以下情况,你可能真的需要属性: * 为了获取一个HTML自定义属性,因为它和DOM的特性不同步 * 为了获取标准HTML属性的初始值,像<input value="...">
作为DOM节点的Attributes

属性同样可以通过elem.attributes集合获得。

在attributes集合中,每个属性都被一个特殊的DOM节点代表。它有名字,值和其他特性。

比如:

<span style="color:blue" id="my">text</span> <script> var span = document.body.children[0] alert( span.attributes['style'].value ) // "color:blue;" alert( span.attributes['id'].value ) // "my" </script>

对了,在IE<8和IE8的兼容模式中"style"属性 会暴走,猜猜为什么?

属性的DOM节点不是文档树的一部分,它们只能通过它们的元素获得。

总结

attributes和properties都是DOM模型的特性。

Properties

Attributes

Any value

String

Names are case-sensitive

not case-sensitive

Don’t show up in innerHTML

Visible in innerHTML

Standard DOM properties and attributes are synchronized, custom are not.

Attributes are mixed with properties and screwed up in IE<8, IE8 compat. mode.

如果你想在HTML中使用自定义属性,记得data-*属性在HTML5中可用。详情查看HTML5标准Custom data attributes

现实中,98%我们都在用DOM对象的特性。

只有两种情况,你应该用属性

* 一个自定义的HTML属性,因为它和DOM特性不同步 * 为了获得一个内奸的HTML属性,这个属性和它特性不同步,并且你确定需要这个属性。

例如,value in input.

 

 

原文地址:http://www.yuanlairc.com/program/propandattr.html

jquery 使用attr() 函数对复选框无效的原因,javascript那些事儿——properties和attributes的更多相关文章

  1. jquery 使用attr() 函数对复选框无效的原因

     复选框是网站开发的时候经常用到的网页标签之一,常见的在页面上对复选框的操作包括取值和修改复选框的状态.在jquery中,常见的操作标签的值得函数为attr,然而在操作复选框的时候,通常采用的却是pr ...

  2. jQuery分别获取选中的复选框值

    function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(func ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  4. javascript 操作复选框无效

    <script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...

  5. jquery 1.9版本下复选框 全选/取消实现

    http://zhangzhaoaaa.iteye.com/blog/1914497 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tran ...

  6. 11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  7. jQuery中prop()函数控制多选框(全选,反选)

    今天看了jQuery手册,对prop()函数又多了一点认识,记忆力不好,记录下来. prop() : 获取匹配元素集中第一个元素的值 判断checkbox中的第一个是否被选中: $(":ch ...

  8. Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. jquery如何判断checkbox(复选框)是否被选中(转)

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

随机推荐

  1. 用C++,调用浏览器打开一个网页

    http://blog.csdn.net/heaven13483/article/details/9369029

  2. 【Tsinghua OJ】范围查询(Range)问题

    [问题描述]数轴上有n个点,对于任一闭区间 [a, b],试计算落在其内的点数. [输入]第一行包括两个整数:点的总数n,查询的次数m.第二行包含n个数,为各个点的坐标.以下m行,各包含两个整数:查询 ...

  3. C# asp.net IIS 在web.config和IIS中设置Session过期时间

    有时候在web.config设置sessionState 或者类文件里设置Session.Timeout,在IIS里访问时每次都是达不到时间就超时,原因是因为在IIS中设置了Session的超时时间, ...

  4. 使用inno setup打包程序完整脚本(.net框架检测,重复安装检测)

    ; 脚本由 Inno Setup 脚本向导 生成!; 有关创建 Inno Setup 脚本文件的详细资料请查阅帮助文档! #define MyAppName "小小鸟软件"#def ...

  5. [转]50 Shades of Go: Traps, Gotchas, and Common Mistakes for New Golang Devs

    http://devs.cloudimmunity.com/gotchas-and-common-mistakes-in-go-golang/ 50 Shades of Go: Traps, Gotc ...

  6. magento -- 添加中国省份列表

    magento本身的数据库里不包含中国的省份信息,你可以执行以下的SQL语句来添加 添加到directory_country_region表 INSERT INTO  `directory_count ...

  7. javascript js表示中文日期的经典写法

    <div id="time"> <script>document.getElementById('time').innerHTML=new Date().t ...

  8. MINIX3 进程调度分析

    MINIX3 进程调度分析  5.1MINIX3 进程调度概要  MINIX3 的进程调度还是非常简单的,调度算法是非常短小的,其目的就是体现 了一个简单和高效的设计原则,当然简单和高效其实很难并存, ...

  9. PAT (Basic Level) Practise:1008. 数组元素循环右移问题

    [题目连接] 一个数组A中存有N(N>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(M>=0)个位置,即将A中的数据由(A0A1……AN-1)变换为(AN-M …… A ...

  10. 程序员MM的自白:磨人小妖精之安卓碎片化

    文/腾讯优测 章婉霞 除了crash问题,Android平台的碎片化越来越受到移动开发的关注,且不谈支持Android系统的移动设备早已过万款,屏幕.品牌以及传感器等方面的碎片化问题也困扰着开发者. ...