jQuery最強大的功能在于它可以通過css選擇器查找元素，它的源碼中有一半是sizzle css選擇器引擎的代碼，在html5規范出來之后，增加了document.querySelector和document.querySelectorAll直接查找元素，如果是做移動端開發的，使用jQuery的必要性大大降低。
用js代碼實現css選擇器，必然是用正則表達式來識別字符串了，當然瀏覽器提供的原生api 效率更高，以下代碼只做原理性展示，并未優先性能，
例如
1）查找id顯然是用document.getElementById更高效，瀏覽器已經做了hash，一次性找到元素不用遍歷每個節點。
2）查找 name用document.getElementsByName更高效，瀏覽器已經做了一個含有該name的集合，
3）查找標簽名 用document.getElementsByTagName更高效，瀏覽器已經做了一個含有該tag集合，從這個集合中再查找子集顯然可以少遍歷很多的元素，至于瀏覽器是不是在元素創建的時候就更新了緩存的集合就不得而知了，但是從這個集合中判斷是不是目標元素的子節點還要用contains也會有性能損耗。
好了，我們先不考慮用原生api優化選擇器的問題，只用純正則表達式來做一個簡單的實現，先用正則判斷如果含有#就是id選擇器，如果含有點號就是class選擇器，如果含有[]就是屬性選擇器，設定好查找目標后開始遍歷子節點，要用遞歸函數遍歷childNodes子節點的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) { //查找子節點，用法類似jquery的find函數，僅支持id,class,attr選擇器，僅支持返回匹配的第一個元素 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選擇器的簡單實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
