文档章节

jquery中attr方法和prop方法的区别

Lgfei
 Lgfei
发布于 2016/04/20 22:55
字数 2071
阅读 10
收藏 0

1.基本使用方法

attr()的作用:获取匹配到的第一个元素的一个属性值,或者是为所有匹配的元素进行属性赋值。

支持的方法:

.attr(attributeName)

  • 获取匹配到的第一个元素的一个属性值。

  • 输入值attributeName

  • Type:String,需要获取的属性名称

.attr()方法,只能获取匹配到的第一个元素的值,如果你想要获取匹配到的所有的元素的属性值,那么就需要借助jquery中的循环的方法,比如:.each().map();

使用jQuery的.attr()方法,获取元素的属性值有两个最重要的优势:

1:使用简单,它可以直接对一个jQuery对象使用,并且使用过之后可以继续使用其他的jQuery方法。

2:跨浏览器兼容性,有些属性的获取方法在浏览器上不兼容的,甚至于有的在同一浏览器的不同版本之间,都会出现不兼容的问题,.attr()方法降低了这种不兼容性。

注:属性值是一个通常会返回一个字符串,偶尔也会返回类似价值或者数字顺序的值。

注:在IE6,IE7,IE8中,如果你试图去改变一个input元素的type属性,当这个input已经添加到页面时,会抛出一个错误。

在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined。如果你要去恢复或者改变DOM状态值,类似checkedselecteddisabled等表单元素的状态,最好使用.prop()方法。

属性值 VS 状态值

在一些特殊的情况下,属性值和状态值的不同是有很大影响的。在jQuery 1.6之前的版本.attr()方法在恢复一些属性时,有时会把状态值也考虑进去,这样的话,就会导致浏览器的兼容问题。在jQuery 1.6中.prop()提供的方法可以避免恢复状态值,而.attr()方法会恢复状态值。

例如:selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked,和defaultSelected这些属性,就应该使用.prop()方法进行恢复属性值。在jQuery 1.6之前的版本,这些状态值都是可以通过.attr()获取的,虽然获取这些状态值并不是attr的工作范围。这些个状态值和属性是没有任何联系的,它们仅仅是一个状态。

就布尔逻辑型的属性而言,如果我们定义一个这样的HTML的DOM对象。<input type = "checkbox" checked = "checked" />,并且假设这个HTML对象在Javascript中被命名为elem.

看一下它们的使用不同方法对checked属性取值的结果显示:

attr和prop的取值结果对比

根据W3C的规范“checked”属性,是一个布尔逻辑型的属性,这就意味着,如果该属性存在的话,那么它对应的状态值的取值结果是正确的,例如,即使该属性没有值,或者被设置成一个空字符串,或者设置为“false”,对于布尔逻辑型属性来说都是正确的。

然而,关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true"等属性设置,和它的状态值true/false是无关的。,而这里的属性值,事实上只是和defaultChecked的状态值有关,并且只能用来设置checkbox的初始的值。checked的属性值并不会随着checkbox的的状态变化而变化,可是checkbox的状态值却会。因此,为了能更好的跨浏览器的兼容,决定了checkboxchecked的状态要使用状态值进行处理。

例如:

  • if(elem.checked)

  • if($(elem).prop("checked"))

  • if($(elem).is(":checked"))

这些理论,对于那些动态的属性来说,效果是相同的,例如:selectedvalue属性。

补充注释:

在IE9之前的浏览器版本中,使用.prop()方法,设置一个DOM元素的状态值,相较于那些原始的值(数字,字符串,或者布尔逻辑值)是不同的,如果这个DOM元素在被移除文档之前,没有使用.removeProp()移除这个状态值,那么它将会导致内存泄露,如果想要比较安全的在DOM对象上面设置属性值,而又不会导致内存泄露,那么使用.data这句话,没有理解到

