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 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
用js实现放大镜效果
2020/10/28 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
python中OrderedDict的使用方法详解
2017/05/05 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
python数据挖掘需要学的内容
2019/06/23 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
学生发电厂实习自我鉴定
2013/09/22 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
党员批评与自我批评
2014/02/12 职场文书
中学生运动会口号
2014/06/07 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书