一、.attr()和.data()的区别：

.attr()和.data()本质上属于DOM属性和Jquery对象属性的区别。

看一个例子：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Jquery中.attr和.data的区别</title>

</head>

<body>

<p id="app" data-foo="hello"></p>

</body>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">

var getAttr1 = $('#app').attr('data-foo');

var getData1 = $('#app').data('foo');

console.log('getAttr1: ' + getAttr1); //hello

console.log('getData1: ' + getData1); //hello

$('#app').attr('data-foo', 'world'); //$.attr 设置DOM元素属性值

var getAttr2 = $('#app').attr('data-foo');

var getData2 = $('#app').data('foo');

console.log('getAttr2: ' + getAttr2); //world

console.log('getData2: ' + getData2); //*** hello ***

$('#app').data('foo', 'WORLD'); //$.data 设置DOM node属性值

var getAttr3 = $('#app').attr('data-foo');

var getData3 = $('#app').data('foo');

console.log('getAttr3: ' + getAttr3); //world

console.log('getData3: ' + getData3); //*** WORLD ***

</script>

</html>

$.attr()每次都从DOM 元素 中取属性的值，即和视图中标签内的属性值保持一致。

$.attr('data-foo')会从标签内获得data-foo属性值；

$.attr('data-foo', 'world')会将字符串'world'塞到标签的'data-foo'属性中；

$.data()是从 Jquery对象 中取值，由于对象属性值保存在内存中，因此可能和视图里的属性值不一致的情况。

$.data('foo')会从 Jquery对象 内获得foo的属性值，不是从标签内获得data-foo属性值；

$.data('foo', 'world')会将字符串'world'塞到 Jquery对象 的'foo'属性中，而不是塞到视图标签的data-foo属性中。

总结：.attr()和.data()应该避免混合使用。

若是通过.attr()赋值，就要使用.attr()取值。

若是通过.data()赋值，就要通过.data()取值。

性能角度来说，建议使用.data()进行set和get操作，因为它仅仅修改的jquery对象的属性值，没有操作DOM。

二、prop和.attr()的区别

prop是该版本的jquery引入的。

区别：

  • 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

举例说明：

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

<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属 性，也是W3C标准里就包含有这几个属性这些就叫做固有属性。建议使用prop方法。

“action”属性是 我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop 方法取值和设置属性值时，都会返回undefined值。

再举一个例子：

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

使用attr取值若没有设置值会打印出undefined。

总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别的更多相关文章

  1. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

  2. jQuery中获取a标签的值

    如题,一组相同action的a标签,不同的是a标签的内容为搜索内容.点击页面显示不同的数据 刚开始试过在 a标签中添加 value值 和id 的值,结果在jQuery中获取值均失败! 后来发现,根本不 ...

  3. jquery中获取iframe的id的方法：

    jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...

  4. jQuery中的$.getJSON、$.ajax、$.get、$.post的区别

    jQuery中的$.getJSON.$.ajax.$.get.$.post的区别 使用见Flask(python)异步(ajax)返回json格式数据 ①.$.getJSON $.getJSON()是 ...

  5. jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

    jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...

  6. [转]jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

    转自:http://www.cnblogs.com/keyi/p/5933981.html   jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...

  7. jquery 获取自定义属性（attr 和 prop的区别）

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  8. Jquery中获取iframe的代码方法

    父窗口中操作iframe:window.frames["iframeChild"].document //假如iframe的id为iframeChild 在子窗口中操作父窗口:wi ...

  9. js和jquery中获取非行间样式

    样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...

随机推荐

  1. zabbix触发器表达式

    zabbix触发器表达式 触发器使用逻辑表达式来评估通过item获取的数据是处于哪种状态, 触发器中的表达式使用很灵活,我们可以创建一个复杂的逻辑测试监控,触发器表达式形式如下: {<serve ...

  2. BZOJ-1587|前缀和 预处理 dp||叶子合并leaves

    叶子合并leaves Description 在一个美丽的秋天,丽丽每天都经过的花园小巷落满了树叶,她决定把树叶堆成K堆,小巷是笔直的 共有N片树叶(树叶排列也是笔直的),每片树叶都有一个重量值,并且 ...

  3. java四则运算 界面化

    本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2232 项目的地址:https://github.com/kdays ...

  4. Axios Token验证拦截器

    import axios from 'axios'; // req拦截 axios.interceptors.request.use( //设置头部的token config.headers['tok ...

  5. windows服务器环境问题---api-ms-win-crt-runtimel1-1-0.dll缺失解决

    安装VC++库 地址:https://www.microsoft.com/zh-cn/download/details.aspx?id=48145

  6. linux下dpkg繁忙，解决方法

    安装软件,提示: E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)E: 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它? 只要 ...

  7. Ubuntu16.04 使用sudo cat EOF 编辑文件，提示Permission denied错误的解决办法

    一.执行命令报错 在Ubuntu16.04下,使用如下命令,修改hosts主机文件,居然提示权限错误: catty@node186:~$ sudo cat <<EOF > /etc/ ...

  8. git pull和本地文件冲突

    在使用git pull代码时,经常会碰到有冲突的情况,提示如下信息: error: Your local changes to 'c/environ.c' would be overwritten b ...

  9. NetSec2019 20165327 Exp2 后门原理与实践

    NetSec2019 20165327 Exp2 后门原理与实践 快速找到重点: (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主机操作Shell, ...

  10. 网页中嵌入google地图

    一丶前言 大致需求:美国地图中标记分布的仓库图钉(鼠标经过显示地址详情),通过输入寄收件地邮编来在地图上定位位置添加图钉,将寄件地,选择的仓库,收件地图钉折线相连接,表示大致路线. 一丶google开 ...