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

关于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属性。

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数,其工作方式也有所差异。

返回被选元素的属性值。

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)。

提示:如需检索 HTML 属性,请使用 attr() 方法代替。

提示:如需移除属性,请使用 removeProp() 方法。

jQuery中,用于获取属性的方法,主要是基于prop方法的,我们经常使用的是attr方法,不过在attr方法中,有时候会出现一些问题的,这里就看下jquery的API中attr的介绍,主要内容翻译自jQuery的API介绍:attr()

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属性取值的结果显示:

根据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这句话,没有理解到

举例:核心代码如下

 1 <body>
 2 <input id="check1" type="checkbox" checked="checked">
 3 <label for="check1">Check me</label>
 4 <p></p>
 5 <script>
 6 $( "input" )
 7   .change(function() {
 8     var $input = $( this );
 9     $( "p" ).html( ".attr( ‘checked‘ ): <b>" + $input.attr( "checked" )     + "</b><br>" +".prop( ‘checked‘ ): <b>" + $input.prop( "checked" )     + "</b><br>" +".is( ‘:checked‘ ): <b>" + $input.is( ":checked" )     + "</b>" );}).change();
10 </script>

查看原页面代码,可以点击: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 + "</b>‘)" );
});
</script>
</body>


&lt;br /&gt;

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

http://www.zhangyunling.com/?p=38

时间: 2024-10-07 07:50:45

jquery中attr方法和prop方法的区别的相关文章

jQuery的attr方法和prop方法的区别及相关bug处理

以下是jQuery API文档对attr方法和prop方法的概述: attr(name|properties|key,value|fn):Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.(获取匹配元素集合中的第一个元素的属性值,或为每一个匹配元素设置一个或多个属性) p

jquery里的attr()方法和prop()方法的区别

在jq的高版本里出现了prop()方法,那么attr()和prop()的区别在哪呢?这两者分别在什么情况用呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. eg:<a href="http://www.baidu.com" target="_blank">哈哈</a> 像href.target这样的属性是html元素本身就带有的固有属性,在处理时

ExtJS中listener方法和handler方法的区别

listener方法和handler方法的区别在文档中的说明的太玄乎了,看不懂 listeners监听能够对一个click Event事件添加任意多个的事件响应处理函数 而handler处理只能够通过处理函数一次处理点击响应 Ext.create('Ext.Button', { text : 'Dynamic Handler Button', renderTo: Ext.getBody(), handler : function() { // this button will spit out

jquery attr方法和prop方法获取input的checked属性问题

问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase <input type="checkbox" id="selectAll" onclick="checkAll()">全选 function checkAll

jQuery中bind方法和live方法区别解析

Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡(和其它浏览器方式不同). 以下给出一种通用的方式来实现阻止事件的冒泡,该通用方式接受一个参数[传递到事件处理程序中的事件对象],该函数处理取消事件冒泡的两种方式:标准的W3C方式和非标准的IE方式: 什么是事件冒泡[又称为事件传播]:当我们点击一个元素时,它会触发bind在该元素上的click事件

Jsp 和 servlet中Get方法和Post方法的区别

看了很久的javaEE 这里是我一直的困惑,我在这里总结一下. 1:请求数据的大小不同. 因为get请求的数据是要追加到URL中,而URL的数据量一般不能超过2K,所以用get请求的方法对数据的大小有限制.而post请求方法是把数据放在消息体中,所以理论上对数据量没有限制.(但是实际操作中也不能能太大) 2:安全性不一样 因为get请求的数据是追加在URL中,外部用户能很方便的看到,从这个角度上来讲不安全.而post方法因为是讲请求放在消息体中,不会直接在URL中显示所以从这个角度来说数据会比较

转:Scanner中nextLine()方法和next()方法的区别

原文地址:https://blog.csdn.net/hello_word2/article/details/54895106 总结:next() 读取第一个 空白符之前(不包括空白符)的内容,nextline() 读取 第一个回车之前(不包括回车)的内容 我们在使用扫描器Scanner时,遇到了字符串肯定会使用API中定义好的next()和nextLine()方法.两者一个是能读取空格一个是不能读取空格就像下面的样子 当我们把二者交换位置,再来看一下效果 那么这是为什么呢?我们分别看一下API

Hibernate中get方法和load方法的区别

1.从返回结果上对比: load方式检索不到的话会抛出org.hibernate.ObjectNotFoundException异常: get方法检索不到的话会返回null: 2.从检索执行机制上对比: load方法的执行则比较复杂首先查找session的persistent Context(一级缓存)中是否有缓存,如果有则直接返回,如果没有则去查找二级缓存,如果有则返回,如果没有则判断是否是lazy,若不是lazy,直接访问数据库检索,查到记录返回(并且同时在二级缓存中存放查到的数据方便下次使

hibernate中懒加载和急加载的区别,以及hibernate中get()方法和load()方法的区别

* 懒加载在加载一个实体的时候,不会马上从数据库中加载,即从数据库中加载到内存.而急加载在加载一个实体时,会立即从数据库中查询,与其关联的类也会被同时查询. 急加载就会很快,因为在第一次加载的时候,已经帮我们全部加载好了.而懒加载则会相对慢一些,因为在我门需要查询的时候,它才会执行sql操作. 所以懒加载的优点是占用内存小,执行速度慢;急加载是执行速度快,占用内存高 hibernate的get()he load()方法在执行的时候又很大的区别, 执行get()方法会把所有的基本数据全部加载, 而