在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 lang="en">
<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 lang="en">
<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>