layui 的基本使用介紹

全局配置

layui.config({

dir: '/res/layui/' //layui.js 所在路徑(注意，如果是script單獨引入layui.js，無需設定該參數。)，一般情況下可以無視

,version: false //一般用于更新模塊緩存，默認不開啟。設為true即讓瀏覽器不緩存。也可以設為一個固定的值，如：201610

,debug: false //用于開啟調試模式，默認false，如果設為true，則JS模塊的節點會保留在頁面

,base: '' //設定擴展的Layui模塊的所在目錄，一般用于外部模塊擴展

});

定義模塊

方法：layui.define([mods], callback)

layui.define(function(exports){

//do something

exports('demo', function(){

alert('Hello World!');

});

});

加載所需模塊

layui.use(['laypage', 'layedit'], function(){

var laypage = layui.laypage

,layedit = layui.layedit

//do something

});

layui.use(['laypage', 'layedit'], function(laypage, layedit){

//使用分頁

laypage();

//建立編輯器

layedit.build();

});

動態加載CSS

layui.link(href)

本地存儲

本地存儲是對 localStorage 和 sessionStorage 的友好封裝，可更方便地管理本地數據。

localStorage 持久化存儲：layui.data(table, settings)，數據會永久存在，除非物理刪除。

sessionStorage 會話性存儲：layui.sessionData(table, settings)，頁面關閉后即失效。注：layui 2.2.5 新增

獲取設備信息

layui.device(key)

其它

方法/屬性 描述

layui.cache 靜態屬性。獲得一些配置及臨時的緩存信息

layui.extend(options) 拓展一個模塊別名，如：layui.extend({test: '/res/js/test'})

layui.each(obj, fn) 對象(Array、Object、DOM對象等)遍歷，可用于取代for語句

layui.getStyle(node, name) 獲得一個原始DOM節點的style屬性值，如：layui.getStyle(document.body, 'font-size')

layui.img(url, callback, error) 圖片預加載

layui.sort(obj, key, desc) 將數組中的對象按某個成員重新對該數組排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], 'a')

layui.router() 獲得location.hash路由，目前在Layui中沒發揮作用。對做單頁應用會派上用場。

layui.hint() 向控制臺打印一些異常信息，目前只返回了error方法：layui.hint().error('出錯啦')

layui.stope(e) 阻止事件冒泡

layui.onevent(modName, events, callback) 自定義模塊事件，屬于比較高級的應用。有興趣的同學可以閱讀layui.js源碼以及form模塊

layui.event(modName, events, params) 執行自定義模塊事件，搭配onevent使用

layui.factory(modName) 用于獲取模塊對應的 define 回調函數

模塊命名空間

layui 的模塊接口會綁定在 layui 對象下，內部由 layui.define() 方法來完成。每一個模塊都會一個特有的名字，并且無法被占用。所以你無需擔心模塊的空間被污染，除非你主動 delete layui.{模塊名}。調用模塊可通過 layui.use 方法來實現，然后再通過 layui 對象獲得模塊接口。

如何使用內部jQuery

//主動加載jquery模塊

layui.use(['jquery', 'layer'], function(){

var

//重點處

,layer = layui.layer;

//后面就跟你平時使用jQuery一樣

$('body').append('hello jquery');

});

總結

以上是生活随笔為你收集整理的layui 如何去dom_layui 的基本使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。