attr和data

attr()获得属性值

通过attr()获得属性时,可以这样$(selector).attr(attrName)。注意,其返回值始终是string型!看下面的例子。通过attr()得到的属性age的值是”31”,属性isstd的值是”false”。另外需要注意的是,attr()对传入的attrName大小写不敏感,就是说attr(’name’)和attr(’NAME’)都能得到期望的返回值。

attr()添加和修改属性

attr修改属性支持三种方式,即可以向API传递三种形参:attr(attrName, value),   attr(attrName, function),   attr(obj)。如果第二个参数是function,那么该function会被执行,并将执行结果作为attr()的返回值。attr(obj)等同于多次调用attr(attrName, value),比如attr({attr1: value1, attr2: value2})等同于attr(attr1, value1).attr(attr1, value2); 在JavaScript代码,可以通过attr()动态修改属性值和添加新属性,如果传入value是对象,我们最终会获得什么呢?看下面几个例子。

var $el = $(‘#jquery-api-attr‘);
$el.attr(‘newAttr1‘, {name: ‘chen‘});
$el.attr(‘newAttr1‘); // "[object Object]"

$el.attr(‘newAttr2‘, [1, 2, 3]);
$el.attr(‘newAttr2‘); // "1, 2, 3"

$el.attr(‘newAttr3‘, null);
$el.attr(‘newAttr3‘); // "undefined"

$el.attr(‘newAttr4‘, undefined);
$el.attr(‘newAttr4‘); // "undefined"

可以看出,如果value是基本数据类型的一种,那么直接返回相应的字符串,但是null value返回的是“undefined”并非”null”。如果value是一个对象,那么对象的toString()会被调用,执行结果即attr()的返回值。

data()修改数据和绑定新数据

和attr()类似,可以在页面生成时绑定数据,实际上是给元素添加名称为data-*的属性。

在JavaScript里,data()修改数据可以这样:data(key, value)和data(obj)。后者等同于data(key1, value1).data(key2, value2)。还有一种方式,如下

var data = $el.data();
data.newAttr = 10;

在使用data()修改数据时,如果value是undefined类型,那么数据不会保存或更新。

$el.data(‘school‘, undefined);
$el.data().hasOwnProperty(‘school‘); // false
$el.data(‘newAttr ‘, undefined);
$el.data(‘newAttr ‘); // 10

data()获取数据

往data()传入一个string称之为key的参数即data(key),或者data()[key]来获得与key对应的value。但是注意一点,data()可能会返回undefined如果没有任何数据绑定,所以data(key)的方式更为安全。和attr()值返回string类型的值不一样,data()会对静态绑定的数字、布尔、对象、数组和null进行转换。看下面几个例子。

<div class="box" id="jquery-api-data" data-name="chen" data-AGE="31" data-isStd="false" data-func="function(){}"     data-list=‘{"listname":"eric chen"}‘ data-undefinedkey="undefined" data-nullkey="null" data-last-value="43"></div>
var $el = $(‘#jquery-api-data‘);
$el.data(‘age‘); // 31
$el.data(‘AGE‘); // undefined
$el.data(‘isstd‘); // false
$el.data(‘func‘); // "function() {}"
$el.data(‘list‘); // obj {"listname": "eric chen"}
$el.data(‘undefinedkey‘); // "undefined"
$el.data(‘nullkey‘); // null
$el.data(‘lastValue‘); // 43
$el.data(‘lastvalue‘); // undefined

如果在HTML里静态绑定了数据,通过data()来获取数据时,key必须全小写,比如绑定data-AGE="31",只能通过data(‘age‘)而不是data(‘AGE‘)。另外注意data-last-value="43",只能通过data(‘lastValue‘)或者data(‘last-value‘)。 在JavaScript里通过data()修改数据,再获取值时,须严格按照指定的key。比如data(‘AGE‘, 20),这时data(‘age‘)是31,data(‘AGE‘)返回20。这时因为,在JS里第一调用data()时,会将HTML里静态绑定的数据,复制到jQuery.cache变量里,复制时key中的字符都转换为对应的小写字母。再次使用data()修改数据或添加新数据时,对key不会转换为小写字母,也不会对存入的数据做类型转换! 通常,data(‘lastValue‘, value)和data(‘last-value‘, value)修改的是同一数据。但是如果是这样子呢?不给data()传入任何参数来获得绑定在$el上的所有数据即一个JSON对象,然后修改这个对象的属性值。

时间: 2024-10-10 03:57:19

attr和data的相关文章

jquery data属性 attr vs data

html5的自定义data属性相信大家都不会陌生,有了它你可以绑定所需的数据到指定元素上.然后通过jquery设置.获取数据,简直开心的不行啊.想到设置.获取元素属性值,大家一定首先想到了jquery的.attr()方法,但是你一定知道jquery还有个.data()的方法.本人以前一直萌(傻)萌(傻)哒(的)以为这两个方法在处理data属性过程中实现的效果是一样的,只不过.data()方法官方更推荐使用(看名字就感觉人家是正规军).但后来本人在做项目的过程中发现,这两种方法处理data属性并不

jQuery .attr() .prop() .data()区别及全选等问题

DOM的attribute和property 今天讲一个JS的小话题,就是DOM节点的attribute和property的区别,这个点看起来很小,其实背后别有洞天.如果面试一个前端,听他讲讲对这个问题的理解,基本能分辨是不是菜鸟.下面的内容请各位细心体会. 页面有一个INPUT输入框   这个比较简单,没什么好说的,两个值都是’1′.现在我把输入框的值改成100,然后重新取一遍值: 为什么两个值不同了?这就是attribute和property在作怪. Attibute 这 个INPUT节点有

总结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

关于jQuery中的attr和data问题

今天在使用data获取属性并且赋值时遇到一个小问题,写下来防止以后再跳坑. 在使用jQuery获取自定义属性值时,我们习惯用 $(selector).attr('data-value'); jQuery赋值: $(selector).attr('data-value','123456'); 而data的取值: $(selector).data('value'); data赋值: $(selector).data('value','123456'); 值得注意的是data,如果决定使用data就不

jQuery attr() prop() data()用法及区别

.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1.6引入,读/写DOM的property..data(),此方法在jq1.2.3引入,作用是把任意的值读取/存储到DOM元素对应的jq对象上.从性能上对比,.prop() > .data() > .attr(),不同浏览器不同版本.data()和.attr()的性能关系有差异,不过.prop()总

d3js data joins深入理解

Data joins 给定一个数据数组和一个 D3 selection  我们就可以attach或者说是'join'数组中的每个数据到selection中的每个元素上. 这将使得我们的数据和可视化元素之间建立紧密的联系并实现可视化成为可能. 比如如果我们有以下SVG的circles: <circle r="40" /> <circle r="40" cx="120" /> <circle r="40&quo

ajax之前台和后台数据传输

Spring中ajax数据传输 由于项目需要用ajax提交数据,而不是form提交数据.因此我需要学习ajax,这也是我在开发小组做的最后一个东西,尽管由于暑假要去东软实训,这个ajax提交也没有做完,但对于数据的在前台和后台的传递是解决了. 如何把数据通过ajax从前台传到后台,在网上查询的方法都是通过"data:"把数据传到后台,但是后台"String endTime=request.getParameter("eTime");"时间的值是空

SpringMVC+ajaxfileupload上传

看这篇的文章之前最好看一下上篇文章这样可以更好的理解! 整个项目的基本配置和上面差不多 不同的是在webRoot文件夹下的js中引入jQuery.js 和ajaxfileupload.js 如何没有这个两个js文件可以到各自的官网下载 现在说说其他的不同之处 DemoController.java   跳转到upload.jsp package com.iss.controller; import org.springframework.stereotype.Controller; import

数据同步

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据同步</title> <style type="text/css"> *{ margin: 0; padding: 0; } .content{ width: 80%; min-width: 1200px; margin: