一、.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. 解决 Cannot uninstall 'pyparsing' 问题

    参考 pyparsing 无法卸载导致安装 matplotlib 出错 解决 Cannot uninstall 'pyparsing' 问题 在安装 pydot 时遇到依赖 pyparsing 无法更 ...

  2. echarts 角度渐变环形图心得

    今天做了一个图,把自己的遇到的问题和体会记录一下,以防忘记 echarts地址 https://gallery.echartsjs.com/editor.html?c=xEPtLLmG4G 参考官网地 ...

  3. P3958 奶酪

    传送门 思路: 模拟题.用并查集求出所有 “连通块” ,判断是否有 “连通块” 的最顶上和最下方都不小于奶酪的范围. Code: #include<iostream> #include&l ...

  4. mysql log and lock

    mysql bin log==> /etc/my.cnf==> log_bin=/var/log/mysql/mysql-bin.log==> binlog_do_db=your_d ...

  5. JS-NaN的数据类型

    NaN 的数据类型:not a number .是数字类型但是不是数字 例: var x = Number('abcd'); //结果是NaN alert( typeof (x) ); //结果是nu ...

  6. Lab 10-3

    This lab includes a driver and an executable. You can run the executable from anywhere, but in order ...

  7. python 读取excel文件

    方法一:利用pandas import pandas as pd inputfile_1 = "F:\\大论文实验\\福贡县数据\\贫困人口数据_2015.xlsx" data1 ...

  8. volley+okhttp封装，一行代码就可访问网络

    volley+okhttp封装,一行代码就可访问网络 前言: 我写这个可能不会完全的教会你去怎么封装一个网络框架,我的目的在于让你不需要你自己封装就可以访问网络,或者说互相学习也可以,我只是想让你大概 ...

  9. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

  10. jq里验证插件的自定义方法Jquery.validator.addMethod()示例

    最近写验证的时候感觉原生的验证谢了一遍又一遍,就想到了“不要重复造轮子,学会管理自己的工具库”这句名言,于是尝试用jq的validator. 用过又发现需要自定义方法去验证,于是去查官网,写了Jque ...