jQuery原理系列-css選擇器的簡單實(shí)現(xiàn)
jQuery最強(qiáng)大的功能在于它可以通過css選擇器查找元素,它的源碼中有一半是sizzle css選擇器引擎的代碼,在html5規(guī)范出來之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移動(dòng)端開發(fā)的,使用jQuery的必要性大大降低。
用js代碼實(shí)現(xiàn)css選擇器,必然是用正則表達(dá)式來識(shí)別字符串了,當(dāng)然瀏覽器提供的原生api 效率更高,以下代碼只做原理性展示,并未優(yōu)先性能,
例如
1)查找id顯然是用document.getElementById更高效,瀏覽器已經(jīng)做了hash,一次性找到元素不用遍歷每個(gè)節(jié)點(diǎn)。
2)查找 name用document.getElementsByName更高效,瀏覽器已經(jīng)做了一個(gè)含有該name的集合,
3)查找標(biāo)簽名 用document.getElementsByTagName更高效,瀏覽器已經(jīng)做了一個(gè)含有該tag集合,從這個(gè)集合中再查找子集顯然可以少遍歷很多的元素,至于瀏覽器是不是在元素創(chuàng)建的時(shí)候就更新了緩存的集合就不得而知了,但是從這個(gè)集合中判斷是不是目標(biāo)元素的子節(jié)點(diǎn)還要用contains也會(huì)有性能損耗。
好了,我們先不考慮用原生api優(yōu)化選擇器的問題,只用純正則表達(dá)式來做一個(gè)簡單的實(shí)現(xiàn),先用正則判斷如果含有#就是id選擇器,如果含有點(diǎn)號(hào)就是class選擇器,如果含有[]就是屬性選擇器,設(shè)定好查找目標(biāo)后開始遍歷子節(jié)點(diǎn),要用遞歸函數(shù)遍歷childNodes子節(jié)點(diǎn)的id,name,className,getAttribute是否匹配,如果匹配就返回該元素。完整的代碼如下:
html:
<body> <div> <span id="sp_id">hello,id</span> <span class="sp_class">hello,class</span> <span name="sp_name" >hello,name</span> <b>hello,tag</b> </div> </body>
javascript:
<script type="text/javascript"> function find(el, selector) { //查找子節(jié)點(diǎn),用法類似jquery的find函數(shù),僅支持id,class,attr選擇器,僅支持返回匹配的第一個(gè)元素 var m = selector.match(/([#\.\[])([\w\W]+)/i); var type, key,attrName, result; if (m) { if (m[1] == ".") { type = "class"; key = m[2]; } else if (m[1] == "#") { type = "id"; key = m[2]; } if (m[1] == "[") { type = "attr"; m = m[2].match(/(\w+)=(\w+)/i); attrName = m[1]; key = m[2]; } } else { type = "tag"; key = selector; } function findChild(node) { var c; for (var i = 0; i < node.childNodes.length; i++) { c = node.childNodes[i]; if (type == "class" && c.className == key) { result = c; return; } else if (type == "id" && c.id == key) { result = c; return; } else if (type == "attr" && c.getAttribute && c.getAttribute(attrName) == key) { result = c; return; } else if (type == "tag" && c.tagName && c.tagName.toLowerCase() == key) { result = c; return; } findChild(c); } } findChild(el); return result; } console.log(find(document.body,"#sp_id").innerHTML); console.log(find(document.body,".sp_class").innerHTML); console.log(find(document.body,"[name=sp_name]").innerHTML); console.log(find(document.body,"b").innerHTML); </script>
以上這篇jQuery原理系列-css選擇器的簡單實(shí)現(xiàn)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery Animation實(shí)現(xiàn)CSS3動(dòng)畫示例介紹
jQuery Animation的工作原理是通過將元素的CSS樣式從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài),下面以一個(gè)實(shí)例為大家詳細(xì)介紹下具體的實(shí)現(xiàn),感興趣的朋友可以參考下2013-08-08jquery對(duì)象和DOM對(duì)象的任意相互轉(zhuǎn)換
這篇文章主要介紹了jquery對(duì)象和DOM對(duì)象的任意相互轉(zhuǎn)換的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02jQuery創(chuàng)建自己的插件(自定義插件)的方法
在該系列之前的文章使用 jQuery:UI 項(xiàng)目中,我介紹了使用 jQuery 代碼中的插件來提高 web 應(yīng)用程序的效率。2010-06-06jQuery實(shí)現(xiàn)防止提交按鈕被雙擊的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)防止提交按鈕被雙擊的方法,涉及jQuery針對(duì)鼠標(biāo)按鍵的操作技巧以及preventDefault方法對(duì)元素默認(rèn)行為的修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03