jQuery
1.jQuery概述
1.jQuery介绍
jQuery 是一个 JavaScript 库
框架：Mybatis （jar包） 大工具
插件：PageHelper （jar包） 小工具
库：js库：jquery (js文件) 小工具 （对于原生语言的升级，扩展）
所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程
2.jQuery快速入门
1.编写 HTML 文档
2.引入 jQuery 文件
3.使用 jQuery 获取元素
4.使用浏览器测试
快速入门
我是div
jQuery 是一个 JavaScript 库。
就是定义好的一个 JS 文件，内部封装了很多功能，可以大大简化我们的 JS 操作步骤。
要想使用，必须要引入该文件。
jQuery 的核心语法 $();
下载地址：http://jquery.com/download/
2.jQuery基本语法
1.JS对象和JQuery对象转换
jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换
JS的DOM对象转换成JQuery对象
$(JS的DOM对象)
jQuery对象转换成JS对象
jQuery对象[索引]
jQuery对象.get(索引)
对象转换
我是div
2.事件的基本使用
常用的事件
| 事件名 | 说明 |
|---|---|
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onclick | 鼠标单击事件 |
| ondblclick | 鼠标双击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onchange | 用户改变域的内容 |
在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法
事件的使用
3.事件的绑定和解绑
绑定事件
jQuery 对象.on(事件名称,执行的功能);
解绑事件
jQuery 对象.off(事件名称);
如果不指定事件名称，则会把该对象绑定的所有事件都解绑
事件的绑定和解绑
4.事件的切换
事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系
方式一：单独定义
$(元素).事件方法名1(要执行的功能);
$(元素).事件方法名2(要执行的功能);
//方式一 单独定义
$("#div").mouseover(function(){
//背景色：红色
//$("#div").css("background","red");
$(this).css("background","red");
});
$("#div").mouseout(function(){
//背景色：蓝色
//$("#div").css("background","blue");
$(this).css("background","blue");
});
方式二：链式定义
$(元素).事件方法名1(要执行的功能).事件方法名2(要执行的功能);
//方式二 链式定义
$("#div").mouseover(function(){
$(this).css("background","red");
}).mouseout(function(){
$(this).css("background","blue");
});
5.遍历操作
方式一：传统方式
for(let i = 0; i < 容器对象长度; i++){
执行功能;
}方式二：对象.each()方法
容器对象.each(function(index,ele){
执行功能;
});方式三：$.each()方法
$.each(容器对象,function(index,ele){
执行功能;
});方式四：for of语句
for(ele of 容器对象){
执行功能;
}
遍历
- 周杰伦
- 许嵩
- 薛之谦
3.jQuery选择器
1.基本选择器
选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
例如：id 选择器、类选择器、元素选择器、属性选择器等等
jQuery 中选择器的语法：$();
| 选择器 | 语法 | 作用 |
|---|---|---|
| 元素选择器 | $(“元素的名称”); | 根据元素名称获取元素对象们 |
| id选择器 | $("#id的属性值"); | 根据id属性值获取元素对象 |
| 类选择器 | $(".class的属性值"); | 根据class属性值获取元素对象们 |
基本选择器
div1
div2
div3
2.层级选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 后代选择器 | $(“A B”); | A下的所有B(包括B的子级) |
| 子选择器 | $(“A > B”); | A下的所有B(不包括B的子级) |
| 兄弟选择器 | $(“A + B”); | A相邻的下一个B |
| 兄弟选择器 | $(“A～B”); | A相邻的所有B |
层级选择器
s1
s1-1
s1-2
s2
p1
p2
3.属性选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 属性名选择器 | $(“A[属性名]”); | 根据指定属性名获取元素对象们 |
| 属性值选择器 | $(“A[属性名=属性值]”); | 根据指定属性名和属性值获取元素对象们 |
属性选择器
4.过滤器选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 首元素选择器 | $(“A:first”); | 获得选择的元素中的第一个元素 |
| 尾元素选择器 | $(“A:last”); | 获得选择的元素中的最后一个元素 |
| 非元素选择器 | $(“A:not(B)”); | 不包括指定内容的元素 |
| 偶数选择器 | $(“A:even”); | 偶数，从0开始计数 |
| 奇数选择器 | $(“A:odd”); | 奇数，从0开始计数 |
| 等于索引选择器 | $(“A:eq(index)”); | 指定索引元素 |
| 大于索引选择器 | $(“A:gt(index)”); | 大于指定索引元素 |
| 小于索引选择器 | $(“A:lt(index)”); | 小于指定索引元素 |
语法： 基本选择器/层级选择器 : 过滤选择器
基本选择器 不包含id选择器
过滤选择器，是从多个结果中选择一个或多个
过滤器选择器
div1
div2
div3
div4
5.表单属性选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 可用元素选择器 | $(“A:enabled”); | 获得可用元素 |
| 不可用元素选择器 | $(“A:disabled”); | 获得不可用元素 |
| 单选/复选框被选中的元素 | $(“A:checked”); | 获得单选/复选框选中的元素 |
| 下拉框被选中的元素 | $(“A:selected”); | 获得下拉框选中的元素 |
表单属性选择器
男
女
学习
睡觉
4.jQuery DOM
1.操作文本
常用方法
| 方法 | 作用 |
|---|---|
| html() | 获取标签的文本 |
| html(value) | 设置标签的文本内容，解析标签 |
操作文本
我是div
2.操作对象
常用方法
| 方法 | 作用 |
|---|---|
| $(“元素”) | 创建指定元素 |
| append(element) | 添加成最后一个子元素，由添加者对象调用 |
| appendTo(element) | 添加成最后一个子元素，由被添加者对象调用 |
| prepend(element) | 添加成第一个子元素，由添加者对象调用 |
| prependTo(element) | 添加成第一个子元素，由被添加者对象调用 |
| before(element) | 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 |
| after(element) | 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 |
| remove() | 删除指定元素(自己移除自己) |
| empty() | 清空指定元素的所有子元素 |
append，appendTo，prepend，prependTo是父子关系的操作（父亲添加儿子，或者是，儿子添加到父亲）
before，after是兄弟关系的操作
操作对象
- 北京
- 上海
- 广州
- 深圳
- 加油
- 雄起
3.操作样式
常用方法
| 方法 | 作用 |
|---|---|
| css(name) | 根据样式名称获取css样式 |
| css(name,value) | 设置CSS样式 |
| addClass(value) | 给指定的对象添加样式类名 |
| removeClass(value) | 给指定的对象删除样式类名 |
| toggleClass(value) | 如果没有样式类名，则添加。如果有，则删除 |
操作样式
我是div
4.操作属性
常用方法
| 方法 | 作用 |
|---|---|
| attr(name,[value]) | 获得/设置属性的值 |
| prop(name,[value]) | 获得/设置属性的值(checked，selected) |
prop专门用于操作单选框，复选框，下拉列表
操作属性
男
女
5.案例 随机图片
动态切换小图分析
1.准备一个数组
2.定义一个计数器
3.定义定时器对象
4.定义图片路径变量
5.为开始按钮绑定单击事件
6.设置按钮状态
7.设置定时器，循环显示图片
8.循环获取图片路径
9.将当前图片显示到小图片上
10.计数器自增
显示大图分析
1.为停止按钮绑定单击事件
2.取消定时器
3.设置按钮状态
4.将图片显示到大图片上
随机图片
