BootStrap框架中的data-[ ]自定義屬性理解(推薦)
最近幾天學(xué)習(xí)bootstrap有感，通過data-api可以使用所有的bootstrap插件，不用寫一行js代碼，方便了很多，是我們的首選方式。
為什么bootstrap的插件當(dāng)中出現(xiàn)很多data-api，因?yàn)槲覀兺ǔＴ谑褂胋ootstrap框架的時候需要引入的是bootstrap.css,bootstrap.js,以及jQuery.js,然后我們之所以不用寫一點(diǎn)js代碼就可以使用特效豐富的bootstrap框架，原因就是bootstrap.js已經(jīng)幫我們完成了所有的js代碼，就是通過data-api完成的，所以data-api就是框架當(dāng)中js完成特效的核心?？梢酝ㄋ椎睦斫鉃?code>data-api就是一個普通的以data開頭的屬性，在js當(dāng)中我們可以通過這個data-api找到某個元素。
jquery操作data-api的方法：
示例
<div data-support = "pc"></div>
<script>
//獲取support值
console.log($('div').data('support'));
//設(shè)置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);
//設(shè)置support值
support.dataset.support = "mobile_device";
</script>
第一次寫文檔，新手上路，認(rèn)識可能不夠具體，或許還有些不成熟，請大家有宰相的肚子 <.>。原生的js和jQuery操作有少許差距，而且現(xiàn)在data-api對瀏覽器的兼容還是不是很完善，但也極大的減少了開發(fā)人員的工作量，還是值得推薦！如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- Bootstrap中data-target 到底是什么
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- DataTables+BootStrap組合使用Ajax來獲取數(shù)據(jù)并且動態(tài)加載dom的方法（排序，過濾，分頁等）
- 基于SpringMVC+Bootstrap+DataTables實(shí)現(xiàn)表格服務(wù)端分頁、模糊查詢
- 利用ASP.NET MVC和Bootstrap快速搭建個人博客之后臺dataTable數(shù)據(jù)列表
- bootstrap data與jquery .data
- Bootstrap 中data-[*] 屬性的整理
相關(guān)文章
JavaScript、tab切換完整版(自動切換、鼠標(biāo)移入停止、移開運(yùn)行）
這篇文章主要介紹了JavaScript、tab切換完整版(自動切換、鼠標(biāo)移入停止、移開運(yùn)行）的相關(guān)資料,需要的朋友可以參考下2016-01-01
今天小編就為大家分享一篇Layui給switch添加響應(yīng)事件的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
微信小程序遍歷Echarts圖表實(shí)現(xiàn)多個餅圖
這篇文章主要介紹了微信小程序遍歷Echarts圖表實(shí)現(xiàn)多個餅圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
es6數(shù)組之?dāng)U展運(yùn)算符操作實(shí)例分析
這篇文章主要介紹了es6數(shù)組之?dāng)U展運(yùn)算符操作,結(jié)合實(shí)例形式總結(jié)分析es6數(shù)組擴(kuò)展運(yùn)算符具體原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JS求1到任意數(shù)之間的所有質(zhì)數(shù)的方法詳解
這篇文章主要介紹了JS求1到任意數(shù)之間的所有質(zhì)數(shù)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
本篇文章主要介紹了webpack配置之后端渲染詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
JS與HTML結(jié)合使用marquee標(biāo)簽實(shí)現(xiàn)無縫滾動效果代碼
這篇文章主要介紹了JS與HTML結(jié)合使用marquee標(biāo)簽實(shí)現(xiàn)無縫滾動效果代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了prototype框架中美元符號$用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了$符號的使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01
前端實(shí)現(xiàn)類似chatgpt的對話頁面(案例)
這篇文章主要介紹了前端實(shí)現(xiàn)類似chatgpt的對話頁面(案例),需要的朋友可以參考下2023-03-03
事件委托是指將一個事件處理程序綁定到父元素上,而不是直接綁定到每個子元素上,下面就跟隨小編一起來了解一下JavaScript是如何處理事件委托的吧2024-12-12