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总结一:选择器归 ...
随机推荐
- 用python写一个豆瓣短评通用爬虫(登录、爬取、可视化)
原创技术公众号:bigsai,本文在1024发布,祝大家节日快乐,心想事成. @ 目录 前言 登录 爬取 储存 可视化分析 前言 在本人上的一门课中,老师对每个小组有个任务要求,介绍和完成一个小模块. ...
- 第二十七章 ansible变量介绍
一.ansible变量介绍 1.概念 变量提供了便捷的方式来管理Ansible playbook的每一个项目中的动态值,比如nginx-1.6.3这个软件包的版本,在其它地方或许会反复使用,那么如果讲 ...
- CodeForces 1408I Bitwise Magic
题意 给定三个整数 \(n,k,c\) 和一个长度为 \(n\) 的序列 \(a\),保证 \(a_i\) 互不相同.可以操作 \(k\) 次,每次随机选择一个 \(a_i\) 变成 \(a_i-1\ ...
- CodeForces 916D Jamie and To-do List
题意 你需要维护一个任务列表,有 \(q\) 次操作,每次操作形如以下四种: set a x:设置任务 \(a\) 的优先级为 \(x\),如果任务列表中没有 \(a\) 则加进来. remove a ...
- 撸个反向代理，激活JRebel~
持续原创输出,点击上方蓝字关注我 目录 前言 本地反向代理 服务器反向代理[个人推荐] IDEA安装JRebel并激活 服务器安装JRebel并激活 总结 前言 热部署相信大家都听说过,比如Sprin ...
- 设计Twitter 时间线
「design Twitter」是 LeetCode 上第 335 道题目,不仅题目本身很有意思,而且把合并多个有序链表的算法和面向对象设计(OO design)结合起来了,很有实际意义,本文就带大家 ...
- C++ stringstream 实现字符与数字之间的转换
c++中利用srtingstream可以将数字转为字符串,或者将字符串转为数字: 首先将double型数字串转成了string: stringnum2string(double *a,int n) { ...
- 无法将“add-migration”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。解决方案
在程序包管理控制台中执行 Install-Package Microsoft.EntityFrameworkCore.Tools
- 阅源-jdk8-FunctionalInterface注解
package java.lang; import java.lang.annotation.*; /** * An informative annotation type used to indic ...
- Servlet与通信协议概述
Servlet 是一个java应用程序,一个Servlet应用有一个或多个Servlet程序,JSP页面会被转换和编译成Servlet程序. Servlet应用无法独立运行,必须运行在Servlet容 ...