[JavaScript]模擬 jQuery 的選擇器 (Selector)
JQuery 強大、方便的選擇器 (Selector) 是 jQuery 不可或缺的功能之一。不過如果我們不想載入 jQuery 而只想使用類似 jQuery 選擇器的功能,那可以用自訂函式的方式做到:
function $$(theElement){ switch(theElement.charAt(0)){ case ("#"): // 以 $$("#id") 傳回物件 return (document.getElementById(theElement.replace(/^#/, ""))); case ("."): // 以 $$(".class") 傳回物件陣列,IE 不支援 return (document.getElementsByClassName(theElement.replace(/^\./, ""))); default: // 以 $$("tag") 傳回物件陣列 return (document.getElementsByTagName(theElement)); } }
或是簡單一點,僅傳回指定 id 的物件:
function $$(theElement){ return(document.getElementById(theElement)); }
我把這自訂的函式取名為 $$(),用以與 jQuery 的 $() 做區隔。
但是要注意,以上兩個函式傳回的都是 DOM 物件,與 jQuery 在其它操作上並不相同。
我也正在想有沒有簡單的方法稍微類似 JQuery 的選擇器;
很有趣的啟發,繼續發展下去,就是 JQuery 的由來了吧。
蠻實用的。