JSLite - 核心方法

2018-12-07 00:34 更新

如有疑問歡迎到這些地方交流,歡迎加入JSLite.io組織團伙共同開發(fā)!

segmentfault社區(qū) | 官方網(wǎng)站 | 官方文檔-更詳細 | Issues

$()

選擇器使用的是瀏覽器自帶的方法的 document.querySelectorAll 接口,支持標準的 CSS 選擇器,沒有使用jQuery作者John Resig開發(fā)的DOM選擇器引擎(Dom Selector Engine) Sizzle
目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已經(jīng)支持 querySelectorAll 。



$(selector) //? 選擇節(jié)點

$("") //? 生成節(jié)點

$("htmlString") //? 生成

JSLite(function($){ ... }) //? 相當于ready

$("#box") //? 返回節(jié)點數(shù)組  //? [<div>?…?</div>?]
$("<div></div>") //? 生成div節(jié)點
//JSLite(func) 相當于ready
JSLite(function($){
    console.log("在節(jié)點加載完成之后執(zhí)行")
})
//$(func) 相當于ready
$(function($){
    console.log("在節(jié)點加載完成之后執(zhí)行")
})

JSLite()

$()相同。

noConflict

noConflict() 方法讓渡變量 $ 的 JSLite 控制權,解決倆庫之間的$沖突。
該方法釋放 JSLite$ 變量的控制。
該方法也可用于為 JSLite 變量規(guī)定新的自定義名稱。

常規(guī)

$.noConflict();
JSLite(document).ready(function($) {
// 使用 JSLite $ 的代碼
});
// 使用其他庫的 $ 的代碼

映射回原始的對象

$ 引用的對象映射回原始的對象:

JSLite.noConflict();
JSLite("div p").hide(); // 使用 JSLite
$("content").style.display = "none";    // 使用其他庫的 $()

恢復使用別名

恢復使用別名 $,然后創(chuàng)建并執(zhí)行一個函數(shù),在這個函數(shù)的作用域中仍然將 $ 作為 JSLite 的別名來使用。在這個函數(shù)中,原來的 $ 對象是無效的。這個函數(shù)對于大多數(shù)不依賴于其他庫的插件都十分有效:

JSLite.noConflict();
(function($) { 
  $(function() {
    // 使用 $ 作為 JSLite 別名的代碼
  });
})(JSLite);


... // 其他用 $ 作為別名的庫的代碼

簡寫

可以將 JSLite.noConflict() 與簡寫的 ready 結合,使代碼更緊湊

JSLite.noConflict()(function(){
    // 使用 JSLite 的代碼
    console.log($("div"))
});

創(chuàng)建別名

創(chuàng)建一個新的別名用以在接下來的庫中使用 JSLite 對象:

var j = JSLite.noConflict();
j("#box").hide();  // 基于 JSLite 的代碼
$("content").style.display = "none";    // 基于其他庫的 $() 代碼

新的命名空間

完全將 JSLite 移到一個新的命名空間:

var dom = {};
dom.jslite = JSLite.noConflict(true);

結果:

dom.jslite("div p").hide();  // 新 JSLite 的代碼
$("content").style.display = "none";    // 另一個庫 $() 的代碼
JSLite("div > p").hide();   // 另一個版本 JSLite 的代碼
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號