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