标签：事件 doctype dom container 变化 href utf-8 NPU show
在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>
标签：事件 doctype dom container 变化 href utf-8 NPU show
原文地址：https://www.cnblogs.com/wangtao-/p/11933805.html
