一、.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. jQuery Validate和Thymeleaf相关

    jQuery Validate https://www.cnblogs.com/liuhongfeng/p/5135676.html https://www.cnblogs.com/linjiqin/ ...

  2. 纸小墨ink简洁主题story爱上你的故事

    主题介绍 为纸小墨写的一款主题,该主题移植自Yumoe github地址:ink-theme-story Demo ink-theme-story 主题的一些食用说明 菜单 标题旁边有一个 · 字符, ...

  3. 【HNOI 2016】网络

    Problem Description 一个简单的网络系统可以被描述成一棵无根树.每个节点为一个服务器.连接服务器与服务器的数据线则看做一条树边.两个服务器进行数据的交互时,数据会经过连接这两个服务器 ...

  4. /etc/security/limits.conf不生效

    总结下来发现要使limits.conf生效,需要在  /etc/ssh/sshd_config  配置中 设置 UsePAM  yes UseLogin yes    #这个保证其他的用户也能修改设置 ...

  5. input[type=file]的美化

    __ 一般的选择框在美化过程中会出现各种问题,样式出错,文字无法更改等... 所有随之而生的便是这样的一种修饰方式:[将type=file的input与另一个按钮通过js绑定,这样便可以通过改变另一个 ...

  6. (简单)华为P9plus VIE-AL00的usb调试模式在哪里开启的经验

    每次我们使用pc接通安卓手机的时候,如果手机没有开启Usb调试模式,pc则没能成功检测到我们的手机,有时,我们使用的一些功能比较强的的app比如之前我们使用的一个app引号精灵,老版本就需要打开Usb ...

  7. samtools 使用简述

    功能如下: 1.View 主要功能讲sam文件转位bam文件. 涉及的参数: -b 输出bam格式..默认是sam文件 -h 输出的sam文件带header..默认不带 -H 仅仅输出header - ...

  8. 20190321xlVBA_汇总表按模板生成明细表

    Public Sub 汇总表转信息表() '日期 '作者 Next 'QQ 84857038 Dim Wb, Sht, msht, NewSht, rng Set Wb = Application.T ...

  9. CNN 分割

    测试的是Cifar10数据集,采用VGG模型的网络参数是[32, 'M', 64, 'M', 128, 128, 'M', 256, 256, 'M', 256, 256],准确度大概在90.6左右 ...

  10. Git更改用户名与回退操作

    1. 更改本地用户名和邮箱 git config --global user.name "Your_username" git config --global user.email ...