jQuery教科书版教学

一.基本使用

1.jQuery的入口函数

$(function () {
	……
	//此处是页面DOM加载完成的入口
})

1.等到DOM结构渲染完毕即可知行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装

2.相当于原生js中的DOMContentLocaded

3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才能执行内部代码

2.jQuery的顶级对象

1.$与jQuery实现的效果相同，通常情况下使用$

2.$是jQuery中的顶级对象，相当于原生js中的window。八元素利用$包装成jQuery对象，就可以调用jQuery的方法

3.jQuery对象和DOM对象

1.DOM对象：用原生js获取过来的对象就是DOM对象

var myDiv = document.querySelector('div');
console.log(myDiv)

2.jQuery对象，用jQuery方法获取火来的对象就是jQuery对象

本质：通过$把DOM元素进行包装(伪数组形式存储)

$('div');
console.log(div)

3.jQuery对象智能使用jQuery方法，DOM对象则智能使用原生js方法和属性

4.jQuery和DOM对象之间是可以相互转换的

（1）：DOM转换为jQuery对象

$('muDiv')

（2）：jQuery对象转换为DOM对象

$('myDiv')[index]
或者
$('myDiv')get(index)

4.选择器

1.基础选择器

名称	用法	描述
ID选择器	$(“#id”)	获取指定ID的元素
全选选择器	$(“*”)	匹配所有元素
类选择器	$(“.class”)	获取同意类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

2.层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	使用>号，获取亲儿子层级的元素；注意，并不会获取子孙层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代悬念则其，获取ul下的所有li元素，包括子孙

3.隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

4.筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

5.jQuery筛选方法（重要）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xt8neqpE-1684414707160)(C:\Users\26424\AppData\Roaming\Typora\typora-user-images\image-20230518112930738.png)]

6.排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

<button>点击</button>
<script>
$(function() {
$("button").click(function() {
$(this).css("background","pink");
$(this).siblings("button").css("background","")
})
})
</script>

5.样式操作

1.操作css方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式

1.参数只写属性名，则是返回属性值

$(this).css("color");

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引导，之如果是熟悉可以不用跟单位u和引导

$(this).css("color","red")

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({"color":"white","font-size":"20px"})

2.设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点

1.添加类

$("div".addClass("current"))

2.移除类

$("div").removeClass("current")

3.切换类

$("div").toggleClass("current")

3.类操作与className区别

原生js中的className会覆盖原有的类名

jQuery里面类操作只会对指定类进行操作，不影响原先的类名

6.jQuery效果

1.显示隐藏效果

1.显示语法规范

show([speed,[easing],[fn]])

2.显示参数

（1）参数都可以省略，吴东华直接显示

（2）speed：三种预定速度之一的字符串（“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值

（3）easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"

（4）fn：回调函数，再动画完成时执行的函数，每个元素执行一次

2.滑动效果

1.下滑效果过语法规范

slideDown([speed,[easing],[fn]])

2.下滑效果参数

（1）参数都可以省略

（2）speed：三种预定速度之一的字符串（“slow”,“normal”,or “fast”）或者表示动画时长的毫秒数值

（3）easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"

（4）fn：回调函数，再动画完成时执行的函数，每个元素执行一次

3.动画队列及定制排队方法

1.动画或效果队列

动画或效果一旦出发就会执行，如果多次出发，就会造成多个动画或者效果排队执行

2.停止排队

（1）stop()方法用于停止动画或效果

（2）注意：stop（）写到动画或者效果的前面，相当于停止结束上一次 的动画