jQuery中使用data()方法读取HTML5自定义属性data-*实例

 如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险

主要的方法如下:
代码如下:
.data( key, value )
.data( obj )
.data( key )
.data()
从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。
例如HTML:
复制代码 代码如下:<div data-role = "page" data-last-value = "43" data-hidden = "true" data-options = '{"name":"John"}' > </div>
下面的 jQuery代码都是返回 true 的:
 代码如下:
$ ( "div" ) . data ( "role" ) === "page" ;
$ ( "div" ) . data ( "lastValue" ) === 43 ;
$ ( "div" ) . data ( "hidden" ) === true ;
$ ( "div" ) . data ( "options" ) . name === "John" ;
 
和html5的api不同的是,jQuery会尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。如果这样做不会改变数值的表示,那么该值将转换为一个数字(number)。例如,“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变他们的表示,所以他们被保留为字符串。字符串值“100”被转换为数字100。
 
 
如果数据(data)属性是一个对象(以“{”开始)或数组(以'[‘开始),可以用jQuery.parseJSON 将其解析成字符串;它必须遵循 有效的JSON的语法 ,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。
 
 
如果想将取出的属性值直接当作字符串的话,请使用 attr() 方法。
data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。
调用 .data() 时如果不带参数,将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的 .data(obj) 操作,将不会再影响这个对象。另外,直接操作这个对象会比每次调用 .data() 来设置或获取值要快一些。

时间: 2024-09-03 03:18:41

jQuery中使用data()方法读取HTML5自定义属性data-*实例的相关文章

jQuery中使用data()方法读取HTML5自定义属性data-*实例_jquery

主要的方法如下: 复制代码 代码如下: .data( key, value ).data( obj ).data( key ).data() 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中.例如HTML: 复制代码 代码如下: <div data-role = "page" data-last-value = "43" data-hidden = "true" data-options

jQuery中ajax - post() 方法实例详解_AJAX相关

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

jQuery中ajax - post() 方法实例详解

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

JQUERY中的ajax方法怎样通过JSONP进行远程调用

 这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下 关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用    首先介绍下$.ajax的参数  type:请求方式 GET/POST  url:请求地址  async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步.  dataType:返回的数据类型  jsonp:传递给请求处理程序或

jQuery中ajax - get() 方法实例详解_AJAX相关

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

编码-jQuery中的ajax方法获取到json数据中文会乱码

问题描述 jQuery中的ajax方法获取到json数据中文会乱码 接口如下:http://cre.mix.sina.com.cn/api/finance/topstock_display这个接口 默认返回是 gbk的编码 支持 oe=utf-8,但是xtmlhttprequest 返回的数据默认的字符编码是utf-8,后台说用oe=utf转换,求解... 解决方案 首先你这不是json,所以你需要从服务器语言上把数据转换成json再去传到前端:其次,你要把后台脚本改成utf-8编码,不知道你用

jquery中的ajax方法怎样通过JSONP进行远程调用_jquery

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/POST url:请求地址 async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步. dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的js

在jquery中的ajax方法怎样通过JSONP进行远程调用_jquery

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/POST url:请求地址 async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步. dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的js

jQuery中ajax - get() 方法实例详解

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul