在jQuery中使用自定义属性
在jquery中 自定义属性及值
默认以下都是在class=\'acitve\'对象中 进行自定义属性操作：
1，自定义属性格式：data-xxxx
2，获取该属性值： $(\'.active\').data(\'xxxx\') 获取属性值：data-xxxx的值
3，设置该属性值： $(\'.active\').data(\'xxxx\',\'love\') 设置属性： data-xxxx="love"
如：<div class="active" data-love="you"></div>
1，获取属性值： $(\'.active\').data(\'love\');
2，设置属性值： $(\'.active\').data(\'love\',\'fuck\');
把 data-love = "fuck" 修改该属性值，在控制台其值是不会改变的，从控制台输出是可以看到的。
3，此外设置$(\'.active\')对象没有的属性，如添加 data-itemNum 并设置默认值 five
4，如：$(\'.active\').data(\'itemNum\',\'five\');审查元素是看不到该属性的，只能输出控制台可以看到该值。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="container" data-name="you" data-love=\'mom\'>
<button class="getData">获取数据</button><span class="show"></span>
<input type="text" class="text"><button class="setData">设置数据</button>
</div>
<script src="js/jquery.js"></script>
<script>
//获取所有DOM对象
var $container = $(\'.container\');
var $getData = $(\'.getData\');
var $show = $(\'.show\');
var $text = $(\'.text\');
var $setData = $(\'.setData\');
//按钮单击事件 获取数据
$getData.on(\'click\',function(){
//这是获取$show对象的 data-name 属性值 可以在 $show对象中查看该属性及值。
$show.text($container.data(\'name\'));
})
//单机设置data相关属性
$setData.on(\'click\',function(){
//设置$container对象的 data-love 属性及其值，
//如果 data-love 属性存在，在修改属性后，在控制台中是看不到其值的变化，但是输出就可以看到变化。
//如果 data-love 不存在，则设置后，控制台看不到该属性，只能输出才能看到。
$container.data(\'love\',$text.val());
console.log($container.data(\'love\'));
})
</script>
</body>
</html>在jquery中 自定义属性及值
默认以下都是在class=\'acitve\'对象中 进行自定义属性操作：
1，自定义属性格式：data-xxxx
2，获取该属性值： $(\'.active\').data(\'xxxx\') 获取属性值：data-xxxx的值
3，设置该属性值： $(\'.active\').data(\'xxxx\',\'love\') 设置属性： data-xxxx="love"
如：<div class="active" data-love="you"></div>
1，获取属性值： $(\'.active\').data(\'love\');
2，设置属性值： $(\'.active\').data(\'love\',\'fuck\');
把 data-love = "fuck" 修改该属性值，在控制台其值是不会改变的，从控制台输出是可以看到的。
3，此外设置$(\'.active\')对象没有的属性，如添加 data-itemNum 并设置默认值 five
4，如：$(\'.active\').data(\'itemNum\',\'five\');审查元素是看不到该属性的，只能输出控制台可以看到该值。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="container" data-name="you" data-love=\'mom\'>
<button class="getData">获取数据</button><span class="show"></span>
<input type="text" class="text"><button class="setData">设置数据</button>
</div>
<script src="js/jquery.js"></script>
<script>
//获取所有DOM对象
var $container = $(\'.container\');
var $getData = $(\'.getData\');
var $show = $(\'.show\');
var $text = $(\'.text\');
var $setData = $(\'.setData\');
//按钮单击事件 获取数据
$getData.on(\'click\',function(){
//这是获取$show对象的 data-name 属性值 可以在 $show对象中查看该属性及值。
$show.text($container.data(\'name\'));
})
//单机设置data相关属性
$setData.on(\'click\',function(){
//设置$container对象的 data-love 属性及其值，
//如果 data-love 属性存在，在修改属性后，在控制台中是看不到其值的变化，但是输出就可以看到变化。
//如果 data-love 不存在，则设置后，控制台看不到该属性，只能输出才能看到。
$container.data(\'love\',$text.val());
console.log($container.data(\'love\'));
})
</script>
</body>
</html>
