jQuery原理系列-css选择器的简单实现
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选择器的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
jquery选择器原理介绍($()使用方法)
每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同. 当我们使用选择器的时候$(selector,content),就会执行init(sel
-
Jquery选择器 $实现原理
但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理): 复制代码 代码如下: (function() { var // Will speed up references to window, and
-
jQuery源码分析-04 选择器-Sizzle-工作原理分析
作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: "div > p" 块表达式: "div" "p" 并列选择器表达式: "div, p" 块分割器: Sizzle中的chunker正则,
-
jQuery选择器的工作原理和优化分析
每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init 对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可 以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样. 当我们使用选择器的时候$(selec
-
详解jquery选择器的原理
详解jquery选择器的原理 html部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="js/minijquery.js"></script> </head> <body>
-
jQuery原理系列-css选择器的简单实现
jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.
-
jQuery原理系列-常用Dom操作详解
1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve
-
jquery css 选择器演示代码
效果如图所示:核心代码: 复制代码 代码如下: <script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所
-
举例讲解jQuery中可见性过滤选择器的使用
可见性过滤器 可见性过滤器根据元素的可见性和不可见性来选择相应的元素. 过滤器名 jQuery 语法 说明 返回 :hidden $(':hidden') 选取所有不可见元素 集合元素 :visible $(':visible') 选取所有可见元素 集合元素 $('p:hidden).size(); //元素p 隐藏的元素 $('p:visible').size(); //元素p 显示的元素 注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none.inpu
-
Python CSS选择器爬取京东网商品信息过程解析
CSS选择器 目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup使用的技术书籍和博客软文并不多,而在这仅有的资料中介绍CSS选择器的少之又少.在网络爬虫的页面解析中,CCS选择器实际上是一把效率甚高的利器.虽然资料不多,但官方文档却十分详细,然而美中不足的是需要一定的基础才能看懂,而且没有小而精的演示实例. 京东商品图 首先进入京东网,输入自己想要查询的商品,向服务器发送网页请求.在这里小编仍以关键词"狗粮"作为搜索对象,之后得到后面这一串网址: https://s
-
Jquery删除css属性的简单方法
有时我们不需要某个css属性时,想删除它,但有没有removeCss方法,怎么办呢? 可以使用如下方法解决 $('选择器').css('css属性',''); 即将css属性值赋值为空,页面中就不会显示该css属性了. 如:$('.div1').css('opacity',''); 以上这篇Jquery删除css属性的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
jQuery中的类名选择器（.class）用法简单示例
本文实例讲述了jQuery中的类名选择器(.class)用法.分享给大家供大家参考,具体如下: 一.介绍 类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素. 在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配的类的名称就可以被类名选择器选取到. 类名选择器很好理解,在大学的时候大部分人一定都选过课,可以把CSS类名理解为课程名称,元素理解成学生,学生可以选择多门课程,而一门课程又可以被多名学生所选择. CSS类与元素的关系既可以是多对多的
-
Jquery中CSS选择器用法分析
本文实例讲述了Jquery中CSS选择器用法.分享给大家供大家参考.具体如下: jQuery使用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器,现分述如下: 1. 标签选择器 用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$("element"),如$("div"),同getElementByTagName 2. ID选择器 用于获取某个具有id属性的元素,格式如下:$("id"),同get
-
jQuery中的CSS样式属性css()及width()系列大全
目录 1.css()基本使用: 1.1 获取css属性 1.2 设置css属性 2.width()系列基本使用(height()系列同理) 2.1 width() 2.2 innerWidth()与outerWidth() 3.offset()与position() 3.1 取值对比 3.2 设置值对比 4.scrollLeft()与scrollTop() 4.1 取值 4.2 设置值 4.3 小demo 1.css()基本使用: 1.1 获取css属性 1.1.1 获取单个属性值(传入字符串)
-
使用jQuery在对象中缓存选择器的简单方法
当使用像jQuery这样的库时,开发者通常会使用选择器来访问和操作DOM中的元素.当一个选择在页面上被反复的访问时,把它缓存起来以获得更好的性能是个不错的想法. 让我们看一个例子, jQuery(document).ready(function() { jQuery('#some-selector').on('hover', function() { jQuery(this).fadeOut('slow').delay(400).fadeIn(); console.log(jQuery(this