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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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与javascript对多项选择的处理
2006/10/09 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
python基于ID3思想的决策树
2018/01/03 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python conda操作方法
2019/09/11 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
业务总经理岗位职责
2014/02/03 职场文书
杨善洲观后感
2015/06/04 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Python实现天气查询软件
2021/06/07 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
nginx配置之并发频次限制
2022/04/18 Servers