博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery中attr()与prop()区别介绍
阅读量:6921 次
发布时间:2019-06-27

本文共 1455 字,大约阅读时间需要 4 分钟。

hot3.png

  

.attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。 •.attr( attributeName ) •.attr( attributeName )

•.attr( attributeName, value ) •.attr( attributeName, value )

•.attr( attributes )

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

.prop() : 获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性。 •.prop( propertyName ) •.prop( propertyName )

•.prop( propertyName, value ) •.prop( propertyName, value )

•.prop( properties )

•.prop( propertyName, function(index, oldPropertyValue) )

是参数有区别,attr()传入的是attributeName,而prop()传入的是propertyName,

Attributes vs. Properties

在这里,我们可以将attribute理解为“特性”,property理解为为“属性”从而来区分俩者的差异。

如果把DOM元素看成是一个普通的Object对象,这个对象在其定义时就具有一些属性(property),比如把select的option当做一个对象:

var option = {

selected:false,

disabled:false,

attributes:[],

...

}

现在,我们一目了然了,attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,它是一个类数组的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。而property就是一个属性,是一个以名值对(name=”value”)的形式存放在Object中的属性。

jquery中attr和prop的区别介绍:

 •对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

•对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

列子1:

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。

 

  

转载于:https://my.oschina.net/lisc2016/blog/1615991

你可能感兴趣的文章
在Spring MVC中使用注解的方式校验RequestParams
查看>>
1的数目-编程之美132
查看>>
基于 HTML5 Canvas 的简易 2D 3D 编辑器
查看>>
课堂练习——最大联通之数组
查看>>
抓老鼠
查看>>
C#如何调用C写的Win32 DLL
查看>>
New Features in C# 3.0, 4.0 and 5.0 (英文差的免入)
查看>>
pdo
查看>>
Jenkins-pipeline
查看>>
集合框架
查看>>
MySQL 查询缓存
查看>>
pl/sql中明明新建了表,但是在程序中查询时始终报错‘未找到表或视图’
查看>>
使用代理访问远程服务
查看>>
在分享到微信里的网页中,打开qq对话框。
查看>>
mysql 索引优化,索引建立原则和不走索引的原因
查看>>
hdu 4190(二分)
查看>>
react-router-dom
查看>>
[BSOJ2684]锯木厂选址(斜率优化)
查看>>
Struts2之文件上传与下载
查看>>
文件 上锁 flock fcntl
查看>>