每天积累一点点，就是日后的突飞猛进
data() 方法向被选元素附加数据，或者从被选元素获取数据
（1）配合html5的data自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="box one" data-info="oneNumber">我是一号</div>
<div class="box two" data-info="twoNumber">我是二号</div>
<script>
$('.box').on('click',function(){
if('oneNumber' === $(this).data('info')){
alert('我真的是一号');
}else if('twoNumber' === $(this).data('info')){
alert('我也真的是二号');
}
})
</script>
</body>
</html>
（2）使用data()设值取值的小例子，传入对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="box-in">给data传入对象</div>
<input type="text" placeholder="请输入你想查询的信息" class="query-info">
<div class="box-out">获取传入的属性</div>
获取的信息为:<span class="content"></span>
<script>
$(document).ready(function(){
var obj = {
name:"weidapao",
age:"22",
favo:"play basketball",
girlfriend:false,
sex:"male"
};
$('div').data(obj);
$('.box-out').click(function(){
var query_info = $('.query-info').val(); //记住jq取值是val()
var data_obj = $('div').data(query_info);
$('.content').html(data_obj); //传入的是对象，取的时候传对象属性名
}) //当没有给data()传参，返回的是整个对象，可以data().age来调用属性
})
</script>
</body>
</html>
datalearn.gif
网友评论