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

<!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>

总结如下：

attr和prop和data赋值的区别

	attr 赋值	prop 赋值	data 赋值
attr 取值	审查元素的时候可以看到attr赋值的属性; 可以取到值；	不能取到值	不能取到值
prop 取值	不能取到值；	审查元素的时候不可以看到attr赋值的属性; 可以取到值；	不能取到值
data 取值	可以取到值；	不能取到值	审查元素的时候不可以看到attr赋值的属性; 可以取到值；

attr 赋值

prop 赋值

data 赋值

attr 取值

审查元素的时候可以看到attr赋值的属性;

可以取到值；

不能取到值

prop 取值

不能取到值；

审查元素的时候不可以看到attr赋值的属性;

可以取到值；

不能取到值

data 取值

可以取到值；

不能取到值

审查元素的时候不可以看到attr赋值的属性;

可以取到值；

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

猜你喜欢