jQuery怎么自定义属性
这篇文章主要介绍“jQuery怎么自定义属性”，在日常操作中，相信很多人在jQuery怎么自定义属性问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jQuery怎么自定义属性”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
传统的HTML中如果想要实现某种样式，可以在标签上添加id、class、或者在标签上添加固有属性，通过CSS中的类选择器、id选择器、属性选择器来实现，在许多UI框架中，例如：bootstrap，可以通过data-[ ]自定义属性，不用写一行js代码，方便了很多。同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不保存到数据库中。
自定义属性获得是通过getAttribute('属性')获得，但有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
一、自定义属性（html5标准）data-属性名称="属性值"
自定义属性的名称驼峰式命名规则需要用-隔开
自定义属性名称如果连在一起写，大写会自动转为小写
data-user="eric"======>属性名称是userdata-user-name="eric"===>属性名称是userNamedata-userName="eric"=====>属性名称是username二、jquery自定义属性常用操作
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实例</title><script type="text/javascript" class="lazy" data-src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script><script>$(document).ready(function(){ var t1=$('.test').data();//获取该元素全部自定义属性 var t2=$('.test').data('age');//获取指定自定义属性 console.log(t1);//{age:18,user:"li"} console.log(t2);//18 $('.test').data('age',20);//改变自定义属性 console.log(t1);//{age:20,user:"li"} $('.test').data('weight','60kg');//设置新自定义属性 console.log(t1);//{age:20,user:"li",weight:"60kg"} });</script></head><body><div class="test" data-user="li" data-age="18"></div></body></html>三、jQuery中选择查找自定义属性具有特定值的所有元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实例</title><script type="text/javascript" class="lazy" data-src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script><script>$(document).ready(function(){ $('a[data-url="1.html"]').html('<span >5.html</span>'); $('a[data-url="2.html"]').html('<span >6.html</span>'); });</script></head><body><div class="test" data-user="li" data-age="18"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="1.html">1.html</a><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="1.html">1.html</a><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="2.html">2.html</a><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="3.html">3.html</a><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="4.html">4.html</a></div></body></html>到此，关于“jQuery怎么自定义属性”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