举例:核心代码如下

  • <body>

  • <input id="check1" type="checkbox" checked="checked">

  • <label for="check1">Check me</label>

  • <p></p>

  • <script>

  • $( "input" )

  •         .change(function() {

  •                 var $input = $( this );

  •                 $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "
    " +".prop( 'checked' ): " + $input.prop( "checked" ) + "
    " +".is( ':checked' ): " + $input.is( ":checked" ) + "" );}).change();

  • </script>

&lt;br /&gt;

查看原页面代码,可以点击:attr-prop

这里就不再举例说明attr的正常使用方法了,如果你有兴趣,可以点击查看:实例demo

2:使用attr进行赋值操作。

.attr(attributeName,name)

  • attributeName:String,需要设置的属性名称

  • String or Number, 需要设置的属性的属性值。

.attr(attributes)

  • attributes:Object, 需要设置的属性组成的一个对象。

.attr(attributeName,function(index,attr))

  • attributeName:String, 设置的属性名称。

  • function(index,attr):Function,

函数的返回值设置为属性的值,this表示当前选中的元素,接收的第一个参数是表示,当前选中的元素中的位置的序列(从0开始),第二个参数为该元素,对于该属性的原来的属性值。

使用.attr()方法去设置属性值是非常方便的,尤其是需要设置多个属性,或者需要设置的属性值是一个function的返回值时,看下面的image标签:

  • <img id=”greatphoto” src=”brush-seller.jpg” alt=”brush seller”\>

设置一个简单的属性,使用.attr()可以简单的根据属性名和属性值的改变alt属性的值。

  • $( “#greatphoto” ).attr( “alt”, “Beijing Brush Seller” );

也可以使用同样的方法,添加一个新的属性:

  • $( “#greatphoto” ).attr( “title”, “Photo by Kelly Clark” );

也可以一次设置多个属性:改变属性alt的值,同时添加新的属性title

  • $( “#greatphoto” ).attr({

  •     alt: “Beijing Brush Seller”,

  •     title: “photo by Kelly Clark”

  • });

当设置多个属性时,属性名的引号是可以省略的。

警告:当设置class属性时,引号是不可以被省略的。

注:jQuery禁止改变<input><button>元素的type属性,如果强制去改变,在任何浏览器下,这都会抛出一个异常,这是因为,在IE浏览器下,type属性是不可被修改的。所以就在所有的浏览器下,都不能进行设置,保存兼容性的统一。

计算后的属性值:

通过使用function设置属性,可以通过其他的属性值进行计算之后,再进行属性赋值操作,例如:基于一个已有的属性连接处一个新的属性值。

  • $( “#greatphoto” ).attr( “title”, function( i, val ) {

  •     return val + ” – photo by Kelly Clark”;

  • });

这种通过function计算属性值的方法在一次性对多个元素设置不同的属性值时,尤其的有效。

例子:为页面中的所有img设置一些属性,核心代码如下:

  • <body>

  • <img>

  • <img>

  • <img>

  • <div><b>Attribute of Ajax</b></div>

  • <script>

  • $( "img" ).attr({

  •         src: "/resources/hat.gif",

  •         title: "jQuery",

  •         alt: "jQuery Logo"

  • });

  • $( "div" ).text( $( "img" ).attr( "alt" ) );

  • </script>

  • </body>

&lt;br /&gt;

根据div在页面中的position,设置它的id属性。

  • <body>

  • <div>Zero-th <span></div>

  • <div>First <span></span></div>

  • <div>Second <span></span></div>

  • <script>

  • $( "div" )

  •         .attr( "id", function( arr ) {

  •                 return "div-id" + arr;

  •         })

  •         .each(function() {

  •                 $( "span", this ).html( "(id = '<b>" + this.id + "')" );

  • });

  • </script>

  • </body>

&lt;br /&gt;

OK,这里就暂时叙述到这里了,如果你不明白为什么.attr()的取值和.prop()的取值有这个差别,那么就先看看前一篇文章,js原生操作HTML对象的属性区别,然后再去看看jquery源码中的,.attr()方法和.prop()方法的实现吧。

相信你会有更进一步的了解的,感谢您能阅读本文,如果有任何意见,欢迎提出,非常感谢!

本文地址:http://www.zhangyunling.com/?p=38


本文转载自:http://www.zhangyunling.com/?p=38

Lgfei
粉丝 0
博文 9
码字总数 2000
作品 0
深圳
程序员
私信 提问
jquery中attr和prop的区别

jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。这里谈谈...

别人说我名字很长
2015/03/15
218
2
jQuery 1.6 正式版发布

jQuery 1.6 正式版发布了,重写了 Attribute 模块和大量的性能改进。 新版本中的部分重要改进: attr()、val()和data()方法有了更好的性能; 在attr()方法中支持Boolean属性; 添加了钩子函数...

红薯
2011/05/03
9K
27
奇葩问题——jquery操作checkbox的 checked属性

最近做checkbox,遇到一个奇葩问题,如下: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="jquery-1.9.1.js"></......

seth_y
2014/04/16
69
0
jQuery中attr和prop方法的区别

相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties)。只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为w...

_World
2015/01/18
148
0
jquery版本间兼容性:checkbox选中状态

最近在学习Jquery,发现attr不太好用,从网上搜了下终于知道其原因,记下备查。 以下为以为网友在js贴吧的内容: 以<input type="checkbox" id="all"/>为例子取值的例子 $("#all").attr("ch......

北方攻城师
2014/08/05
260
0

没有更多内容

加载失败,请刷新页面

加载更多

Kafka再平衡机制详解

所谓的再平衡,指的是在kafka consumer所订阅的topic发生变化时发生的一种分区重分配机制。一般有三种情况会触发再平衡: consumer group中的新增或删除某个consumer,导致其所消费的分区需要...

爱宝贝丶
10分钟前
5
0
element 验证 请输入大于0的整数

data() { var validatePass = (rule, value, callback) => { // if (value <= 0) { // callback(new Error('请输入大于0的整数')); // } else { // c......

沉迷代码我爱学习
21分钟前
3
0
报表工具花钱or开源?我对比了这6个工具

近一年都在处理报表问题,调研了不少报表工具,也开发了适合公司业务的报表应用。分享一些关于如何选择报表工具的个人观点,希望对你有参考作用。 对于大部分企业来说,能花时间和人力去开发...

帆软
21分钟前
2
0
自建redis笔记--Redis cluster搭建

Redis cluster搭建 2018年十月 Redis 发布了稳定版本的 5.0 版本,推出了各种新特性,其中一点是放弃 Ruby的集群方式,改为 使用 C语言编写的 redis-cli的方式,是集群的构建方式复杂度大大降...

北极之北
21分钟前
2
0
分享一个在caffe中实现的yolo层

这是别人实现的,是我移植到cc的cpu实现,可以实现caffe中使用yolo3,但是我感觉实际效果不如darknet 好点 template <typename Dtype>inline Dtype sigmoid(Dtype x){return 1. / (1. ...

开飞色
23分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部