BootStrap框架中的data-[ ]自定义属性理解(推荐)


Posted in Javascript onFebruary 14, 2017

最近几天学习bootstrap有感,通过data-api可以使用所有的bootstrap插件,不用写一行js代码,方便了很多,是我们的首选方式。

为什么bootstrap的插件当中出现很多data-api,因为我们通常在使用bootstrap框架的时候需要引入的是bootstrap.css,bootstrap.js,以及jQuery.js,然后我们之所以不用写一点js代码就可以使用特效丰富的bootstrap框架,原因就是bootstrap.js已经帮我们完成了所有的js代码,就是通过data-api完成的,所以data-api就是框架当中js完成特效的核心。可以通俗的理解为data-api就是一个普通的以data开头的属性,在js当中我们可以通过这个data-api找到某个元素。

jquery操作data-api的方法:

示例

<div data-support = "pc"></div>
  <script>
  //获取support值
  console.log($('div').data('support'));
  //设置support值
  $('div').data('support','mobile_divice');
  </script>

原生js操作data-api的方法:

示例

<div data-support = "pc" id = "support_device "></div>
  <script>
  var support = document.getElementsById("support_device");
  //获取support值

  console.log(support.dataset.support);
  //设置support值
  support.dataset.support = "mobile_device";
    </script>

第一次写文档,新手上路,认识可能不够具体,或许还有些不成熟,请大家有宰相的肚子 <.>。原生的js和jQuery操作有少许差距,而且现在data-api对浏览器的兼容还是不是很完善,但也极大的减少了开发人员的工作量,还是值得推荐!如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 #Javascript
Vue组件开发初探
Feb 14 #Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 #Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 #Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 #Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 #Javascript
Javascript下拉刷新的简单实现
Feb 14 #Javascript
You might like
php自定义函数实现二维数组排序功能
2016/07/20 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
工地宣传标语
2014/06/18 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
《灰雀》教学反思
2016/02/19 职场文书