您的位置：首页 > Web前端 > JQuery

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

2017-10-27 00:00 761 查看

<!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赋值的属性; 可以取到值；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery

相关文章推荐

新的分享

章节导航