08.Jquery

? 1、JQuery快速入门

1.1、JQuery介绍

jQuery 是一个 JavaScript 库。
所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
jQuery 官网：https://www.jquery.com

1.2、JQuery快速入门

开发思路

编写 HTML 文档。
引入 jQuery 文件。
使用 jQuery 获取元素。
使用浏览器测试。

代码实现




    
    
    快速入门


    我是div

1.3、小结

jQuery 是一个 JavaScript 库。
说白了就是定义好的一个 JS 文件，内部封装了很多功能，可以大大简化我们的 JS 操作步骤。
jQuery 官网：https://www.jquery.com。
要想使用，必须要引入该文件。
jQuery 的核心语法 $();

2、JQuery基本语法

2.1、JS对象和JQuery对象转换

jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。

JS 的 DOM 对象转换成 jQuery 对象

//$(JS 的 DOM 对象);

// JS方式，通过id属性值获取div元素
let jsDiv = document.getElementById("div");
alert(jsDiv.innerHTML);
//alert(jsDiv.html());  JS对象无法使用jQuery里面的功能

// 将 JS 对象转换为jQuery对象
let jq = $(jsDiv);
alert(jq.html());

jQuery 对象转换成 JS 对象

/*jQuery 对象[索引];
jQuery 对象.get(索引);*/

// jQuery方式，通过id属性值获取div元素
let jqDiv = $("#div");
alert(jqDiv.html());
// alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能

// 将 jQuery对象转换为JS对象
let js = jqDiv[0];
alert(js.innerHTML);

2.2、事件的基本使用

常用的事件
在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。

代码实现




    
    
    事件的使用

2.3、事件的绑定和解绑

绑定事件

//jQuery 对象.on(事件名称,执行的功能);

//给btn1按钮绑定单击事件
$("#btn1").on("click",function(){
alert("点我干嘛?");
});

解绑事件

如果不指定事件名称，则会把该对象绑定的所有事件都解绑

//jQuery 对象.off(事件名称);
```
//通过btn2解绑btn1的单击事件
$("#btn2").on("click",function(){
$("#btn1").off("click");
});
```

2.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");
});

2.5、遍历操作

方式一：传统方式

for(let i = 0; i < 容器对象长度; i++){
		执行功能;
}

//方式一：传统方式
$("#btn").click(function(){
    let lis = $("li");
    for(let i = 0 ; i < lis.length; i++) {
        alert(i + ":" + lis[i].innerHTML);
    }
});

方式二：对象.each()方法

容器对象.each(function(index,ele){
	执行功能;
});

//方式二：对象.each()方法
$("#btn").click(function(){
    let lis = $("li");
    lis.each(function(index,ele){
        alert(index + ":" + ele.innerHTML);
    });
});

方式三：$.each()方法

$.each(容器对象,function(index,ele){
	执行功能;
});

//方式三：$.each()方法
$("#btn").click(function(){
    let lis = $("li");
    $.each(lis,function(index,ele){
        alert(index + ":" + ele.innerHTML);
    });
});

方式四：for of语句

for(ele of 容器对象){
	执行功能;
}

//方式四：for of 语句遍历
$("#btn").click(function(){
    let lis = $("li");
    for(ele of lis){
        alert(ele.innerHTML);
    }
});

2.6、小结

JS 对象和 jQuery 对象相互转换
- $(JS 的 DOM 对象)：将 JS 对象转为 jQuery 对象。
- jQuery 对象[索引] jQuery
- 对象.get(索引)：将 jQuery 对象转为 JS 对象。
事件
- 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
- on(事件名称,执行的功能)：绑定事件。
- off(事件名称)：解绑事件。
遍历
- 传统方式。
- 对象.each() 方法。
- $.each() 方法。
- for of 语句。

3、JQuery选择器

3.1、基本选择器

选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
例如：id 选择器、类选择器、元素选择器、属性选择器等等。

jQuery 中选择器的语法：$();

代码实现




    
    
    基本选择器


    div1
    div2
    div3

3.2、层级选择器

代码实现

3.3、属性选择器

代码实现




    
    
    属性选择器

3.4、过滤器选择器

代码实现




    
    
    过滤器选择器


    div1
    div2
    div3
    div4

