一、.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. WinForm 设置窗体启动位置在活动屏幕右下角

    WinForm 设置窗体启动位置在活动屏幕右下角 在多屏幕环境下, 默认使用鼠标所在的屏幕 1. 设置窗体的 StartPosition 为 FormStartPosition.Manual. 2. ...

  2. [IoC容器Unity]第一回：Unity预览

    1.引言 高内聚,低耦合成为一个OO架构设计的一个参考标准.高内聚是一个模块或者一个类中成员跟这个模块或者类的关系尽量高,低耦合是不同模块或者不同类之间关系尽量简单. 拿咱国家举例来说,假如你是中国人 ...

  3. Largest Rectangular Area in a Histogram 最大连续面积

    在HankerRank遇到一题计算柱状图连续矩形面积的问题. 举例 hist = [3, 2, 3]. 在这个柱状图里面最大可以容纳一个high = 2 length = 3的连续矩形, 其面积 = ...

  4. excel 常用函数和实现功能经验总结积累

    0.判断一个文本字符串中是否包含数字!/判断一个文本字符串是否是纯汉字! 公式=IF(LENB(A1)=2*LEN(A1),”都是汉字“,“含有非汉字字符”) 解释函数: LEN(A1)#返回文本字符 ...

  5. Codeforces 396 E. Valera and Queries

    题目链接:http://codeforces.com/problemset/problem/369/E 考虑将问题转化为有多少条线段没有覆盖这些点,如果一个询问的点集是${[x1,x2,...,xn] ...

  6. c++_day5_成员指针

    1.成员指针实质:特定成员变量在对象实例中的相对地址. 2.类内可以直接初始化静态常量(声明部分).

  7. [原][译]我们为什么需要另一个c++测试框架?Catch||Why do we need yet another C++ test framework?

    翻译问题来源:https://github.com/catchorg/Catch2/blob/master/docs/why-catch.md 其他辅助博文:从Google Test 转到 Catch ...

  8. 上下文调用（call , apply , bind）

    var arr = []; var obj = { '0':'零', '1':'一', 'a':'sdsd', length : 2 } console.log( arr.push.call(obj, ...

  9. Redis 知识整理

    1. 什么是Redis Redis是开源的.基于内存的键值对数据库. 2. Redis 的基本操作 set key value => mset, setbit, hset get key =&g ...

  10. 教你函数如何传参更加方便 ----python 传参 *args **kwargs

    *args 和 **kwargs  可以将不定数量的参数传递给函数 *args 和 **kwargs,前者适用于 传入非键值对的可变数量的参数列表,后者适用于 传入不定长度的键值对, 作为参数传递给函 ...