1.jQuery 介绍
1.1JavaScript 库
JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show 等。 简单理解就是一个 JS 文件，里面对原生 JS 代码进行了封装，存放到里面。这样我们就可以快速而方便的使用封装好的功能。 比如 jQuery，就是为了快速方便的操作 DOM，里面基本都是函数（方法）。 常见的 JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext.js、移动端的 zepto 等，这些库都是对原生 JS 的封装，内部都是用 JS 实现的。
1.2jQuery 的概念
jQuery 总体概况如下。
●jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是 “write less, do more”，即倡导写更少的代码，做更多的事情。
●j 就是 JavaScript；Query 是查询；意思是指将 JavaScript 中的 DOM 做了封装，我们可以快速的使用里面的功能。
●jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
●学习 jQuery 的本质：就是学习调用这些函数（方法）。
●jQuery 出现的目的是加快qd人员的开发速度，我们可以非常方便的调用和使用它，从而提升开发效率。
1.3jQuery 的优点
●轻量级，核心文件才几十 kb，不会影响页面加载速度。
●跨浏览器兼容，基本兼容了现在主流的浏览器。
●链式编程、隐式迭代。
●对事件、样式、动画支持，大大简化了 DOM 操作。
●支持插件扩展开发，有着丰富的第三方插件，例如：树型菜单、日期控件、轮播图等。
●免费、开源。
2.jQuery 的基本使用
2.1jQuery 的下载
jQuery的官网地址： https://jquery.com/
各个版本的下载: https://code.jquery.com/
2.2.jQuery 的入口函数
理解 $(function(){})
Query 中常见的两种入口函数：
// 第一种，简单易用
$(function() {
... // 此处是页面 DOM 加载完成的入口
});
// 第二种，繁琐，但是也可以实现
$(document).ready(function() {
... // 此处是页面 DOM 加载完成的入口
});
总结：
●等着 DOM 结构渲染完毕，即可执行内部代码。不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
●相当于原生 JS 的 DOMContentLoaded。
//js写法
window.onload=function(){
}
●不同于原生 JS 中的 load 事件是等页面文档、外部的 js 文件、外部的 css 文件、图片加载完成才执行内部代码。
●更推荐使用第一种方式。
2.3 jQuery 的顶级对象 $
●$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替，但是为了方便，一般都是用 $。
●$ 是 jQuery 的顶级对象，相当于原生 js 中的 window。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法。
2.4jQuery 对象和 DOM 对象(重要)
使用 jQuery 方法和原生 JS 获取的元素是不一样的，总结如下：
●用原生 JS 获取的对象就是 DOM 对象。
●jQuery 方法获取的元素就是 jQuery 对象
●jQuery 对象的本质是：利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）。
注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JS 方法。
2.5jQuery 对象和 DOM 对象转换
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生 JS 比 jQuery 更大，原生的一些属性和方法 jQuery 没有封装，想要使用这些属性和方法需要把 jQuery 对象转换成 DOM 对象才能使用。
// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.querySelector('#box'); // 获取DOM对象
var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象
// 2.jQuery 对象转换为 DOM 对象有两种方法：
// 2.1 jQuery对象[索引值]
var domObject1 = $('div')[0];
// 2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0);
总结：实际开发比较常用的是把 DOM 对象转成 jQuery 对象，这样能够调用功能更加强大的 jQuery 中的方法。
3.jQuery 选择器
原生 JS 获取元素的方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
3.1基础选择器
$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id值”) | 获取指定的ID的元素 |
| 通配符选择器 | $(“*”) | 匹配所有元素 |
| 类选择器 | $(“.class值”) | 获取同一类class的元素 |
| 标签选择器 | $(“标签名”) 例如: $(“div”) | 获取同一类标签的所有元素 |
| 分组选择器(并集选择器) | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 选取li标签，并且此标签拥有class=“current” |
| 选择当前元素 | $(this) | 选取当前HTML元素 |
3.2层级选择器
层级选择器最常用的两个分别是：后代选择器和子代选择器。
| 名称 | 用法 | 描述 |
|---|---|---|
| 后代选择器 | $(“ul li”) | 使用空格，代表后代选择器，获取ul 下的所有的li元素，包括儿子，孙子，重孙子等… |
| 子代选择器 | $(“ul>li”) | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
基础选择器和层级选择器代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
</head>
<body>
<div>我是div</div>
<div class="nav">我是 nav div</div>
<p>我是 p</p>
<ol>
<li>我是 ol 的</li>
<li>我是 ol 的</li>
<li>我是 ol 的</li>
<li>我是 ol 的</li>
</ol>
<ul>
<li>我是 ul 的</li>
<li>我是 ul 的</li>
<li>我是 ul 的</li>
<li>我是 ul 的</li>
</ul>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
//1.获取所有的div
console.log($("div"));
//2.获取div,且拥有class="nav"
console.log($("div.nav"));
//3.获取我是ul的
console.log($("ul>li"));
});
</script>
</body>
</html>
3.3筛选选择器
筛选选择器，顾名思义就是在所有选项中选择满足条件的进行筛选选择，常见如下：
| 名称 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个li元素 |
| :last | $(“li:last”) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)”) | 获取到的li元素中，选择索引号为2的元素，索引号从0开始 |
| :odd | $(“li:odd”) | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”) | 获取到的li元素中，选择索引号为偶数的元素 |
| :not(selector) | $(“li:not(:last-child)”) | 选择器不选最后1个元素 |
| [属性] | $(“img[title]”) | 拥有title属性的img |
| [属性=值] | $(“img[title=‘美女’]”) | 拥有title属性，且属性值为美女 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$("li:first").css("color", "red");
$("li:last").css("color", "blue");
//索引从0
$("li:eq(3)").css("color", "pink");
//奇数
$("li:odd").css("background-color", "yellow");
</script>
</body>
</html>
3.4查找（进行筛选）
查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
| 语法 | 用法 | 描述 |
|---|---|---|
| parent() | $(“li”).parent() | 查找父级元素 |
| children(selector) | $(“ul”).children(“li”) | $(“ul>li”) , 找子元素 |
| find(selector) | $(“ul”).find(“li”) | $(“ul li”),后代选择器 |
| siblings(selector) | $(“.first”).siblings(“li”) | 先找 class="first"元素，找兄弟元素，不包括自己 |
| nextAll(selector) | $(“.first”).nextAll() | 查找当前元素之后的所有同辈元素 |
| prevAll(selector) | $(“.first”).prevAll() | 查找当前元素之前的所有同辈元素 |
| hasClass(class) | $(“div”).hasClass(“protected”) | 判断当前元素是否包含指定的class值，如果有true |
4.1演示children
4.2演示 siblings 找兄弟元素4.3演示 nextAll() 找后面的同辈元素4.4演示 prevAll() 找前面的同辈元素4.5演示 hasClass4.6综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son">儿子</div>
</div>
</div>
<div class="nav">
<p>我是 p</p>
<div>
<p>我是 p</p>
</div>
</div>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
// 注意：都是方法，要带括号
$(function () {
// 1.父
console.log($(".son").parent());
// 2.子
// (1) 选择亲儿子，类似子代选择器
console.log($(".nav").children("p"));
// (2) 选择所有后代，类似后代选择器
$(".nav").find("p").css("color", "red");
// 3.兄
console.log($(".nav").siblings());
});
</script>
</body>
</html>
●jQuery 设置样式
$('div').css('属性', '值');
●jQuery 里面的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css("color","red");
$(this).siblings().css("color","");
●隐式迭代
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作
●链式编程
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
3.5表单相关
| 语法 | 用法 | 描述 |
|---|---|---|
| :input | $(“:input”) | 匹配所有 input, textarea, select 和 button 元素 |
| :text | $(“:text”) | 匹配所有的单行文本框 |
| :checkbox | $(“:checkbox”) | 匹配所有复选框 |
| :radio | $(“:radio”) | 匹配所有单选按钮 |
| :checked | $(“:checked”) | 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) |
| :selected | $(“:selected”) | 匹配所有选中的option元素 |
3.6过滤
在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
| 语法 | 描述 | |
|---|---|---|
| first() | ||
| last() | ||
| eq(index) | $(“li”).eq(2) 等价于 $(“li:eq(2)”) 索引从0开始 | $(“li:eq(2)”) 索引从0开始 |
| filter(selector) | 对当前元素提要求 | |
| not(selector) | 对当前元素提要求, 并取反 | |
| has(selector) | 对子孙元素提要求 |
4.jQuery样式操作
jQuery 中常用的样式操作有两种，css 和 设置类样式方法
4.1 操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式：也可以操作类，修改多个样式。 常用一下三种方式：
// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
// 2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red");
// 3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
注意：css() 多用于样式少时操作，多了则不太方便。
原生的js操作样式： document.querySelector(“#div1”).style.color=“red”;
4.2 设置类样式方法
作用等同于以前的 classList，可以操作类样式。
注意：操作类里面的参数不可以加 .。
常用的三种方式：
// 1.添加类 addClass('sy1 sy2 sy3...')
$("div").addClass("current");
// 2.删除类 当没有参数则代表删除class的所有的值
$("div").removeClass("current");
// 3.切换类 有这个样式则删除，没有则添加
$("div").toggleClass("current");
注意：
●设置类样式的方法比较适合样式多时操作，可以弥补 css() 的不足。
●原生 JS 中className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
3示例
售后保障商品评价规格与包装商品介绍商品介绍-内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作样式</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.tab {
background-color: lemonchiffon;
width: 402px;
margin: 50px auto;
}
.tab_list {
height: 30px;
border: 1px solid #5500ff;
}
.tab_list li {
width: 100px;
float: left;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.tab_list li.current {
background-color: lavender;
color: mediumpurple;
}
.tab_content {
width: 402px;
height: 200px;
border: 1px solid #5500ff;
}
.tab_content .item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
</ul>
</div>
<div class="tab_content">
<div class="item" style="display: block;">
商品介绍-内容
</div>
<div class="item">
规格与包装-内容
</div>
<div class="item">
售后保障-内容
</div>
<div class="item">
商品评价-内容
</div>
</div>
</div>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
//入口函数
$(function () {
//1. 通过jquery选择器，找到所有的li
$(".tab_list li").click(function () {
// this 就是dom对象 <li>标签
// $(this) 就是 jquery对象
$(this).addClass("current").siblings().removeClass("current");
//获取你的点击li的索引
let index = $(this).index();
//让index对应的div，显示
$(".tab_content .item").eq(index).show().siblings().hide();
});
});
</script>
</body>
</html>
5.jQuery 效果
jQuery 给我们封装了很多动画效果，最为常见的如下：
●显示隐藏：show() / hide() / toggle()
●划入划出：slideDown() / slideUp() / slideToggle()
●淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo()
●自定义动画：animate()
注意：
●动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
●jQuery 提供了一个方法，可以停止动画排队：stop()。
5.1显示隐藏
显示隐藏动画，常见方法有 3 个：show() / hide() / toggle()
语法规范如下：
1.1显示语法show
show([speed],[easing],[fn])
| <1> 三个参数都可以省略，无动画直接显示 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
1.2隐藏语法hide
hide([speed],[easing],[fn])
| <1> 三个参数都可以省略，无动画直接显示 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
1.3切换语法toggle
toggle([speed],[easing],[fn])
| <1> 三个参数都可以省略，无动画直接显示 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
1.4案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: khaki;
}
</style>
</head>
<body>
<div class="box">盒子1</div>
<button class="showBtn">显示</button>
<button class="hideBtn">隐藏</button>
<button class="toggleBtn">切换</button>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
$(".showBtn").click(function () {
$(".box").show();
});
$(".hideBtn").click(function () {
$(".box").hide(2000, 'linear', function () {
alert('看不见!');
});
});
$(".toggleBtn").click(function () {
$(".box").toggle();
});
});
</script>
</body>
</html>
5.2划入划出
滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;
语法规范如下:
2.1下滑效果slideDown
slideDown([speed],[easing],[fn])
| <1> 三个参数都可以省略，无动画直接显示 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
2.2上滑效果slideUp
slideUp([speed],[easing],[fn])
| <1> 三个参数都可以省略，无动画直接显示 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
2.3滑动切换slideToggle
slideToggle([speed],[easing],[fn])
| <1> 三个参数都可以省略，无动画直接显示 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
2.4案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: khaki;
}
</style>
</head>
<body>
<div class="box">盒子1</div>
<button>向下滑动</button>
<button>向上滑动</button>
<button>切换</button>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
$(".box").slideDown();
});
$("button").eq(1).click(function () {
$(".box").slideUp(2000, 'linear', function () {
alert('看不见!');
});
});
$("button").eq(2).click(function () {
$(".box").slideToggle();
});
});
</script>
</body>
</html>
5.3淡入淡出
淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
语法规范如下:
3.1淡入效果fadeIn
fadeIn([speed],[easing],[fn])
| <1> 三个参数都可以省略，无动画直接显示 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
3.2淡出效果fadeOut
fadeOut([speed],[easing],[fn])
| <1> 三个参数都可以省略，无动画直接显示 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
3.3切换效果 fadeToggle
fadeToggle([speed],[easing],[fn])
| <1> 三个参数都可以省略，无动画直接显示 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
3.4渐进方式调整到指定的不透明度 fadeTo
fadeTo([speed],opacity,[easing],[fn])
opacity 透明度，必须写 取值0~1之间
3.5案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: khaki;
}
</style>
</head>
<body>
<div class="box">盒子1</div>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
$(".box").fadeIn(1000);
});
$("button").eq(1).click(function () {
$(".box").fadeOut(1000);
});
$("button").eq(2).click(function () {
$(".box").fadeToggle(1000);
});
$("button").eq(3).click(function () {
$(".box").fadeTo(1000, 0.5);
});
});
</script>
</body>
</html>
5.4.停止动画排队
动画或者效果一旦触发就得执行，如果多次触发就会造成动画或者效果排队执行，停止动画排队的方法是：stop()。
●stop() 方法用于停止动画或效果
●stop() 写到动画或者效果的前面，相当于停止结束上一次动画
总结：每次使用动画之前，先调用 stop()，再调用动画。
5.5自定义动画
自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为 animate()。
animate(params,[speed],[easing],[fn])
| <1> params：想要更改的样式属性，以对象形式传递，必须写， css样式 |
|---|
| <2> speed: 速度， slow,normal, fast 或者直接写毫秒数值 1000 |
| <3> easing: 切换效果 linear 线性 swing 默认值 |
| <4> fn: 回调函数，在动画完成后执行此函数，每个元素执行1次 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义动画</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: khaki;
}
</style>
</head>
<body>
<div class="box">盒子1</div>
<button id="startBtn">开始动画</button>
<button id="stopBtn">停止动画</button>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
$("#startBtn").click(function () {
$(".box").animate({ width: '800px', opacity: 0.4 }, 2000, 'linear', function () {
alert('动画结束');
});
});
});
</script>
</body>
</html>
6.jQuery 属性操作
jQuery 常用属性操作有三种：prop() / attr() / data()
6.1元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href 属性，比如 <input> 元素里面的 type。
获取属性
prop("属性名")
设置属性
prop("属性名","属性值");
注意： prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected等。
6.2元素自定义属性 attr()
用户自己给定元素添加的属性，我们称为自定义属性。比如给 div 添加 index=“1” 等。
获取属性
attr("属性")
设置属性
attr("属性":"属性值")
注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）
2.1通过removeAttr(attr)删除属性
$("选择器").removeAttr("属性名");
6.3数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
附加数据
data("name","value") //向北选元素附加数据
获取数据
data("name")
注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。\
6.4案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作属性</title>
</head>
<body>
<a href="http://www.baidu.com" title="百度">百度</a>
<input type="checkbox" checked>
<select name="province">
<option value="湖北" selected>湖北</option>
<option value="湖南">湖南</option>
<option value="广东">广东</option>
</select>
<div index="1" data-index="2">我是 div</div>
<span>123</span>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
//1.获取固有属性值
console.log($("a").prop("href"));
console.log($("a").prop("title"));
$("a").prop("title", "去百度一下");
$("select>option").eq(1).prop("selected", true);
$("input[type='checkbox']").prop("checked", false);
//2.获取自定义属性
console.log($("div").attr("index"));
console.log($("div").data("index"));
});
</script>
</body>
</html>
7.jQuery 文本属性值
jQuery 的文本属性值常见操作有三种：html() / text() / val()。
分别对应 JS 中的 innerHTML、innerText 和 value 属性。\
7.1普通元素内容 html()
html() //获取元素的内容
html("内容") //设置元素的内容
7.2普通元素文本内容 text()
text() //获取元素的文本内容
text("文本内容") //设置元素的文本内容
7.3表单的值 val()
val() //获取表单的值
val("内容") //设置表单的值
7.4演示代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html(),text(),val()</title>
</head>
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
//1.获取div中的内容
console.log($("div").html());
console.log($("div").text());
//2.获取输入框中的值
console.log($("input").val());
$("input").val('admin');
});
</script>
</body>
</html>
## 8.jQuery 元素操作(DOM操作)
jQuery 元素操作主要讲的是用 jQuery 方法，操作标签的遍历、创建、添加、删除等操作。
### 8.1遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作，如果要想给同类元素做不同操作，就需要用到遍历。
$(“选择器”).each(function(index,domElement){
…
});
语法解释：
1. each方法遍历匹配的每一个元素，主要用DOM处理
2. 有2个参数
index 每个元素的索引，索引从0开始
domElement 每个DOM对象，不是jquery对象
3. 如果需要调用jquery的函数，则需要转换成jquery对象 $(domElement)
**注意**：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换
$.each(object, function(index,element){
....
});
语法解释：
1. $.each()方法用于遍历任何对象，主要用于数据处理， 例如遍历数组，对象
2. index 每个元素的下标
element 每个DOM对象
注意：此方法用于 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。\
案例\
### 8.2.创建、添加、删除元素
jQuery 方法操作元素的创建、添加、删除方法很多，重点使用部分如下：
#### 8.2.1创建
类似于原生的document.createElement("li")\
动态创建了一个 \<li>
$("<li></li>");
#### 8.2.2内部添加
把内容放入匹配元素内部最后面，类似于原生的appendChild
element.append(内容);
内容，可以是HTML 元素，jQuery 对象，DOM 元素
把内容放入匹配元素内部最前面
element.prepend(内容);
内容，可以是HTML 元素，jQuery 对象，DOM 元素
#### 8.2.3外部添加
把内容放入目标元素后面
element.after("内容")
把内容放入目标元素前面
element.before("内容")
内部添加和外部添加的区别：\
① 内部添加元素，生成之后，它们是父子关系\
② 外部添加元素，生成以后，他们是兄弟关系
#### 8==.2.4删除元素==
删除匹配的元素（本身）
element.remove();
删除匹配元素集合中所有的子节点
element.empty();
清空匹配的元素内容
element.html("")
① remove 是删除元素本身\
② empty和html("") 作用等价
注意：以上只是元素的创建、添加、删除方法的常用方法，其它方法请参考 API。
### 8.3综合案例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery提供的dom操作方法</title>
</head>
<body>
<ul>
<li>原先的 li</li>
</ul>
<div class="test">我是原先的 div</div>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
//1.创建元素
var li = $("<li>我是后来创建的li</li>");
//2.追加到ul中
$("ul").append(li);
// li.appendTo($("ul"));
//3.在原先的div下面新增一个div
var div = $("<div>我是新的div</div>");
$("div.test").after(div);
//4.删除
$("ul>li").eq(0).remove();
});
</script>
</body>
</html>
9.jQuery对数组的操作
9.1 $.each 遍历
$.each(object, function(index,element){
....
});
语法解释：
1. $.each()方法用于遍历任何对象，主要用于数据处理， 例如遍历数组，对象
2. index 每个元素的下标
element 数组中每个值
9.2 $.unique() 去重
注意：执行$.unique()之前，需要先调用sort对数据进行排序
var arr2 = [5, 2, 4, 6, 5, 3, 1, 2, 6, 7, 8];
arr2.sort();
$.unique(arr2);
console.log(arr2.concat());
9.3 $.inArray
返回元素在数组的下标,不存在返回-1var arr3 = new Array(1, 2, 3, 4, 5);
//参数1：搜索的值
//参数2：数组
console.log($.inArray(13, arr3));
10.jQuery 尺寸、位置操作
10.1.jQuery 尺寸操作
jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的 API 对应不一样的盒子模型。
| 语法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素的宽度和高度值 ，只算 width/height |
| innerWidth()/innerHeight() | 取得匹配元素的宽度和高度值，包含 padding |
| outerWidth()/outerHeight() | 取得匹配元素的宽度和高度值，包含 padding,border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素的宽度和高度值，包含 padding,border,margin |
●以上参数为空，则是获取相应的值，返回number类型
●如果参数是数字，则修改值
●数字可以不必写单位
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
注意：有了这套 API 我们将可以快速获取和设置宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。
10.2jQuery 位置操作
jQuery 的位置操作主要有 3 个：offset()、position()、scrollTop()/scrollLeft()，具体介绍如下：
10.2.1 offset() 设置或者获取元素偏移
1offset方法设置或者返回被选元素相对于文档的偏移坐标，跟父级没有关系。
2该方法有2个属性， left 和 top
offset().top 用于获取距离文档顶部的距离。
offset().left 用于获取距离文档左侧的距离。
3 可以设置元素的偏移 offset({top:10,left:10})
10.2.2 location()
1position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准。
2该方法有2个属性， left 和 top
position().top 用于获取距离定位父级顶部的距离。
position().left 用于获取距离定位父级左侧的距离。
3该方法只能获取，不能设置值\
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="back">返回顶部</div>
<div class="container"></div>
<script>
$(function() {
// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
// 3. 被卷去的头部
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
})
</script>
</body>
11.jQuery 事件
11.1jQuery 事件注册
jQuery 为我们提供了方便的事件注册机制，使开发人员易于操作，优缺点如下：
●优点：操作简单，且不用担心事件覆盖等问题。
●缺点：普通的事件注册不能做事件委托，且无法实现事件绑定，需要借助其它方法。
element.事件(function(){});
$("div").click(
function(){
//事件处理的代码
}
);
其他事件和原生事件基本一致
例如： mourseover,mouseout,blur,focus,change,keydown,keyup,resize,scroll等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: khaki;
}
</style>
</head>
<body>
<div>内容</div>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
//注册事件
$("div").click(function () {
$(this).css("background-color", "red");
});
$("div").mouseover(function () {
$(this).css("background-color", "blue");
});
});
</script>
</body>
</html>
11.2 jQuery 事件处理
因为普通注册事件方法的不足，jQuery 又开发了多个处理方法，重点讲解如下：
●on()：用于事件绑定，也是目前最好用的事件绑定方法
●off()：事件解绑
●trigger() / triggerHandler()：事件触发。
11.2.1事件处理 on() 绑定事件
因为普通注册事件方法不足，jQuery 又创建了多个新的事件绑定方法 bind() / live() / delegate() / on() 等，其中最好用的是 on()。
on方法优势1-可以绑定多个事件，多个处理事件处理程序
可以绑定多个事件，多个处理事件处理程序。
$("div").on({
mouseover: function(){},
mouseout: function(){},
click:function(){}
});
如果事件处理程序相同
$("div").on("mouseover mouseout",function(){
$(this).toggleClass("current");
});
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function() {
// 1.单个事件注册
// $("div").click(function() {
// $(this).css("background", "purple");
// })
// $("div").mouseenter(function() {
// $(this).css("background", "skyblue");
// })
// 2.事件处理 on
// (1) 使用 on 绑定多个事件
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// },
// mouseleave: function() {
// $(this).css("background", "blue");
// }
// })
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
})
})
</script>
on方法优势2-可以事件委派操作\
可以事件委派操作，事件委派定义是，把原来加给子元素身上的事件绑定在父元素上，就是把事件委派给父元素。
$("ul").on('click','li',function(){
alert("Hello World!");
})
在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
$("div").on("click", "button", function () {
$("p").slideToggle();
});
});
</script>
</body>
</html>
on方法优势3
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
$("div").on('click','p',function(){
alert('我可以给动态生成的元素绑定事件!');
});
$("div").append($("<p>我是动态创建的p标签</p>"));
// (3) on 可以给动态创建的元素绑定事件
// $("ol li").click(function() {
// alert(11);
// })
$("ol").on("click", "li", function() {
alert("hello");
})
var li = $("<li>我是后来创建的</li>")
$("ol").append(li);
11.3事件处理 off() 解绑事件
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程也称为事件解绑。jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里重点看一下 off()。
off()方法可以移除通过on()方法添加的事件处理程序。
$("p").off(); //解绑p元素所有事件处理程序
$("p").off("click"); //解绑p元素上面的点击事件
$("ul").off("click","li"); //解绑事件委托
11.4 one()来绑定事件,事件只触发一次
$(选择器).one("click",function(){
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: khaki;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是p</p>
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
$("div").on({
click: function () {
alert("我点击了")
},
mouseover: function () {
alert("我鼠标经过了");
}
});
$("ul").on("click", "li", function () {
alert(11);
})
// 1.事件解绑 off
// $("div").off(); // 解除了 div 身上的所有事件
$("div").off("mouseover"); // 只解除 div 身上的mouseover事件
$("ul").off("click", "li"); // 解除事件委托
// 2.one() 只能触发事件一次
$("p").one("click", function () {
alert(11);
})
})
</script>
</body>
</html>
11.5事件处理 trigger() 自动触发事件
有些时候，在某些特定条件下，我们希望某些事件可以自动触发，比如轮播图自动播放功能跟点击左右侧按钮一致。可以利用定时器自动触发左右按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler()。
第1种： trigger()
element.click() //第一种简写形式
element.trigger("type") //第二种自动触发模式
第2种： triggerHandler()
element.triggerHandler(type) //第三种自动触发模式
triggerHandler 模式不会触发元素的默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>div</div>
<input type="text">
<script src="jquery-3.6.3/jquery-3.6.3.js"></script>
<script>
$(function () {
$("div").on("click", function () {
alert(11);
})
// 自动触发事件
// (1) 元素.事件()
// $("div").click();
// (2) 元素.trigger("事件类型")
// $("div").trigger("click");
// (3) 元素.triggerHandler() 不会触发元素的默认行为（例如：表单中的光标闪烁）
setTimeout(() => {
$("div").triggerHandler("click");
}, 1000);
$("input").on("focus", function () {
$(this).val("你好吗");
})
// $("input").triggerHandler("focus");
$("input").trigger("focus");
})
</script>
</body>
</html>
11.6jQuery 事件对象
jQuery 对 DOM 中的事件对象 event 进行了封装，兼容性更好、获取更方便、使用变化不大。事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event){
});
阻止默认行为： event.preventDefault() 或者 return false;
阻止冒泡： event.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阻止事件传播</title>
<style type="text/css">
.big {
width: 150px;
height: 150px;
background-color: lightblue;
}
.small {
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
</div>
</div>
<script src="jquery-3.6.3/jquery-3.6.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$(".small").click(function (event) {
alert("点击了小块");
//event.stopPropagation();//阻止了事件的传递
return false;
});
$(".big").click(function () {
alert("点击了大块");
});
});
</script>
</body>
</html>
11.7改变
change() 内容改变
注： 对于文本框，只有当该文本失去焦点的时候，才会触发change事件。
11.8焦点
focus() 获取焦点
blur() 失去焦点
11.9鼠标
mousedown 表示鼠标按下
mouseup表示鼠标弹起
mousemove表示鼠标进入
mouseenter表示鼠标进入
mouseover表示鼠标进入
mouseleave表示鼠标离开
mouseout表示鼠标离开
进入事件有3个 mousemove mouseenter mouseover
mousemove ：当鼠标进入元素，每移动一下都会被调用
mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用
mouseover：当鼠标进入元素，调用一下，在其中移动，不调用
mouseenter 和 mouseover的区别
mouseenter: 当鼠标经过其子元素不会被调用
mouseover：当鼠标经过其子元素会被调用
mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout：当鼠标经过其子元素会被调用
11.10 键盘
keydown 表示按下键盘
keypress 表示按住键盘
keyup 表示键盘弹起
这三者的区别分别表现在发生的 先后顺序，获取到的键盘按钮值，已经对输入框的文本取值这三方面
先后顺序： 按照 keydown keypress keyup 顺序发生
键盘按钮值：
通过event对象的which属性获取键盘的值
keydown和keyup 能获取所有按键，不能识别大小写
keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写
文本取值：
keydown和keypress：不能获取最后一个字符
keyup： 获取所有字符
如图所例，敲入ab
发生的先后顺序是 keydown,keypress,keyup
keydown和keyup取到大写B的ASCII码表 66,keypress取到小写b的ASCII码表 98.
keydown和keypress只能取到文本值a, keyup可以取到ab
11.11加载
页面加载有两种方式表示
1. $(document).ready(function(){});
2. $(function(){}); 这种比较常用
图片加载用load()函数
3. $("#img").load(function(){
$("#msg").html("图片加载成功");
});
11.12点击
click() 表示单击
dblclick() 表示双击
注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件
示例：
$("#b").click(function(){
$("#msg").html("单击按钮");
});
$("#b").dblclick(function(){
$("#msg").html("双击按钮");
});
12.jQuery Validate 表单验证
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
12.1默认校验规则
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required:true | 必须输入的字段。 |
| 2 | remote:“check.php” | 发送ajax请求验证(常用案例就是在注册时，验证用户名是否存在)， // 注：请求返回的 response === true || response === ‘true’，才算验证通过，这需要后端的配 |
| 3 | email:true | 必须输入正确格式的电子邮件。 |
| 4 | url:true | 必须输入正确格式的网址。 |
| 5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| 6 | dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 |
| 7 | number:true | 必须输入合法的数字（负数，小数）。 |
| 8 | digits:true | 必须输入整数。 |
| 9 | creditcard: | 必须输入合法的信用卡号。 |
| 10 | equalTo:“#field” | 输入值必须和 #field 相同。 |
| 11 | accept: | 输入拥有合法后缀名的字符串（上传文件的后缀）。 |
| 12 | maxlength:5 | 输入长度最多是 5 的字符串（汉字算一个字符）。 |
| 13 | minlength:10 | 输入长度最小是 10 的字符串（汉字算一个字符）。 |
| 14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。 |
| 15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
| 16 | max:5 | 输入值不能大于 5。 |
| 17 | min:10 | 输入值不能小于 10。 |
12.2案例
新建项目，添加需要的外部js
新建html页面，学习如何使用jquery表单验证
步骤1：导入 js 库
步骤2: 准备需要验证的表单
<form id="registerForm" action="xxxxx" method="get">
<fieldset>
<p>
<label for="userName">用户名</label>
<input type="text" name="userName" id="userName" />
</p>
<p>
<label for="userPwd">密码</label>
<input type="text" name="userPwd" id="userPwd" />
</p>
<p>
<label for="rePwd">确认密码</label>
<input type="text" name="rePwd" id="rePwd" />
</p>
<p>
<label for="userEmail">邮箱</label>
<input type="text" name="userEmail" id="userEmail" />
</p>
<p>
<label for="userPhone">手机号</label>
<input type="text" name="userPhone" id="userPhone" />
</p>
<p>
<label for="tp">有推荐人请勾选</label>
<input type="checkbox" name="tp" id="tp" />
</p>
<p>
<label for="person">推荐人</label>
<input type="text" name="person" id="person" />
</p>
<p><input type="submit" value="注册" /></p>
</fieldset>
</form>
步骤3：将校验规则写到 js 代码中
<script src="js/jquery-3.6.3.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
$(function () {
// value用户输入的内容 element input输入框
$.validator.addMethod("phone", function (value, element, param) {
var reg = /^1[3456789][0-9]{9}$/;
return reg.test(value);
}, "Mobile phone Numbers are illegal!");
// 在键盘按下并释放及提交后验证提交表单
$("#registerForm").validate({
//规则
rules: {
userName: { required: true, rangelength: [5, 10] },
userPwd: { required: true, minlength: 6 },
rePwd: { equalTo: "#userPwd" },
userEmail: { required: true, email: true },
userPhone: { required: true, phone: true },
person: { required: "#tp:checked" }
},
// required: "#tp:checked" 若复选框选中了，则person输入框必填
//错误提示信息
messages: {
userName: { required: '请填写用户名!', rangelength: '用户名长度为5-10位!' },
userPwd: { required: '请填写密码!', minlength: '密码长度最少6位!' },
rePwd: { equalTo: '密码不一致!' },
userEmail: { required: '请填写邮箱!', email: '不是一个合法邮箱!' },
userPhone: { required: '请填写手机号码!', phone: '手机号格式不对!' },
person: { required: '请填写推荐人!' }
}
});
});
</script>
步骤4：设置提示信息的样式\
<style type="text/css">
.error {
color: red !important;
font-size: 14px;
padding-left: 10px;
}
</style>
13.jQuery 插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助 jQuery 插件完成。这些插件也是依赖于 jQuery 来完成的，所以必须引入 jQuery 文件，所以也被称为 jQuery 插件。
jQuery 插件常用的网站：
● jQuery 插件库：http://www.jq22.com
● jQuery 之家：http://www.htmleaf.com
jQuery 插件使用步骤：
●引入相关文件。（jQuery 文件和插件文件）
●复制相关 html、css、js（调用插件）
购物车案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的购物车</title>
<script src="jquery-3.6.3.min.js"></script>
<script src="jquery.validate.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#cart {
width: 80%;
min-height: 400px;
position: absolute;
left: 50%;
top: 100px;
transform: translateX(-50%);
}
.cart-main {
width: 100%;
height: 100%;
}
.cart-thead {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.cart-thead .column {
flex: 1;
}
.cart-list {
width: 100%;
}
.cart-item-list {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.cart-item-list:hover {
background-color: lightcyan;
}
.cart-item-list .cell {
flex: 1;
}
.p-goods img {
width: 60%;
height: 60%;
margin-top: 10%;
margin-bottom: 10%;
}
.p-props {
font-size: 12px;
color: gray;
}
.quantity-form {
width: 80px;
height: 20px;
display: flex;
flex-direction: row;
}
.itxt {
width: 30px;
height: 20px;
text-align: center;
}
.decrement,
.increment {
text-align: center;
text-decoration: none;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid gray;
/* cursor: not-allowed; */
}
.toolbar-right {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.price-sum {
margin-right: 10%;
}
</style>
</head>
<body>
<div id="cart">
<div class="cart-main">
<div class="cart-thead">
<div class="column t-checkbox">
<div class="cart-checkbox">
<input type="checkbox" id="toggle-checkboxes_up" name="toggle-checkboxes" class="jdcheckbox" />
<label class="checked" for="">全选</label>
</div>
</div>
<div class="column t-goods">商品</div>
<div class="column t-props"></div>
<div class="column t-price">单价</div>
<div class="column t-quantity">数量</div>
<div class="column t-sum">小计</div>
<div class="column t-action">操作</div>
</div>
<div class="cart-list">
<div class="cart-item-list">
<div class="cell p-checkbox">
<input type="checkbox" name="goodsId" />
</div>
<div class="cell p-goods">
<img src="img/icon.png" />
</div>
<div class="cell p-props">颜色：除霾除醛基础款AC4074</div>
<div class="cell p-price">¥<span>100</span></div>
<div class="cell p-quantity">
<!-- 满赠 -->
<div class="quantity-form" promoid="50000118485">
<a href="javascript:void(0);" class="decrement disabled">-</a>
<input autocomplete="off" type="text" class="itxt" value="2" minnum="1">
<a href="javascript:void(0);" class="increment">+</a>
</div>
<div class="ac ftx-03 quantity-txt" _stock="stock_184793">有货</div>
</div>
<div class="cell t-sum">¥<span></span></div>
<div class="cell t-action">
<a href="">删除</a>
</div>
</div>
<div class="cart-item-list">
<div class="cell p-checkbox">
<input type="checkbox" name="goodsId" />
</div>
<div class="cell p-goods">
<img src="img/icon.png" />
</div>
<div class="cell p-props">颜色：除霾除醛基础款AC4074</div>
<div class="cell p-price">¥<span>50</span></div>
<div class="cell p-quantity">
<!-- 满赠 -->
<div class="quantity-form" promoid="50000118485">
<a href="javascript:void(0);" class="decrement disabled">-</a>
<input autocomplete="off" type="text" class="itxt" value="1" minnum="1">
<a href="javascript:void(0);" class="increment">+</a>
</div>
<div class="ac ftx-03 quantity-txt" _stock="stock_184793">有货</div>
</div>
<div class="cell t-sum">¥<span></span></div>
<div class="cell t-action">
<a href="">删除</a>
</div>
</div>
</div>
<div class="cart-item-list">
<div class="cell p-checkbox">
<input type="checkbox" name="goodsId" />
</div>
<div class="cell p-goods">
<img src="img/icon.png" />
</div>
<div class="cell p-props">颜色：除霾除醛基础款AC4074</div>
<div class="cell p-price">¥<span>10</span></div>
<div class="cell p-quantity">
<!-- 满赠 -->
<div class="quantity-form" promoid="50000118485">
<a href="javascript:void(0);" class="decrement disabled">-</a>
<input autocomplete="off" type="text" class="itxt" value="3" minnum="1">
<a href="javascript:void(0);" class="increment">+</a>
</div>
<div class="ac ftx-03 quantity-txt" _stock="stock_184793">有货</div>
</div>
<div class="cell t-sum">¥ <span></span></div>
<div class="cell t-action">
<a href="">删除</a>
</div>
</div>
</div>
<div class="toolbar-right">
<div class="amount-sum">
已选择<em>0</em>件商品<b class="up"></b>
</div>
<div class="price-sum">
<div>
<span class="txt txt-new">总价：</span>
<span class="price sumPrice">¥<em>0.00</em></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
function xiaoji() {
//遍历价格
$(".p-price span").each(function (index) {
//获取该价格
var price = parseFloat($(this).text().trim());
//获取该数量
var num = parseInt($(".itxt").eq(index).val());
//为小计赋值
$(".t-sum span").eq(index).text((price * num).toFixed(2));
})
}
xiaoji();
function setTotalNumAndPrice() {
let totalPrice = 0;
let totalNum = 0;
$("input[name='goodsId']:checked").each(function () {
//获取当前索引
var index = $('input[name="goodsId"]').index(this);
//获得数量，累加数量
totalNum += parseInt($(".itxt").eq(index).val());
//获得小鸡，累加小计
totalPrice += parseFloat($(".t-sum span").eq(index).text().trim());
})
//赋值总量
$(".amount-sum em").text(totalNum);
//赋值总价
$(".sumPrice em").text(totalPrice.toFixed(2));
}
//全选取消 全选
$("#toggle-checkboxes_up").click(function () {
//获取当前选中状态
let isChecked = $(this).prop("checked");
//根据这个状态给所有子选择框赋值
$("input[name='goodsId']").prop("checked", isChecked);
//并计算一遍总价和总量
setTotalNumAndPrice();
})
//单选和取消单选
$("input[name='goodsId']").click(function () {
//利用被选框的数量和总框数量进行比较，不同则把取消全选框
var AllChecked = $("input[name='goodsId']:checked").length === $("input[name='goodsId']").length;
//更新全选框的状态
$("#toggle-checkboxes_up").prop("checked", AllChecked);
//计算一次
setTotalNumAndPrice();
})
//减少商品数量
$(".decrement").click(function () {
var $input = $(this).siblings(".itxt");
var num = parseInt($input.val());
if (num > 1) {
$input.val(--num);
var price = parseFloat($(this).parent().parent().prev().find('span').text().trim());
console.log(price);
$(this).parent().parent().next().find('span').text((price * num).toFixed(2));
}
setTotalNumAndPrice();
if(num===1){
$(this).css("cursor","not-allowed");
}
})
//增加商品数量
$(".increment").click(function () {
var $input = $(this).siblings(".itxt");
var num = parseInt($input.val());
if (num < 10) {
$input.val(++num);
var price = parseFloat($(this).parent().parent().prev().find('span').text().trim());
$(this).parent().parent().next().find('span').text((price * num).toFixed(2));
}
setTotalNumAndPrice();
})
})
</script>
</body>
</html>
