jQuery技术

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

字号+ 作者:H5之家 来源:H5之家 2016-09-12 17:00 我要评论( )

张运领的个人博客_web前端技术文章_jquery中attr方法和prop方法的区别 | 前端学习

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

1.基本使用方法

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

支持的方法:

.attr(attributeName)

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

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

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

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

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

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

在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined。如果你要去恢复或者改变DOM状态值,类似checked,selected,disabled等表单元素的状态,最好使用.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的取值结果对比

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

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

例如:

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

补充注释:

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

举例:核心代码如下

<body> <input type="checkbox" checked="checked"> <label for="check1">Check me</label> <p></p> <script> $( "input" ) .change(function() { var $input = $( this ); $( "p" ).html( ".attr( 'checked' ): " + $input.attr( "checked" ) + "
" +".prop( 'checked' ): " + $input.prop( "checked" ) + "
" +".is( ':checked' ): " + $input.is( ":checked" ) + "" );}).change(); </script>

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

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

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。

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

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

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jQuery+PHP+Mysql实现输入自动完成提示的功能

      jQuery+PHP+Mysql实现输入自动完成提示的功能

      2016-07-01 10:00

    • 优就业WEB前端教程-jquery操作复选框(checkbox)的12个小技巧总结

      优就业WEB前端教程-jquery操作复选框(checkbox)的12个小技巧总结

      2016-05-28 11:00

    • Flexslider图片轮播、文字图片相结合滑动切换效果

      Flexslider图片轮播、文字图片相结合滑动切换效果

      2016-04-16 12:00

    • WEB前端开发都应知道的jquery小技巧及jquery三个简写 jQuery

      WEB前端开发都应知道的jquery小技巧及jquery三个简写 jQuery

      2016-02-29 12:13

    网友点评