jQuery学习之prop和attr的区别
1.attr() :默认保存的是浏览器的初始值 prop()保存的是更新的值
2.下面的是首用法,但是.attr()方法可以运行在所有的attributes情况下。
注意:一些DOM元素的properties也被列在下面,但是仅运行在新的.prop()方法中
.prop()方法应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。
3.
注意事项
1、如果通过prop()
函数更改<input>和<button>元素的type
属性,在多数浏览器上将会抛出一个错误,因为该属性一般不允许在后期更改。
2、如果使用prop()
函数操作表单元素的checked
、selected
、disabled
等属性,如果该元素被选中(或禁用),则返回true
,否则(意即HTML中没有该属性)返回false
。
3、prop()
函数还可以设置或返回DOM元素的Element
对象上的某些属性,例如:tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。
4、在IE9及更早版本中,如果使用prop()
函数设置的属性值不是一个简单的原始值(String、Number、Boolean),并且在对应的DOM元素被销毁之前,该属性没有被移除,则可能会导致内存泄漏问题。如果你只是为了存储数据,建议你使用data()函数,以避免内存泄漏问题。
下面这段HTML代码为例:
<div id="n1">
<p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
<input id="n3" name="order_id" type="checkbox" value="1">
<input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>
我们编写如下jQuery代码:
var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function // prop()设置的属性也是针对元素(Element对象),因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer // 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型
$n2.prop( {
prop_b: "baike",
prop_c: 18,
site: { name: "CodePlayer", url: "http://www.365mini.com/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.365mini.com/ // 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
return !oldValue;
});
学习链接:1. http://blog.sina.com.cn/s/blog_655388ed01017cnc.html
2.http://www.365mini.com/page/jquery-prop.htm http://www.365mini.com/page/jquery-attr.htm
3.http://www.tuicool.com/articles/3uuQRr6
4.http://www.365mini.com/page/jquery-attr-vs-prop.htm
jQuery学习之prop和attr的区别的更多相关文章
- jQuery学习之prop和attr的区别示例介绍
1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( ...
- jquery中的prop和attr比较区别
近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...
- 【Jquery系列】prop和attr区别
问题描述 由于prop(property的缩写)和attr(attribute的缩写)翻译成汉语,均有“特性.属性”等意思的原因,导致大家容易混淆分不清,本篇文章将试图从英文含义,中文含义和Jquer ...
- jQuery的prop和attr的区别,及判断复选框是否选中
jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...
- jquery里prop和attr的区别
本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...
- jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
- 关于jQuery表单选择中prop和attr的区别。
今天用jQuery学习表单这一章节的内容,再次遇到表单全选时,不能进行第二次全选的情况.反复查看测试仍然找不到是什么原因.后来在网上查到原来是jQuery1.6以后的版本用到的是prop.用attr的 ...
- jQuery中的prop和attr区别
最近在做一个项目用jq时发现一个问题 在谷歌中可以正常出效果 但是在火狐中就是不行 就是这个prop和attr 之前用的是attr方法 但是在火狐中不出效果 于是特意看了两者的区别 主要 ...
- prop与attr的区别
与prop一样attr也可以用来获取与设置元素的属性. 区别在于,对于自定义属性和选中属性的处理. 选中属性指的是 checked,selected 这2种属性 1. 对于自定义属性 attr能够获取 ...
随机推荐
- The Four Stages of Recovering a Project
If a project is in trouble, the project manager needs to work to recover it and get the schedule bac ...
- shell 统计GMT0 时区的数据
和某个供应商核对数据,对方是GMT+0时区,我方报表默认北京时间,无法修改为GMT0, 对excel中按照小时级别的数据导出到excel处理,然后转为文本文件,shell转为GMT0进行统计: 前期处 ...
- Infinity loop in cursor iteration
原始代码如下: begin DECLARE @SQL_STMT NVARCHAR(300), @V_CLIENT_ID INT, @V_PGNAME VARCHAR(1000), @V_LOGID I ...
- JavaScript:单选钮的事件处理
单选按钮事件: 单选钮属于多选一的处理流程,但是单选钮由于也是HTML元素,所以对于JavaScript而言也表示对象. 注意:单选钮的特点是一定要需要名相同才可以实现,所以此处如果名字相同,那么就是 ...
- [GDAL]GEOS和Proj4编译
1.下载源码 geos-3.4.2.tar.bz2 http://trac.osgeo.org/geos/ proj-4.8.0.zip http://trac.osgeo.org/proj ...
- nsstring基本数据类型的包装类
// // main.m // 10-基本数据类型的包装类 // // Created by apple on 14-3-20. // Copyright (c) 2014年 apple. A ...
- Oracle 10046跟踪事件使用方法
1.开启10046跟踪事件 alter session set events '10046 trace name context forever, level 12'; 如果想更容易标识trace文件 ...
- 自动档车的P档和N档的区别
P档时,驻车齿轮在变速箱内被部分锁死,所以此时平地上不踩刹车,车辆有一定的驻车效果.N档就是空档,发动机与传动轴在变速器位置彻底分离,没有连接.因此P档适合停车和驻车,就是到地方了,要熄火时挂P档,拉 ...
- Java基础之处理事件——添加菜单图标(Sketcher 8 with toolbar buttons and menu icons)
控制台程序. 要为菜单项添加图标以补充工具栏图标,只需要在创建菜单项的Action对象中添加IconImage对象,作为SMALL_ICON键的值即可. // Defines application ...
- Redis Sets
Sets Sets 就是一个集合,集合的概念就是一堆不重复值的组合.利用Redis提供的Sets数据结构,可以存储一些集合性的数据,比如在微博应用中,可以将一个用户所有的关注人存在一个集合中,将其所有 ...