关于面试jquery中的 .attr() 和 .prop()的区别联系

目测很多人都不太清楚这个,我之前也是,知道这两个东西有点区别,但是却说不清楚,那么这里,我来详细的讲一下

大家都知道,html标签可以在 <> 尖括号里面直接写属性, 例如 <img src="fhc.jpg" alt="hello">, 那么在jquery中,要获取这个图片的地址该怎么做的呢

$(‘img‘).attr(‘src‘) 或者 $(‘img‘).prop(‘src‘) 都可以,好像没什么区别

但是有一点大家要注意, 在 html标签里可以写一些奇葩的属性例如 <img src="fhc.jpg" whatYourName=‘zyzy‘> 那么这个 whatYourName 属性该怎么获取呢

只能使用 $(‘img‘).attr(‘src‘),如果使用 .prop()是没法获取的。

也就是说, .attr()可以获取 DOM元素的所有属性,包括本身自带的和后台随意添加的属性都可以。

.prop()只能获取 DOM元素的自带的属性。

那么问题来了,为啥呢?

大家都知道 jquery是基于原生js的,那么原生js怎么样去获取一个图片的 src呢?

如下有这么一个图片 <img id="pic" src="fhc.jpg">

js获取可以有两种方式  document.getElementById(‘pic‘).src  或者 document.getElmenetById(‘pic‘).getAttribute(‘src‘)

相比现在应该很清晰了,直接通过 .src 来获取图片地址就是 .prop()所封装的 js

而通过 getAttribute(‘src‘) 来获取图片地址的则是 .attr()所封装的 js

所以,相比较而言, .prop()方法 的效率应该会比 .attr() 的效率来的更高一些,好理解吧,但是 .attr()的功能更强大,而且覆盖了 .prop()。

如果你对运行效率并没有那么追求,那么就全部都用 .attr()好了

另外还有一个问题,在  button 的 disable 属性上, .prop() 和 .attr() 所获取的值稍有不同,详细请看半老头的这个文章吧http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

如果有什么问题或者错误的话,请第一时间联系我哈

时间: 2024-10-16 00:25:29

关于面试jquery中的 .attr() 和 .prop()的区别联系的相关文章

jquery中的attr()和prop()

jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东西的缩写. attribute与property attribute和property都可以翻译为属性,为了以示区别,通常把这两个单词翻译为属性与特性. <div id="test">Click Here</div> 上面这段HTML语句中有三个节点,分别是Elem

从一个bug说jquery中的attr和prop

为了方便描述,将问题简化如下: 先上代码 <form> <input type="checkbox">iqiyi</input> <input type="checkbox" checked="checked">letv</input> </form> <button type>showStatus</button> <script> $(

JQuery中关于attr()、prop()两者之间的区别

attr:设置或返回被元素则值 prop:获取在匹配的元素集中的第一个元素的属性值. 区别: 1. prop 如果获取多个被选元素那么只返回第一个被选元素的值: 2.根据JQ源码(可自行查看),attr 是通过原生JS中setAttribute()方法设置或修改:prop则是通过document.getElementById(ele)[name]的方法设置或修改 所以,获取标签的属性,如若标签自带的属性则使用prop方法会来的快些,attr则比较适用于我们自己的设置的属性 原文地址:https:

前端中的attr和prop的区别

1.什么是attribute,什么事property html标签的预定义和自定义属性我们统称为attribute js原生对象的直接属性,我们统称为property 2.什么是布尔值属性,什么是非布尔值属性 property的属性值为布尔类型的,我们统称为布尔值属性 property的属性为非布尔类型的,我们统称为非布尔值属性. 3.attribute和property的同步关系. 非布尔值属性:实时同步 非布尔值属性: property永远都不会同步attribute 在没有动过proper

jquery中attr和prop的区别分析

这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. 复制代码代

Jquery学习笔记(6)--jquery中attr和prop的区别【精辟】

jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. <a href="http://www.baidu.com&quo

jquery中attr和prop的区别(转)

在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了,一下为原文引用: 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. <a

Jquery中attr()与prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同.但是,这两个函数的用处却并不相同.下面我们来详细介绍这两个函数之间的区别. 1.操作对象不同 attr是单词attribute的缩写,prop是property的缩写,它们的都表示"属性"的意思.不过,在Jquery里面attribute和property是两个不同的概念.attribute表示HTML文档节点的属性,property表示JS对象的属性.我们来看个例子区分一下

JQuery中Attr与Prop的区别

今天做一个用jquery控制input checkbox的选中和不选中赋值,开始attr一直出现莫名其妙的问题,首次能赋值,之后每次点击完全没效果.后面改用prop来做,功能正常. 以下介绍attr与prop的区别: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参考文章:http://www.cnblogs.com/Showshare/p/different-between-attr-and-pro