相关咨询

FULLY MATCH ENTE

最新文章

推荐文章

jQuery源码笔记(一、持续更新)

一、jquery

1.1 jquery历史

官网:www.jquery.com

看见logoslogan(口号): 写更少的代码,做更多的事情。

官网的自我介绍:

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不兼容IE678的。

我们学习的jQuery1.12.3兼容IE678,更符合中国的实际情况。

jQuery3jQuery1.12.3API完全一样。

 

 

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

0.png 

 

 

jQuery的哲学是什么简化DOM开发,为兼容而生!

 

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

 

 

 

1.2 jquery引包

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

 

举例:

<!-- 引入jquery-->

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<script type="text/javascript">

// 书写所有jquery语句

</script>

 

1.3 jquery小体会

简化了元素的选择, 直接使用css选择器

// 使用js获取元素

var a = document.getElementById("box").getElementsByTagName("a")[0];

// 改变颜色

a.style.color = "red";

// 使用jquery选择元素

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

 

简化了元素的运动

 

// 选中所有的p

$("p").animate({"left": 500}, 2000);

图片1.png 

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

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

$("p").css("backgroundColor", "lightblue");

 

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

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

总结:jqueryjavascript的一个库,它不是一门新的语言,里面的所有语句都是使用js书写的。

 

二、$函数

2.1 jquery对象

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

 

获取内部文本:

js:   p1.innerHTML

jquery: $("p.teshu").html()

 

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

 

Js对象转为jQuery对象

直接使用$()

$(p1).html("是今天天气很好");

 

jQuery对象转为Js对象

直接使用[]

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

 

2.2 选择器

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

 

CSS2.1选择器

// Css2.1选择器

$(".box").css("color", "red");

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

$("div").css("color", "pink");

$("*").css("color", "green");

$("div.box1 h4").css("color", "purple");

$("div.box").css("color", "blue");

$("div, h3").css("color", "red");

 

还支持Css3选择器

$("p:first").css("color", "red");

$("p:last").css("color", "blue");

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

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

$("p:lt(3)").css("color", "red");

$("p:gt(2)").css("color", "blue");

$("p:odd").css("color", "red");

$("p:even").css("color", "blue");


 

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

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

 

2.3 jQuery函数

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

// jQuery函数

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

jQuery("p").css("background-color", "red");

 

三、常用方法

3.1 size()

size(): 可以获取元素对象的个数,没有参数, 返回的是包含元素对象的个数,是字符串类型。

 

DOM结构:

<p>1</p>

<p>2</p>

<p>3</p>

<p>4</p>

<p>5</p>

<p>6</p>

<p>7</p>

 

执行代码:

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

console.log($("p").size());

// 常用的是length

console.log($("p").length);

 

结果:

图片9.png

 

3.2 css()

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

 

// 读取teshu元素的width

console.log($("p.teshu").css("width"));

 

输出:

图片2.png

 

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

可以设置单一属性

使用方式:

对象.css("k", "v")

k:  要设置的属性名

v: 设置的属性值

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

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

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

 

图片3.png 

 

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

使用方式:

接受一个参数: json

对象.css({

k: v,

k: v,

k: v

})

 

DOM结构:

<p>5</p>

执行代码:

// 设置多个属性

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

// "width": 300,

// "height": 300,

// "backgroundColor": "red"

// })

// 等价方式

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

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

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

结果:

图片4.png

 

3.3 jquery绑定事件的方式

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

第一种使用方式:

$(dom).on(type, fn)

type: 事件类型

fn: 匿名函数

举例:

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

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

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

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

})

 

第二种使用方式:

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

举例:

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

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

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

})

 

3.4 show()hide()

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

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

 

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

// 添加点击事件

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

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

})

// btn2添加点击事件

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

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

})

 

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

// btn3绑定事件

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

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

})

// btn4绑定事件

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

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

})

 

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

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

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

})

// 传递参数

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

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

})

 

下午复习:

jquery引包:

需要注意的是引入jqueryscript标签不能和书写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

// btn1添加点击事件

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

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

})

// btn2添加点击事件

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

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

})

 

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

// btn3绑定点击事件

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

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

})

// btn4绑定点击事件

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

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

})

 

3.6 fadeIn()fadeout()

fadeIn(): 淡入

fadeOut(): 淡出

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

fadeOut(): fadeIn()相反

fadeToggle(): 切换

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

 

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

举例:

// 不传递参数

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

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

})

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

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

})

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 })



关注微信公众号“icketang”,获取最新前端资讯,学习资料  

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg