[JavaScript]模擬 jQuery 的 CSS 選擇器 (Selector)
2017/03/21 更新:
可能是之前為了要相容舊版 IE (v9.0 之前) 的緣故，所以沒發現到 JavaScript 還有 querySelector() 與 querySelectorAll() 這兩個函式，它們的功能分別為:
- querySelector(): 回傳第一個符合選擇器規則的元素
- querySelectorAll(): 回傳全部符合選擇器規則的元素
從範例中可以得知，這兩個函式遵循 CSS 語法，可以實現複雜的 CSS 選擇器的層級、屬性、分組、串聯、偽元素...等判斷，功能已不是 getElementById()、getElementsByClassName()、getElementsByTagName() 可以比擬!
當然複雜的 CSS 層級可改由 querySelector() 或 querySelectorAll() 來取得元素，不過若是目標明確，考量效率我還是用 getElementById() 來處理可能會比較好。
自訂函式 $$() 改寫如下:
function $$(element, isFirst){ if(isFirst === 1){ // 強制回傳第一筆符合的元素 return(document.querySelector(element)); } else if(/^\#[\w\-]+/.test(element)){ // 以 $$("#id") 回傳元素 return(document.getElementById(element.slice(1))); } else{ // 回傳元素陣列 return(document.querySelectorAll(element)); } }($$() 增加了第二個參數: isFirst，若設為 1 則強制回傳第一筆符合 CSS 選擇器的元素，而非元素陣列)
之前的內容:
自訂函式
JQuery 強大、方便的選擇器 (Selector) 是 jQuery 不可或缺的功能之一。不過如果我們不想載入 jQuery 而只想使用類似 jQuery 選擇器的功能，那可以用自訂函式的方式做到:
function $$(element){
switch(element.charAt(0)){
case("#"):
// 以 $$("#id") 回傳元素
return(document.getElementById(element.slice(1)));
case("."):
// 以 $$(".class") 回傳元素陣列，IE 要 v9.0 之後才支援
return(document.getElementsByClassName(element.slice(1)));
default:
// 以 $$("tag") 回傳元素陣列
return(document.getElementsByTagName(element));
}
}
或是單純一點，僅傳回指定 id 的元素就好:
function $$(element){
return(document.getElementById(element));
}
我把這個自訂的函式命名為 $$()，用以與 jQuery 的工廠函式 $() 做區隔。
但是要注意，以上自訂函式回傳的都是 DOM 元素，與 jQuery 在其它操作上並不相同。
換掉 jQuery 的工廠函式
如有需要也可以用 jQuery.noConflict() 換掉 jQuery 的工廠函式 $()，ex:
var jq = jQuery.noConflict();
這樣就能改用 jq() 來做為 jQuery 操作，而原本的 $() 只要再次重新定義為自訂函式即可使用，不會與 jQuery 衝突。
幫大家試過用 € 與 ¥ 做為自訂函式的名稱，不過都失敗，大家可以不用試了!
近期迴響