jQuery的几种属性数值的区别attr、data、prop复制属性的时候的区别

时间 2020-02-16

标签 jquery 几种属性数值区别 attr data prop 复制时候栏目 JQuery 繁體版

原文原文链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="t"><h1>attr测试</h1></div>
<div id="s" data-s="sss"><h1>html属性data-s测试</h1></div>
<div id="d"><h1>data测试</h1></div>
<div id="p"><h1>p测试</h1></div>
</body>
<script type="text/javascript" src="../lib/jquery/jquery-1.12.0.min.js"></script>
<script>
    var jqObj = $('#t');
    jqObj.attr('data-a','aaa');//审查元素的时候 div标签的属性能够看到data-a
    console.info('attr赋值 attr 取值',jqObj.attr('data-a'));//能够取到值
    console.info('attr赋值 data 取值',jqObj.data('a'));//能够取到值
    console.info('attr赋值 prop 取值',jqObj.prop('data-a'));//取不到值

    var jqSObj = $('#s');
    console.info('html属性attr 取值',jqSObj.attr('data-s'));//能够取到值
    console.info('html属性data 取值',jqSObj.data('s'));//能够取到值
    console.info('html属性prop 取值',jqSObj.prop('data-s'));//取不到值


    var jqDObj = $('#d');
    jqDObj.data('a','ddd');//审查元素的时候 div标签的属性不能够看到data-a
    console.info('data赋值 attr 取值',jqDObj.attr('data-a'));//取不到值
    console.info('data赋值 data 取值',jqDObj.data('a'));//能够取到值
    console.info('data赋值 prop 取值',jqDObj.prop('data-a'));//取不到值

    var jqPObj = $('#p');
    jqPObj.prop('data-a','ppp');//审查元素的时候 div标签的属性不能够看到data-a
    console.info('prop赋值 attr 取值',jqPObj.attr('data-a'));//取不到值
    console.info('prop赋值 data 取值',jqPObj.data('a'));//取不到值
    console.info('prop赋值 prop 取值',jqPObj.prop('data-a'));//能够取到值
</script>
</html>

总结以下：javascript

attr和prop和data赋值的区别

	attr 赋值	prop 赋值	data 赋值
attr 取值	审查元素的时候能够看到attr赋值的属性;html 能够取到值；java	不能取到值	不能取到值
prop 取值	不能取到值；jquery	审查元素的时候不能够看到attr赋值的属性;测试能够取到值；spa	不能取到值
data 取值	能够取到值；	不能取到值	审查元素的时候不能够看到attr赋值的属性;code 能够取到值；htm

attr 赋值

prop 赋值

data 赋值

attr 取值

审查元素的时候能够看到attr赋值的属性;html

能够取到值；java

不能取到值

prop 取值

不能取到值；jquery

审查元素的时候不能够看到attr赋值的属性;测试

能够取到值；spa

不能取到值

data 取值

能够取到值；

不能取到值

审查元素的时候不能够看到attr赋值的属性;code

能够取到值；htm