【前端】jQuery选择器$()的实现原理
今天三七互娱技术面试的时候面试官问了我这个问题,当时一脸懵逼,于是好好总结一下。
当我们使用jquery选择器的时候,$(s).回默认去执行jquery内部封装好的一个init的构造函数每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象。这个init不是jquery.fn上的方法,而是内部源码的一个函数。
这个函数是干什么用的呢?
当我们使用选择器的时候$(selector,content),就会执行init(selectot,content),我们看看inti中是怎样执行的:
if ( typeof selector == "string" )
{
//正则匹配,看是不是HTML代码或者是#id
var match = quickExpr.exec( selector );
//没有作为待查找的 DOM 元素集、文档或 jQuery 对象。
//selector是#id的形式
if ( match && (match[1] || !context) )
{
// HANDLE: $(html) -> $(array)
//HTML代码,调用clean补全HTML代码
if ( match[1] ){
selector = jQuery.clean( [ match[1] ], context );
}
// 是: $("#id")
else {
//判断id的Dom是不是加载完成
var elem = document.getElementById( match[3] );
if ( elem ){
if ( elem.id != match[3] )
return jQuery().find( selector );
return jQuery( elem );//执行完毕return
}
selector = [];
}
//非id的形式.在context中或者是全文查找
}
else{
return jQuery( context ).find( selector );
}
}
这里就说明只有选择器写成$('#id')的时候最快,相当于执行了一次getElementById,后边的程序就不用再执行了。但是如果我们的选择器更加复杂的话,比如我们需要id下的CSS为className, 有这样的写法$('#id.className')和$('#id').find('.className');这两种写法的执行结果都是一样的。都是先去查找执行init,找到id了,立刻返回return。 然后再去执行find()函数方法。find也就是到当前dom对象下去查找选择器。但是如果直接$('.className')的话, 这样的是去执行init函数,然后到全局全文里,全部的dom对象一个个查找遍历。效率相比前面的低很多。就是说第一层选择最好是ID,而是简单选择器,目的就是定义范围,提高速度。
【前端】jQuery选择器$()的实现原理的更多相关文章
- jQuery源码:从原理到实战
jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...
- jquery ready方法实现原理 内部原理
jquery ready方法实现原理 内部原理 今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下 ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- Web前端JQuery面试题(三)
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- Web前端JQuery面试题(二)
Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...
- Web前端JQuery面试题(一)
Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...
- 从底层谈WebGIS 原理设计与实现(二):探究本质,WebGIS前端地图显示之地图比例尺换算原理
从底层谈WebGIS 原理设计与实现(二):探究本质,WebGIS前端地图显示之地图比例尺换算原理 作者:naaoveGI… 文章来源:http://www.cnblogs.com/naaove ...
- JQuery制作网页—— 第六章 jQuery选择器
1.jQuery选择器:jQuery选择器类似于CSS选择器,用来选取网页中的元素. Eg:$("h3").css("background",&qu ...
- 关于前端 jQuery 面试的知识点
参考一个博主整理的一些前端 jQuery 的一些面试题 参考博客:https://www.cnblogs.com/dashucoding/p/11140325.html 参考博客:https://ww ...
随机推荐
- 20165330 2017-2018-2 《Java程序设计》第2周学习总结
课本知识总结 第二章 基本数据类型与数组 标识符:标识类名.变量名.方法名.类型名.数组名及文件名的有效字符序列. 标识符的第一个字符不能是数字字符,且字母区分大小写. Java语言使用Unicode ...
- 服务端使用Zookeeper注册服务地址,客户端从Zookeeper获取可用的服务地址。
一个轻量级分布式RPC框架--NettyRpc - 阿凡卢 - 博客园 http://www.cnblogs.com/luxiaoxun/p/5272384.html 这个RPC框架使用的一些技术所解 ...
- 属性attribute和property的区别
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- SKBUFFER详解
纯属转载,不敢侵犯别人产权!! 一. SKB_BUFF的基本概念1. 一个完整的skb buff组成(1) struct sk_buff--用于维护socket buffer状态和描述信息(2) he ...
- java并发深入
对象由数据+行为组成.数据就是字段,行为就是方法. 并发须要保证这些可被多个线程訪问的共享对象数据的完整性,以及某些特定完整性语义. 比方一个类有一个字段count=0,两个线程同一时候对它做加1操作 ...
- HTTP来源地址
HTTP来源地址(referer,或HTTP referer),是HTTP表头的一个字段,用来表示从哪儿链接到目前的网页,采用的格式是URL. 换句话说,借着HTTP来源地址,目前的网页可以检查访客从 ...
- Error-The content of element type "web-app" must match "(icon?,display-
错误描述 The content of element type "web-app" must match "(icon?,display- name?,descript ...
- java7(3)——增强的catch之自动释放资源
跟mutilcatch一样,java7提供了自动释放资源的方法,但还是很少看到人使用,估计是麻烦去重写close方法.不过jdk内部一些类已经改成使用增强的catch来释放资源的写法,所以我们有必要了 ...
- abap 开发之创建表维护生成器
在sap开发中有时需要对一些自建表维护数据,但又不想写程序,怎么办呢??这个时候我们可以直接生成个表维护生成器,为其定义一个事物码就ok了.以下是表格维护生成器的生成步骤. 首先我们需要先定义表.输入 ...
- Java队列存储结构及实现
一.队列(Queue) 队列是一种特殊的线性表,它只允许在表的前段(front)进行删除操作,只允许在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头. 对于一个队 ...