jQuery 第一章 $()选择器
jquery 是什么？
jquery 其实就是一堆的js函数(js库)，也是普通的js而已。
有点像我们封装一个函数，把他放到单独的js 文件，等待有需要的时候调用它。
那么使用它有啥好处呢？
jquery面向用户良好的设计使得在使用过程中彻底解放了你原生操作DOM的接口，简单的举个简单的小例子，
原生js选择一个div ，和用jquery的区别。
jquery 只需要 $("div"),
原生的需要打一长串， 如下 ↓
<script>
console.log($("div"))// jquery 选择 console.log(document.getElementsByTagName("div"));//原生js选择 </script>
结果都选出来了，但是有一点不同的是， jquery选出来的dom 并不是原生dom，而是经过包装的 jquery对象。
有啥用呢，下面咋们继续探究。
$() 选择器
$()可以填什么呢， 它提供了 可以让你 像css选html标签那样选， 支持 .class #id tag 还有 .wra > span等等，
$()选择器，还有一个强大的容错机制，什么是容错机制呢？ 你可以往里面填 $(null) $(undefined) $() 空的，并不会报错。
除了可以填css选择 之外，还可以填函数， $(function(){ }) 这个是什么意思呢，其实他的作用跟
window.onload = function () { } 有点像，window.onload 是等待页面加载后运行，什么是页面加载后，
就是你的浏览器，绘制好了dom tree 和css tree 后， 加载好 img 的图片等等一系列操作后 再执行这个函数。
$(function(){ }) 是绘制好 dom tree 后就执行，两个 函数的作用有点像，但是是两个完全不一样作用的函数。
有些人喜欢把 script 的代码写在 head标签里面， 会使用 window.onload 和 $(function(){ }) 其实这是一种
很不好的编程习惯，除了加载页面慢之外，在企业开发中，一般不会有人这样写，除非你想被打死。 (别人都写在
body里面的最下面， 就你一人写在页面最上面。)
有人可能会问， $(function(){ }) 和写在 body 里面的最下面 不是一样吗？ 确实是一样，但是 这个函数的原理
就是使用定时器， 只不过这个定时器的毫秒为0 ，但是，在运行的时候， 虽然这个定时器的毫秒为0，但是，系统
还是会帮你数 4个毫秒后再执行。
接下来，咋们来使用原生 js 来模拟一下 $() 选择器的原理 还有链式调用 $().css().css()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <div class="dome" id="box">
11 div1
12 </div>
13 <div class="dome">
14 div2
15 </div>
16
17 <!-- <script src="./jquery/jquery.js"></script> -->
18
19 <script>
20 (function(){ //为什么使用立即执行函数？因为避免全局变量的污染，在window上定义$形成闭包外部只能通过$获取 51行
21 function jQuery(selector){
22 return new jQuery.prototype.init(selector);
23 //细心的小伙伴可能会发现，$()选出来的不是原生dom 而是 jquery对象。 new init 系统会 return this
24 }
25 jQuery.prototype.init = function(selector){// $() 内部使用的是init的函数。 这才是我们的主函数
26
27 if( selector.indexOf('.') != -1 ){//判断我们传进来的值，是.class 还是 #id
28 var dom = document.getElementsByClassName( selector.slice(1) );
29 //确定是.class 之后，咋们把 . 给截掉， 利用原生 get class 方法获取传进来的class。
30 }else if( selector.indexOf('#') != -1 ){
31 var dom = document.getElementById( selector.slice(1) );
32 //确定是#id 之后，咋们把 # 给截掉， 利用原生 get id 方法获取传进来的id。
33 }else{
34 var dom = document.getElementsByTagName(selector);
35 //除了 # 和 . 之外， 还有 tag
36 }
37
38 //以下代码 通过$() 获取的dom 在控制台可以看见是放在返回 init 的 this对象里面，
39 //所有我们要把选到的 dom 都放到 this 上面
40 this.length = 0;
41 if( dom.length == undefined ){//通过id选的dom 并没有length 所以是 undefined
42 this[0] = dom; //把选中的dom 放到 this 对象上
43 this.length ++; //给this上的length +1
44 }else{
45 for( var i = 0; i < dom.length; i++ ){//通过class 和 tag 选的dom一般为多个，所以for循环拿出
46 this[i] = dom[i];
47 }
48 this.length = dom.length;
49 }
50 }
51 window.$ = window.jQuery = jQuery;
52 })()
53
54 console.log($('.dome'))//输出结果
55 </script>
56 </body>
57 </html>
下面附上没有注释的代码 ↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="dome" id="box">
div1
</div>
<div class="dome">
div2
</div> <!-- <script src="./jquery/jquery.js"></script> --> <script>
(function(){
function jQuery(selector){
return new jQuery.prototype.init(selector);
}
jQuery.prototype.init = function(selector){ if( selector.indexOf('.') != -1 ){
var dom = document.getElementsByClassName( selector.slice(1) );
}else if( selector.indexOf('#') != -1 ){
var dom = document.getElementById( selector.slice(1) );
}else{
var dom = document.getElementsByTagName(selector);
}
this.length = 0;
if( dom.length == undefined ){
this[0] = dom;
this.length ++;
}else{
for( var i = 0; i < dom.length; i++ ){
this[i] = dom[i];
}
this.length = dom.length;
}
}
window.$ = window.jQuery = jQuery;
})() console.log($('.dome'))
</script>
</body>
</html>
接下来实现链式调用:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <div class="dome" id="box">
11 div1
12 </div>
13 <div class="dome">
14 div2
15 </div>
16
17 <!-- <script src="./jquery/jquery.js"></script> -->
18
19 <script>
20 (function(){
21 function jQuery(selector){
22 return new jQuery.prototype.init(selector);
23 }
24 jQuery.prototype.init = function(selector){
25
26 if( selector.indexOf('.') != -1 ){
27 var dom = document.getElementsByClassName( selector.slice(1) );
28 }else if( selector.indexOf('#') != -1 ){
29 var dom = document.getElementById( selector.slice(1) );
30 }else{
31 var dom = document.getElementsByTagName(selector);
32 }
33 this.length = 0;
34 if( dom.length == undefined ){
35 this[0] = dom;
36 this.length ++;
37 }else{
38 for( var i = 0; i < dom.length; i++ ){
39 this[i] = dom[i];
40 }
41 this.length = dom.length;
42 }
43 }
44 jQuery.prototype.css = function(config){ //css方法定义在jQuery.prototype上；
45 for(var i = 0; i < this.length; i++){//谁调用this this就指向谁，(指向init) 拿出init this对象里面的dom
46 for(var prop in config){
47 this[i].style[prop] = config[prop];
48 }
49 }
50 return this;//操作完 this，把this返回出去，下个 . 方法才能拿到 this，不然没人调用方法，会报错
51 }
52 jQuery.prototype.init.prototype = jQuery.prototype; //$()运行的是init的函数 init的prototype上面没有css方法。
53 //所以 我们把init的prototype指向jQuery.prototype
54 window.$ = window.jQuery = jQuery;
55 })()
56
57 $('.dome').css({width:'100px',height:'100px',background:'red'}).css({background:'blue'});
58 </script>
59 </body>
60 </html>
结果如下：
链式调用是可以写成
$('.dome')
.css({width:'100px',height:'100px',background:'red'})
.css({background:'blue'});
不然 调用的方法多了， 就会长长一条，可阅读性不好
最后一点，为什么要把dom包装成 jquery 对象呢，如果返回的是原生dom， 原生dom 是使用不了 jquery 的方法的，
只有把dom包装成jquery 对象才能使用 jquery 的方法， 如果想把一个原生dom包装成jquery对象，只需要 $(dom) 即可。
jQuery 第一章 $()选择器的更多相关文章
- jquery 第一章
1.本章目标 了解jquery 了解jquery和js的区别 掌握jquery的入门 掌握jquery对象和dom对象的区别2.jquery简介 jquery是一个轻量级 ...
- jQuery第一章
一.jQuery的优势 1.轻量级:压缩之后大小只有30KB左右. 2.强大的选择器:jQuery允许CSS1到CSS3几乎所有的选择器以及自身独创的选择器. 3.出色的DOM操作的封装:jQuery ...
- 第一百六十五节，jQuery，过滤选择器
jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...
- js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素
js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...
- 第一百六十四节，jQuery，常规选择器
jQuery,常规选择器 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名. ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- JQuery：JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
- JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
随机推荐
- Callable接口
Callable与Runnable的不同区别在于: 1.Callable有返回值 Runnable没有返回值 2.Callable需要实现的方法是call方法 Runnable需要实现的方 ...
- BrowserSync 热更新的使用(保存后自动刷新）
BrowserSync使用的优点,BrowserSync监听条件中的文件,发现更新会立刻刷新浏览器,就像 vue中的热更新一样,解放F5实现自动更新,提高开发效率, 解决了使用双屏幕时来回切换的烦恼! ...
- win32之临界区
线程安全问题 每个线程都有自己的栈,而局部变量是存储在栈中的,这就意味着每个线程都有一份自己的"局部变量",如果线程 仅仅使用 "局部变量" 那么就不存在线程安 ...
- Luogu P3262 [JLOI2015]战争调度
题意 给定一棵高度为 \(n\) 的完全二叉树,可以将节点设置成两种状态.如果某个叶子 \(x\) 的状态为 \(i\) 同时他的某个祖先也为 \(i\),那么这个叶子就会对祖先产生 \(f_{x,i ...
- JVM详解（二）-- 第2章 类加载器子系统
一.JVM内存结构 1.1 内存结构---概略图 1.2 内存结构--详细图 二.类加载器子系统的作用 类加载器子系统负责从文件系统或网络中加载.Class文件,文件需要有特定的标识(cafe bab ...
- P2868 [USACO07DEC]Sightseeing Cows G
题意描述 Sightseeing Cows G 给定一张有向图,图中每个点都有点权 \(a_i\),每条边都有边权 \(e_i\). 求图中一个环,使 "环上个点权之和" 除以 & ...
- 面试题：对NotNull字段插入Null值 有啥现象？
Hi,大家好!我是白日梦. 今天我要跟你分享的话题是:"对NotNull字段插入Null值有啥现象?" 一. 推荐阅读 首发地址:https://mp.weixin.qq.com/ ...
- 类似阿里双十一的可视化看板是怎么做的？无人机三维GIS看板也来了！
天猫双十一数据可视化看板 每年的双十一,天猫都会在整点时刻直播战绩,惊叹于可怕战绩的同时,也会被背后展示的数据大屏吸引,这样让人眼前一亮的可视化数据看板是怎么做出来的? 所谓可视化数据看板,就是挂在墙 ...
- RPC协议实践入门
RPC 是什么 RPC(Remote Procedure Call) 是一个计算机通信协议.该协议允许运行与一台计算机的程序调用另一个地址空间的程序,是一个通过发送请求-接受回应进行信息交互的系统. ...
- Cacti如何实现电话告警
Cacti是一套基于PHP,MySQL,SNMP及RRD Tool开发的网络流量监测图形分析工具.Cacti提供了一个快速轮询器,高级图表模板,多种数据采集方法和用户管理功能.所有这一切都被包装在一个 ...