jquery中attr、prop、data区别与用法分析


Posted in jQuery onSeptember 25, 2019

本文实例讲述了jquery中attr、prop、data区别与用法。分享给大家供大家参考,具体如下:

在高版本的jquery中获取标签的属性,可以使用attr()、prop()、data(),那么这些方法有什么区别呢?

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
  • .data()看作是存取data-xxx这样DOM附加信息的方法

上面的描述也许有点模糊,举几个例子就知道了。

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

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

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

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

再举一个例子:

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

说说.data(),我们知道 html 5里面DOM标签可以加以一些data-xxx的属性,你可以把.data()看作是存取data-xxx这样DOM附加信息的方法。当 然,.data()存取的内容不仅是字符串,还可以包含数组和对象。从jq1.4.3起, html5 的data-xxx属性会自动被添加到jq的data对象里,比如有下列代码:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"noahlu"}'></div>

下面的等式都成立:

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "noahlu";

从性能上对比,.prop() > .data() > .attr(),不同浏览器不同版本.data()和.attr()的性能关系有差异,不过.prop()总是最优的。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 #jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 #jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 #jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 #jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
You might like
php中常用编辑器推荐
2007/01/02 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
python装饰器使用方法实例
2013/11/21 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python win32 简单操作方法
2017/05/25 Python
python中正则表达式的使用方法
2018/02/25 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
android面试问题与答案
2016/12/27 面试题
会计找工作求职信范文
2013/12/09 职场文书
文秘求职信范文
2014/04/10 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
新生开学寄语大全
2015/05/28 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang