jQuery源码笔记（一、持续更新）【爱创课堂专业前端培训】

一、jquery
1.1 jquery历史
官网：www.jquery.com

看见logo和slogan（口号）： 写更少的代码，做更多的事情。

官网的自我介绍：

jQuery is a fast, small, and feature-rich JavaScript library.

jQuery是一个快速、小巧的、特点众多的JavaScript库。

It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

它用自己非常方便的跨浏览器API，使得诸如文档遍历、文档操作、事件监听、动画、和Ajax变得更简单。

With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

通过把多用途和高拓展性结合起来，jQuery改变了无数程序员书写JavaScript程序的方式。

说说jQuery的版本问题：

jQuery的最新版本是3.1.0，不兼容IE6、7、8的。

我们学习的是jQuery1.12.3，兼容IE6、7、8的，更符合中国的实际情况。

jQuery3和jQuery1.12.3的API完全一样。

下载jQuery就是点击官网的链接就行了：

0.png

jQuery的哲学是什么：简化DOM开发，为兼容而生！

jQuery简化了我们对DOM的开发，所以我们就有更多的精力，着眼于业务的书写。所以，从jQuery课程开始，我们要练习写业务！写鲁棒可靠的业务！代码量就要多起来了！

1.2 jquery引包
jquery是javascript的一个库， 如果想要使用jquery，必须先引入jquery，引入jquery的script标签，不能和书写jquery语句的script标签是同一个。

举例：

1

2

3

4 // 书写所有jquery语句

5

1.3 jquery小体会
l 简化了元素的选择， 直接使用css选择器

1 // 使用js获取元素

2 var a = document.getElementById(“box”).getElementsByTagName(“a”)[0];

3

4 // 改变颜色

5 a.style.color = “red”;

6

7 // 使用jquery选择元素

8 $("#box ul li.teshu a").css(“color”, “blue”);

l 简化了元素的运动

1 // 选中所有的p

2 $(“p”).animate({“left”: 500}, 2000);

图片1.png

l jquery所有的操作都是批量的，不需要在使用for循环， 不管是添加事件还是改变样式都是批量的。

1

2 // 将所有的p元素背景颜色改变

3 $(“p”).css(“backgroundColor”, “lightblue”);

l jquery简化了DOM操作，如添加、删除和修改节点。

l jquery都是兼容的， 不需要再进行能力检测了。

总结：jquery是javascript的一个库，它不是一门新的语言，里面的所有语句都是使用js书写的。

二、$函数2.1jquery对象juqery是js库，如果想要使用要先引入，引入之后，才可以使用里面的各种各样的方法，会向全局暴露一个$()函数，所以我们书写juqery的所有语句都是以$开头，jquery有很多方法，我们可以接着打点调用其他方法。

获取内部文本：

1 js: p1.innerHTML

2 jquery: $(“p.teshu”).html()

面试：Js对象与jQuery对象互相转换

Js对象转为jQuery对象

直接使用$()

3 $(p1).html(“是今天天气很好”);

jQuery对象转为Js对象

直接使用[]

1 $(".teshu")[0].innerHTML = “p元素”;

2.2 选择器
jquery非常好用的一点就是选择器，直接使用css选择器即可选中元素。

CSS2.1选择器

1 // Css2.1选择器

2 $(".box").css(“color”, “red”);

3 $("#box").css(“color”, “blue”);

4 $(“div”).css(“color”, “pink”);

5 $("*").css(“color”, “green”);

6 $(“div.box1 h4”).css(“color”, “purple”);

7 $(“div.box”).css(“color”, “blue”);

8 $(“div, h3”).css(“color”, “red”);

还支持Css3选择器

1 $(“p:first”).css(“color”, “red”);

2 $(“p:last”).css(“color”, “blue”);

3 $(“p:eq(3)”).css(“color”, “blue”);

4 $(“p”).eq(4).css(“color”, “red”);

5 $(“p:lt(3)”).css(“color”, “red”);

6 $(“p:gt(2)”).css(“color”, “blue”);

7 $(“p:odd”).css(“color”, “red”);

8 $(“p:even”).css(“color”, “blue”);

eq(n)还可以提取出一个方法

1 $(“p”).eq(4).css(“color”, “red”);

2.3 jQuery函数
jquery最初引入的时候向全局暴露的是jQuery函数，但是后来人们觉得写起来复杂，才修改为$，jquery和$使用方式完全一样，jquery仍然保留，还可以继续使用.

1 // jQuery函数

2 // 选中所有p元素并改变颜色

3 jQuery(“p”).css(“background-color”, “red”);

三、常用方法
3.1 size()
size(): 可以获取元素对象的个数，没有参数， 返回的是包含元素对象的个数，是字符串类型。

DOM结构：

1

1

2

2

3

3

4

4

5

5

6

6

7

7

执行代码:

1 // 输出所有P元素的个数

2 console.log($(“p”).size());

3

4 // 常用的是length

5 console.log($(“p”).length);

结果：

1 图片9.png

3.2 css()
l css(): 可以读取元素计算后的样式属性，参数就是要读取的属性名， 返回的是读取的属性值，是一个字符串类型

1 // 读取teshu元素的width

2 console.log($(“p.teshu”).css(“width”));

输出：

1 图片2.png

l css(): 可以设置元素对象的样式属性

可以设置单一属性

使用方式：

对象.css(“k”, “v”)

k: 要设置的属性名

v: 设置的属性值

1 $(".teshu").css(“width”, 150); // 可以不添加单位，一定不要使用双引号

2 $(".teshu").css(“height”, “150px”); // 可以带单位， 但是一定要加上双引号

3 所有的样式默认添加到行内样式

图片3.png

l css(): 还是设置多个属性

使用方式：

接受一个参数： json

对象.css({

k: v,

k: v,

k: v

})

DOM结构：

2

5

执行代码：

1

2 // 设置多个属性

3 // $(".teshu").css({

4 // “width”: 300,

5 // “height”: 300,

6 // “backgroundColor”: “red”

7 // })

8

9 // 等价方式

10 $(".teshu").css(“width”, “300px”);

11 $(".teshu").css(“height”, “300px”);

12 $(".teshu").css(“background-color”, “red”);

结果：

1 图片4.png

3.3 jquery绑定事件的方式
jquery中绑定事件的方式有两种：

第一种使用方式：

$(dom).on(type, fn)

type: 事件类型

fn: 匿名函数

举例：

1 // 使用第一种方式添加点击事件

2 $("#btn").on(“click”, function() {

3 // css()的特殊用法 +=

4 $("#box").css(“width”, “+=30px”);

5 })

第二种使用方式：

对象.click(function() {}) 参数就是匿名函数

举例：

1 // 使用第二种绑定方式添加点击事件

2 $("#btn").click(function() {

3 $("#box").css(“width”, “+=30px”);

4 })

3.4 show()和hide()
show(): 显示的意思。 只有当元素的状态是display: none的时候才可以使用，最终状态的是display: block

hide(): 隐藏的意思。 只有当元素的状态是display: block的时候才可以使用， 最终状态是display: none

可以不写参数， 表示“干嘣”效果

1 // 添加点击事件

2 $("#btn1").click(function() {

3 $("#box").show();

4 })

5

6 // 给btn2添加点击事件

7 $("#btn2").click(function() {

8 $("#box").hide();

9 })

还可以书写参数，参数就是要完成动画的事件， 单位是Ms, 省略不写

1 // 给btn3绑定事件

2 $("#btn3").click(function() {

3 $("#box").show(2000);

4 })

5 // 给btn4绑定事件

6 $("#btn4").click(function() {

7 $("#box").hide(2000);

8 })

toggle: 显示、消失切换。 不写参数也是“干嘣”效果， 也可以书写参数，单位也是ms, 省略不写

1 $("#btn5").click(function() {

2 $("#box").toggle();

3 })

4

5

6 // 传递参数

7 $("#btn6").click(function() {

8 $("#box").toggle(2000);

9 })

下午复习：
jquery引包：

需要注意的是引入jquery的script标签不能和书写jquery语句的script是同一个

$函数：

引入jquery之后， 所有语句都是以$函数开头

选择器：

jquery很好用的一点就是选择器。

支持Css2.1选择器：

类、id、标签、通配符、并集、交集、后代

支持Css3选择器：

$(“p:first”)

$(“p:last”)

$(“p:eq(xx)”)

$(“p”).eq()

$(“p:lt(xx)”)

$(“p:gt(xx)”)

$(“p:odd”)

$(“p:even”)

jQuery函数:

最初引入Jquery向全局暴露的是jQuery函数， 后来人们觉得书写麻烦才改为$()

常用方法：

size(): 表示获取元素对象的个数 没有参数 返回获取到的元素对象的个数

比较常用的是length属性

css(): 可以读取元素的属性样式 接受一个参数： 要读取的属性名，返回值是属性值， 是字符串类型

css(): 可以设置元素对象的属性样式

可以设置单一属性

使用方式：

对象.css(k, v)

k: 属性名

v: 属性值

可以设置多个属性样式：

使用方式：

接受一个参数就是 json
对象.css({

k: v,

k: v

})

jquery绑定事件的方式：

有两种：

第一种方式：

$(dom).on(click, function())

第一个参数表示事件类型

第二个参数就是匿名函数

第二种方式：

$(dom).click(function() {}) 参数就是匿名函数

show()和hide()：

show(): 显示。 只有当元素的状态是display: none的时候才可以使用，最终状态是display: block

hide(): 隐藏。 与show()相反。

toggle: 切换

3.5 slideDown()和slideUp
slideDown(): 慢慢展开

slideUp(): 徐徐合起

slideDown(): 只有当元素的状态是display: none的时候才可以调用， 当元素调用该方法的时候，元素的height瞬间为0， 然后慢慢的以动画的形式变到元素的初始height，最终状态是display: block

slideUp(): 刚好相反

slideToggle()：切换

可以不写参数，也是动画的效果， 默认是400ms

1 // 给btn1添加点击事件

2 $("#btn1").click(function() {

3 $("#box").slideDown();

4 })

5 // 给btn2添加点击事件

6 $("#btn2").click(function() {

7 $("#box").slideUp();

8 })

还可以书写参数，参数就是完成动画的事件， 单位也是ms， 省略不写

1 // 给btn3绑定点击事件

2 $("#btn3").click(function() {

3 $("#box").slideDown(3000);

4 })

5 // 给btn4绑定点击事件

6 $("#btn4").click(function() {

7 $("#box").slideUp(3000);

8 })

3.6 fadeIn()和fadeout()
fadeIn(): 淡入

fadeOut(): 淡出

fadeIn(): 只有当元素的状态是display: none才可以调用，当元素调用该方法的时候，该元素的opacity：0， 然后慢慢的增加到opacity：1 ，最终状态是display: block.

fadeOut(): 与fadeIn()相反

fadeToggle(): 切换

fadeTo(600, 0.5): 第一个参数就是完成事件， 第二个参数就是透明度

可以不写参数，默认是400ms ， 也可以书写参数 自定义时间

举例：

1 // 不传递参数

2 $("#btn1").click(function() {

3 $("#box").fadeIn();

4 })

5

6 $("#btn2").on(“click”, function() {

7 $("#box").fadeOut();

8 })

9

10 // 传递参数

11 $("#btn3").click(function() {

12 $("#box").fadeIn(2000);

13 })

14

15 $("#btn4").on(“click”, function() {

16 $("#box").fadeOut(2000);

17 })

18

19

20 // fadeToggle

21 $("#btn5").click(function() {

22 $("#box").fadeToggle();

23 })

24

25 // fadeToggle 传参

26 $("#btn6").click(function() {

27 $("#box").fadeToggle(2000);

28 })

29

30 // fadeTo

31 $("#btn7").click(function() {

32 $("#box").fadeTo(1000, .5);

33 })