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加密密码到cookie的实现代码
Apr 18 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery 移除事件的方法
Jun 20 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python实现聊天小程序
2018/03/13 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
python中if及if-else如何使用
2020/06/02 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
春节请假条
2014/04/11 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技