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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
ajax请求前端跨域问题原因及解决方案
Oct 16 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生成二维码的方法汇总
2015/07/22 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python 实现多线程下载视频的代码
2019/11/15 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
村优秀党员事迹材料
2014/01/15 职场文书
交通安全责任书范本
2014/07/24 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
担保书范文
2019/07/09 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书