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中如何处理引号编码&amp;#034;
Aug 15 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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表单敏感字符过滤类
2014/12/08 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP chop()函数讲解
2019/02/11 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
javascript数组去掉重复
2011/05/12 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
layui文件上传实现代码
2017/05/20 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
Python的print用法示例
2014/02/11 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python实现结构体代码实例
2020/02/10 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
英文翻译的自我评价语句
2013/10/04 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
班主任经验交流材料
2014/12/16 职场文书
求职简历自我评价2015
2015/03/10 职场文书
小学思想品德教学反思
2016/02/24 职场文书
初三语文教学反思
2016/03/03 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
mysql查找连续出现n次以上的数字
2022/05/11 MySQL