3.5、表单属性选择器

代码实现




    
    
    表单属性选择器


    
    
    男
    女
    学习
    睡觉

3.6、小结

选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
jQuery 中选择器的语法：$();
基本选择器
- $("元素的名称");
- $("#id的属性值");
- $(".class的属性值");
层级选择器
- $("A B");
- $("A > B");
属性选择器
- $("A[属性名]");
- $("A[属性名=属性值]");
过滤器选择器
- $("A:even");
- $("A:odd");
表单属性选择器
- $("A:disabled");
- $("A:checked");
- $("A:selected");

4、JQuery DOM

4.1、操作文本

常用方法

代码实现




    
    
    操作文本


    我是div

4.2、操作对象

常用方法

代码实现

4.3、操作样式

常用方法

代码实现




    
    
    操作样式
    


    我是div

4.4、操作属性

常用方法

代码实现

4.5、小结

操作文本
- html() html(…)：获取或设置标签的文本，解析标签。
操作对象
- $(“元素”)：创建指定元素。
- append(element)：添加成最后一个子元素，由添加者对象调用。
- prepend(element)：添加成第一个子元素，由添加者对象调用。
- before(element)：添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用。
- after(element)：添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用。
- remove()：删除指定元素(自己移除自己)。
操作样式
- addClass(value)：给指定的对象添加样式类名。
- removeClass(value)：给指定的对象删除样式类名。
操作属性
- attr(name,[value])：获得/设置属性的值。
- prop(name,[value])：获得/设置属性的值(checked，selected)。

5、综合案例复选框

5.1、案例效果

5.2、分析和实现

功能分析

全选
- 1. 为全选按钮绑定单击事件。
  2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。
全不选
- 1. 为全不选按钮绑定单击事件。
  2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。
反选
- 1. 为反选按钮绑定单击事件
  2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。

代码实现

分类ID	分类名称	分类描述	操作
1	手机数码	手机数码类商品	修改\|删除
2	电脑办公	电脑办公类商品	修改\|删除
3	鞋靴箱包	鞋靴箱包类商品	修改\|删除
4	家居饰品	家居饰品类商品	修改\|删除

6、综合案例随机图片

6.1、案例效果

6.2、动态切换小图的分析和实现

功能分析
1. 准备一个数组
2. 定义计数器
3. 定义定时器对象
4. 定义图片路径变量
5. 为开始按钮绑定单击事件
6. 设置按钮状态
7. 设置定时器，循环显示图片
8. 循环获取图片路径
9. 将当前图片显示到小图片上
10. 计数器自增

代码实现




    
    
    随机图片

6.3、显示大图的分析和实现

功能分析
1. 为停止按钮绑定单击事件
2. 取消定时器
3. 设置按钮状态
4. 将图片显示到大图片上

代码实现

//11.为停止按钮绑定单击事件
$("#stopBtn").click(function(){
    //12.取消定时器
    clearInterval(time);

    //13.设置按钮状态
    //启用开始按钮
    $("#startBtn").prop("disabled",false);
    //禁用停止按钮
    $("#stopBtn").prop("disabled",true);

    //14.将图片显示到大图片上
    $("#big").prop("src",imgSrc);
    $("#big").prop("style","width: 400px; height: 400px;");
});

JavaWeb

08.Jquery

1.1、JQuery介绍

1.2、JQuery快速入门

1.3、小结

2、JQuery基本语法

2.1、JS对象和JQuery对象转换

2.2、事件的基本使用

2.3、事件的绑定和解绑

2.4、事件的切换

2.5、遍历操作

2.6、小结

3、JQuery选择器

3.1、基本选择器

3.2、层级选择器

3.3、属性选择器

3.4、过滤器选择器

3.5、表单属性选择器

3.6、小结

4、JQuery DOM

4.1、操作文本

4.2、操作对象

4.3、操作样式

4.4、操作属性

4.5、小结

5、综合案例 复选框

5.1、案例效果

5.2、分析和实现

6、综合案例 随机图片

6.1、案例效果

6.2、动态切换小图的分析和实现

6.3、显示大图的分析和实现

相关

5、综合案例复选框

6、综合案例随机图片