【前端】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 ...
随机推荐
- gdb常见命令(未完,待续)
// 编译文件时,带参-g > gcc -g test.c // 进入gdb调试界面 > gdb a.out 或者 > gdb > file a.out // 查看文件内容 & ...
- 修改Linux的基本配置(如主机名、ip等)
1.修改主机名 vi /etc/sysconfig/network 2.修改ip地址(注意修改完了后,reboot) 查看网卡的命令: ifconfig 开启网卡的命令: ifup eth0 修改ip ...
- 背景图片拉伸显示CSS
.divbackimg{ width:150px; height:50px; background-image:url(./btn.png); -moz-background-size: 100% 1 ...
- ORACLE内存结构之SGA
SGA的管理: SQL> show parameter sga NAME TYPE VALUE ---------- ...
- POJ3150—Cellular Automaton(循环矩阵)
题目链接:http://poj.org/problem?id=3150 题目意思:有n个数围成一个环,现在有一种变换,将所有距离第i(1<=i<=n)个数小于等于d的数加起来,对m取余,现 ...
- linux mint19.1解决网易云音乐安装后打不开的问题
安装网易云音乐: sudo dpkg -i 文件路径#文件路径可以直接把刚才下载的软件包拖进终端sudo apt install -f 修复依赖关系 安装后打不开的问题: 1.sudo gedit / ...
- intellij idea 主题更换(换黑底或白底)
更换主题: File-->setting-->Appearance&Behavior-->Appearance Intellij:白底黑字 Darcula:黑底白字
- 使用QJM构建HDFS HA架构(2.2+)
转载自:http://blog.csdn.net/a822631129/article/details/51313145 本文主要介绍HDFS HA特性,以及如何使用QJM(Quorum Journa ...
- kettle添加hadoop cluster时报错Caused by: java.lang.IllegalArgumentException: Does not contain a valid host:port authority: hadoop:password@node56:9000
完整报错是: Caused by: java.lang.IllegalArgumentException: Does not contain a valid host:port authority: ...
- Spring第二弹—–搭建与测试Spring的开发环境
PS:Spring既可以使用在javaSE中,也可以使用在javaWeb中. 使用Spring需要的jar 下载spring(我下载的是2.5.6版本),然后进行解压缩,在解压目录中找到下面jar文件 ...