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

p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC" }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue" }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; min-height: 14.0px }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #1d00cc }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #1b03b7; min-height: 14.0px }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #1b03b7 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; min-height: 14.0px }
p.p9 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue" }
li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC" }
span.s1 { font: 14.0px "Helvetica Neue" }
span.s2 { font: 12.0px "Helvetica Neue" }
span.s3 { font: 12.0px ".PingFang SC" }
span.s4 { font: 12.0px ".PingFang SC"; color: #5f4baa }
span.s5 { color: #5f4baa }
span.s6 { font: 12.0px ".PingFang SC"; color: #3d49a2 }
span.s7 { color: #3d49a2 }
span.s8 { font: 14.0px ".PingFang SC" }
span.s9 { font: 10.0px Menlo }
ul.ul1 { list-style-type: disc }

一、.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。

原文地址:https://www.cnblogs.com/fsx77/p/9885027.html

时间: 2024-10-02 18:51:18

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

jquery 中获取input指定name的标签对象

jquery 中获取input指定name的标签对象,用$("input[name^='?????']"); 这里name^='?????'中的 ^ 什么用? 表示name的值是以???开头的元素 比如$("input[name^='hi']")就会选择以下的元素<input type ="text" name ="hiworld" / > ^开头表示 name 以 ?????开头的 类似的还有$ 结尾* 包含!

jQuery中获取a标签的值

如题,一组相同action的a标签,不同的是a标签的内容为搜索内容.点击页面显示不同的数据 刚开始试过在 a标签中添加 value值 和id 的值,结果在jQuery中获取值均失败! 后来发现,根本不用那么复杂,可以直接获得a标签的html()内容或文本内容text() /** * 点击最新.热销点卡榜单显示点卡信息 */$(".rankings").click(function () { var info=$(this).html(); num=1;//这个不加跟页码有冲突 getP

jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidth() = a+padding; outerWidth() = a+padding+border; outerWidth(true) = a+padding+border+margin; 在jQuery中,width()方法用于获得元素宽度:innerWidth()方法用于获得包括内边界(paddi

在jQuery中使用自定义属性

在jquery中 自定义属性及值默认以下都是在class='acitve'对象中 进行自定义属性操作:1,自定义属性格式:data-xxxx2,获取该属性值: $('.active').data('xxxx') 获取属性值:data-xxxx的值3,设置该属性值: $('.active').data('xxxx','love') 设置属性: data-xxxx="love"如:<div class="active" data-love="you&qu

JSONObject动态put之后jquery中获取不到的问题!

一般都是这样用json,JSONObject传很多不同类的东西,JSONArray用来传一类数组; 在action中这样: import net.sf.json.JSONObject; public class test extends ActionSupport implements SessionAware{ private JSONObject jsonObject = new JSONObject(); private JSONArray jsonArray = new JSONArra

【转】jQuery中的bind(),live(),delegate(),on()事件绑定方式的区别

bind()                                                                                                                                                                                                        简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selecto

jQuery中获取元素的属性方法attr()简单用法

语法结构:$(selector).attr(attribute), //selector为选择器名,attribute为指定要获取的元素的属性名 修改元素属性的$(selector).attr(attribute,value), //selector为选择器名,attribute为指定要获取的元素的属性名 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

jquery中获取元素的几种方式小结

1 从集合中通过指定的序号获取元素 html: 复制代码代码如下: <div> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </div> JS 复制代码代码如下: <script type

JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位

浏览器的宽高示意图: JavaScript中常用的方法: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scr