2017/03/21 更新:
可能是之前为了要相容旧版 IE (v9.0 之前) 的缘故,所以没发现到 JavaScript 还有 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 冲突。
帮大家试过用 € 与 ¥ 做为自订函式的名称,不过都失败,大家可以不用试了!
参考网页
近期回响