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

主要的方法如下：

复制代码

代码如下:

data(

key,

value

)

data(

obj

)

data(

key

)

data()

从jQuery

143起，

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”和“100000”是等同于数字（数字值100），但将转换它们会改变他们的表示，所以他们被保留为字符串。字符串值“100”被转换为数字100。

如果数据(data)属性是一个对象（以“{”开始）或数组（以'[‘开始），可以用jQueryparseJSON

将其解析成字符串；它必须遵循

有效的JSON的语法

，包括带双引号的属性名称。如果该值不能解析为一个JavaScript值，它将被保留为字符串。

如果想将取出的属性值直接当作字符串的话，请使用

attr()

方法。

data-属性是在第一次使用这个数据属性后不再存取或改变（所有的数据值都在jQuery内部存储）。

调用

data()

时如果不带参数，将会以

JavaScript

对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的

data(obj)

*** 作，将不会再影响这个对象。另外，直接 *** 作这个对象会比每次调用

data()

来设置或获取值要快一些。

data- 属性是来嵌入自定义数据的

所有主流浏览器都支持 data- 属性。

属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符

属性值可以是任意字符串

<input type="checkbox" class='member_id' data-openid='123456'/>

var openid = $(this)attr("data-openid");

可以使用：jQuery 属性 *** 作 - attr() 方法

attr() 方法的定义和用法

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数，其工作方式也有所差异。

使用attr() 方法返回属性值

语法：$(selector)attr(attribute)。attribute

规定要获取其值的属性。

使用attr() 方法设置属性/值

语法$(selector)attr(attribute,value)。attribute规定属性的名称，value 规定属性的值。 

实例

$("button")click(function(){  $("img")attr("width","180");});

//获取select标签自定义属性 data-val的值

$("select")eq(0)attr("data-val")

  <div class="b">

    <a href="" data="1">1</a>

    <a href="" data="2">2</a>

    <a href="" data="3">3</a>

    <a href="" data="4">4</a>

    <a href="" data="5">5</a>

  </div>$("b")click(function(e) {

   var id = $(etarget)attr("data");

    alert(id)

  })

以上就是关于jQuery中使用data()方法读取HTML5自定义属性data-*实例全部的内容，包括:jQuery中使用data()方法读取HTML5自定义属性data-*实例、js怎么获取data-dpr属性、Jquery怎么获取select选中项 自定义属性的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！