jQuery是一个快速、简洁的Javascript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装Javascript常用的功能代码，提供一种简便的Javascript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
（二）使用1、引入
之前Javascript课程我们讲过外部js文件的引入，如下:
2、使用
在jQuery中，标识符$与jQuery是等价的，即jQuery == $，为了书写简单方便， 我们通常使用$替代jQuery。但jQuery是严格区分大小写的。
例如：我们可以通过jQuery(选择器) 或 $(选择器)来查找元素。
Jquery的使用
Hello Jquery
二、页面加载
jQuery提供了ready()函数，用于页面加载成功后执行。与window.onload函数作用一致。写法有以下三种：
代码示例：
$(function(){
alert(3);
})
JQuery的ready()与window.onload的区别：
1.执行时间不同window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
由此可见，$(document).ready()的执行时机要早于window.onload。
2.编写个数不同window.onload不能同时编写多个，如果有多个window.onload，只会执行一个。
$(document).ready()可以同时编写多个，并且都可以得到执行。
3.简化写法window.onload没有简化写法。
$(document).ready(function(){})可以简写成$(function(){});
三、js对象与jQuery对象(js对象)DOM对象：就是通过原生Javascript方法获取到的对象就是DOM对象。
jQuery对象：就是通过jQuery包装DOM对象后产生的对象。
jQuery对象和DOM对象可以进行相互转换，但是切记两个对象的属性和函数不能彼此混搭使用
DOM对象转jQuery对象，语法：jQuery(DOM对象); 或 $(DOM对象);
jQuery对象转DOM对象，语法：jQuery对象[index]; 或 jQuery对象.get(index);
代码示例1：
document
div区域标签
百度一下
四、jQuery选择器
jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的定位，从而完成元素属性和行为的处理。
jQuery选择器的分类：
1.基本选择器
2.层级选择器
3.属性选择器
4.过滤选择器
5.表单选择器
（一）基本选择器基本选择器是我们使用频率最高的选择器。
主要有：标签选择器、ID选择器、类选择器。
document
我是p标签
I am p
I am p3
（二）层级选择器
层级选择器指按节点树的层级关系获取元素。通俗一点讲就是子孙元素/父子元素/兄弟元素的关系。
主要有：后代选择器、子选择器。
1.后代选择器：parent child, 使用空格隔开。获得父元素内部的所有儿子、孙子...元素。（祖孙关系）
2.子选择器：parent > child ,使用>符号隔开。 获得父元素下面的子元素。（父子关系）
代码示例：
document
I am a p in div
i am a span in div
I am a span in p
hahahahahha
（三）属性选择器
根据属性或属性的值进行筛选。
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute=value] [attribute=value] $("[href='#'][class='demo']") 所有href属性的值等于"#"，且class属性的值为"demo"
代码示例：
document
链接1
链接2
链接3
（四）过滤选择器
过滤选择器是从获取的对象列表中再次筛选想要的元素。常用的过滤选择器有：
:first 第一个
:last 最后一个
:eq(index) 指定索引的
:gt(index) 大于索引的
:lt(index) 小于索引的
:odd 奇数
:even 偶数
:not() 除了**
:header 匹配标题,比如h2,h3...
代码示例：
document
H1 title
H2 title
- one
- two
- three
- four
document
sex:
man:
women:
hobby:
smoking:
tang:
walk:
五、jQuery的DOM操作
（一）属性操作
attr()
attr("属性名") 获取标签中对应的属性名的值
attr("属性名","属性值") 设置标签的属性名与对应的属性值
prop()
prop("属性名") 获取标签中对应的属性名的值
prop("属性名","属性值") 设置标签的属性名与对应的属性值
attr()与prop()的区别？
attr()能够实现对标签中自带属性与自定义属性的操作,但是在某些使用过程中有功能失效问题
prop()实现对标签中自带属性的操作,推荐使用
代码示例：
document
.c2{
border: 2px solid red;
}
（二）class类操作
1. addClass() 向被选元素添加一个或多个类
2. removeClass() 从被选元素删除一个或多个类
3. toggleClass() 对被选元素进行添加/删除类的切换操作
示例代码：
document
div{
border: 1px solid orange;
height: 100px;
width: 100px;
}
.c1{
border: 1px solid red;
height: 300px;
}
.c2{
width: 400px;
background-color: blue;
}
.c3{
background-color: springgreen;
}
区域标签
（三）内容操作
1. html() 设置或返回所选元素的内容（包括 HTML 标记）
2. text() 设置或返回所选元素的文本内容
3. val() 设置或返回表单字段的值
代码示例：
document
超链接-百度一下
（四）样式操作
1. css("样式名") 获取该样式的值
2. css("样式名","值") 设置一个样式
3. css({"样式名":"值","样式名":"值",...}) 设置多个样式
代码示例：
document
（五）文档操作
1、内部插入
1. append(); 在被选元素的结尾插入内容
2. prepend(); 在被选元素的开头插入内容
代码示例：
document
- one
- two
- three
1. after(); 在被选元素之后插入内容
2. before();在被选元素之前插入内容
3、删除1. empty(); 清空里面内容
2. remove(); 删除整个元素
3. detach(); 删除整个元素
2,3删除的区别,detach删除后还遗留在页面上，并没有完全消失
六、jQuery事件jQuery的事件类型和我们之前学习的Javascript事件类型基本上是一样的，只是在使用的方式上有一些差别 比如 点击事件click,失焦事件 blur,聚焦事件 focus等...
代码示例如下:
$obj.click(function(){
//编写点击事件触发后要执行的js代码
});
document
七、动画效果
1、显示与隐藏
jQuery特效，是指jQuery封装了JS的一些用于处理元素的显示与隐藏的比较好看的效果，我们可以通过调用函数直接使用。
常用的jQuery特效有以下几种：
1.显示与隐藏
（1）show(speed,callback);显示元素。
（2）hide(speed,callback);隐藏元素。
（3）toggle(speed,callback); 在 show() 和hide() 方法之间切换，显示被隐藏的元素，并隐藏已显示的元素。
参数说明：
speed 参数规定隐藏和显示的速度，可以取以下值："slow"、"fast" 或毫秒。
callback 参数是隐藏或显示完成后所执行的回调函数名称。
以上两个参数都是可选项。
代码示例：
document
div{
width: 100px;
height: 100px;
background-color: brown;
}
12
2、淡入淡出
（1）fadeIn(speed,callback);淡入已隐藏的元素。
（2）fadeOut(speed,callback);淡出可见元素。
（3）fadeToggle(speed,callback);在 fadeIn()与 fadeOut()方法之间进行切换。如果元素已淡出，则 fadeToggle()会向元素添加淡入效果。如果元素已淡入，则 fadeToggle()会向元素添加淡出效果。
参数作用同上。
代码示例：
document
div{
width: 100px;
height: 100px;
background-color: brown;
}
12
3、滑动效果
（1）slideDown(speed,callback);向下滑动元素，用于作显示。
（2）slideUp(speed,callback);向上滑动元素，用于作隐藏。
（3）slideToggle(speed,callback);在 slideDown()与 slideUp()方法之间进行切换。如果元素已向下滑动，则 slideToggle()会向上滑动它们。如果元素已向上滑动，则 slideToggle()会向下滑动它们。
参数作用同上。
代码示例：
document
div{
border:1px solid black;
width: 200px;
height: 200px;
}
#a {
background-color: brown;
}
12
4、自定义动画
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
animate(params,[speed],[fn])
参数解析:
1.params:一组包含作为动画属性和终值的样式属性和及其值的集合
2.speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
3.fn:在动画完成时执行的函数，每个元素执行一次。
代码示例：
八、数组操作
jQuery中有属于自己的遍历对象或者数组的方法，如下：
第一种写法:
$obj.each(function(i,dom){
});
第二种写法：
$.each(object,function(i,dom){
});
document
div{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
12
i :对象的成员或数组的索引
dom:对应变量或内容,该变量或者内容为js对象
注意：如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
代码示例：
document
123
321
九、表单插件
在学习javascript时候，我们手动的完成过表单数据的校验，这项功能在实际开发中也是常见的，属于通用功能，但是单纯的通过javascript进行校验，如果选项过多，那么还是有些力不从心。实际在开发中我们都是使用第三方工具，本案例中我们将使用jQuery插件validation进行表单的校验。
validation插件的使用步骤：
1、下载validation工具。
2、导入工具jquery-3.4.1.js、jquery.validate.js、messages_zh.js。
3、编写form表单信息并在脚本中给form表单绑定validate验证方法。
4、在form表单元素中逐个指定校验规则。
