1.什么是jQuery
jQuery是一个JavaScript库，旨在简化处理HTML文档、处理事件、执行动画和处理AJAX等任务的操作。它提供了一个简洁、易于使用的API，可以通过选择器来操作HTML元素，并提供了许多实用的功能和方法来简化开发过程。通过使用jQuery，开发者可以更高效地编写跨浏览器兼容的JavaScript代码。在使用jQuery之前必须要先下载，点击jQuery进入官网，然后后点击download jQuery进入下载页面，选择要下载的jQuery版本，右键将链接另存为然后选择保存到的目标目录即可。production和development的区别在于前者未压缩后者经过了压缩也就是min版，二者在功能上并无任何的区别，只是文件大小不同，在学习阶段可以使用production版本，这个版本的js文件打开后代码目录比较清晰，这样有助于我们更好的理解jQuery实现原理；但是真实的项目中建议使用development版本，这样可以减少项目的打包体积。
2.使用
jQuery在页面中的使用也是超简单的，只需要使用script标签将其引入就行，毕竟jQuery就是一个js文件。
<script src="../jquery-3.7.1.min.js"></script>引入jQuery之后我们就可以在<script></script>标签内书写jQuery代码了，$或者jQuery都是代表jQuery最顶级的对象，也就是jQuery本身，当然jQuery也给用户开放了权限，用户可以根据自己的需求来给jQuery进行命名例如：
const hh = $.noConflict()在上述的代码中我们就将jQuery对象命名为了hh，这样可以解决多库共存问题，避免在其他的库中重复使用$和jQuery的情况。
需要注意的是如果直接在<script></script>之间编写jQuery代码，那么代码就会在相应的位置按照代码执行的一般顺序执行，这样的话这段代码就不可以提到HTML元素之前，我们可以为jQuery提供一个入口函数，所有jQuery的代码都写在该入口函数之内，这样的话对代码位置就没有要求，该入口函数的作用相当于window.onload。
$(function () {
//jQuery代码
});如果页面中有一个id叫box的div我们就可以使用以下选择器选择该盒子
$(function () {
$("#box")
});
jQuery为我们封装了许多实用的API例如：显示和隐藏hide(),show()我们只需要调用这些方法就行，非常的方便，类似的API还有css(),find(),parent(),siblings(),slideDown(),slideUp(),slideToggle()
需要注意的是在使用选择器时，jQuery中含有隐式迭代
$(function () {
$("div").click(function () {
console.log(1);
});
});也就是说在上述的代码中会将所有的div选取出来，然后经过遍历给所有的div都加上一个点击事件，但是这个迭代的过程我们是看不见的，然后每个事件中都会给我们返回一个事件对象该对象和原生js的事件对象时一样的。
jQuery还为我们提供了一种给一个元素添加多个事件的方法：链式编程
$(function () {
$("div").css("backgroud","red").stop().hide()
});在这我们先将css背景格式设置为红色，然后让其隐藏，这就是链式编程，如果有需要，我们可以无限地在后面进行事件添加，它会按照我们添加的顺序进行执行。
如果我们为某个HTML元素添加动画，在极短的时间内如果我们在动画之间进行切换，这样会造成动画排队的问题，也就是我们所触发的每个动画都会执行，但是由于上一个动画还未执行或者正在执行，就会出现排队的现象，我们可以在每个动画之前先停止动画，然后再进行下一个动画，这样就可以解决这一问题
$(function () {
//stop 用于停止动画
//stop必须写在动画之前 相当于停止上一次动画 执行此次动画
$(".nav>li").hover(function () {
$(this).children("ul").stop().slideToggle(200);
});
});如果jQuery提供的动画效果无法满足我们的需求，jQuery也为我们提供了自定义动画的API：animate(‘动画效果’,‘速度’)
$("div").animate(
{
left: 300,
top: 300,
opacity: 0.5,
},
500
);这样我们就可以根据自身需求来自定义动画。
当然有时候我们需要在jQuery对象和dom对象之间转换，因为只有dom对象才能使用原生的js方法
<script>
//1.将DOM对象转换为jQuery对象
const myvideo = document.querySelector("video");
myvideo.play(); //播放视频
$(myvideo); //即可
//2.jQuery对象转换为DOM对象
//2.1使用索引
$("video")[0].play();
//2.2使用get方法
$("video").get(0).play();
</script>将DOM对象转换为jQuery对象只需要使用$()将DOM对象包裹即可，因为jQuery选择器给我们返回的是一个数组，所以将jQuery对象转换为DOM对象只需要根据数组的index进行选择即可。
$("video")[0].play();或者使用get方法
$("video").get(0).play();我们也可以获取对象身上的属性
<script>
$(function () {
//1.获取属性值 prop("属性名")
const title = $("a").prop("title");
console.log(title);
//2.设置属性值 prop("属性名","属性值")
$("a").prop("href", "http://www.taobao.com");
const href = $("a").prop("href");
console.log(href);
$("input").change(function () {
console.log($("input").prop("checked"));
});
//获取和设置自定义属性用 attr()
$("div".attr("index"));
$("div".attr("data-index"));
$("div").attr("index", 3);
console.log($("div").attr("index"));
//data() 把元素当作变量 将值设置在缓存中 DOM元素中看不见设置的值
$("span").data("name", "zs");
console.log($("span").data("name"));
//data()获取h5的自定义属性值 不需要写 data- 且在此返回的是一个数字
console.log($("div").data("index")); //2
});
</script>获取属性值 prop("属性名")
设置属性值 prop("属性名","属性值")
获取和设置自定义属性用 attr()
data() 把元素当作变量 将值设置在缓存中 DOM元素中看不见设置的值
data()获取h5的自定义属性值 不需要写 data- 且在此返回的是一个数字
在jQuery中我们可以很方便地对元素进行遍历
$(function () {
//1. each(function(index,domelm)) each遍历元素回调函数第一个参数位索引号 第二个参数为返回的dom元素
//dom元素没有jQuery方法
let sum = 0;
$("div").each(function (index, eldom) {
$(eldom).css("color", colors[index]);
sum += parseInt($(eldom).text());
});
console.log(sum);
//$.each(需要遍历的,function(index,domelm)) 主要用来遍历数组，对象进行数据处理
// $.each($("div"), function (index, eldom) {
// console.log(index);
// console.log(eldom);
// });
});each(function(index,domelm)) each遍历元素回调函数第一个参数为索引号 第二个参数为返回的dom元素，这种使用方法主要用来遍历元素，
$.each(需要遍历的,function(index,item)) 主要用来遍历数组，对象进行数据处理
const colors = ["red", "blue", "green"];
$.each(colors, function (index, cl) {
console.log(index);
console.log(cl);
});
$.each({ name: "zs", age: "18" }, function (index, cl) {
console.log(index);
console.log(cl);
});除了遍历元素之外我们还可以增加或删除元素
在增加元素之前我们需要先申明需要添加的元素，然后才能进行添加
//创建元素
const li = $("<li>新创建的li</li>");
//内部添加 父子节点
// $("ul").append(li); //添加到内部的最后面
$("ul").prepend(li); //添加到内部的最前面
// 外部添加 兄弟节点
const div = $("<div>新创建的div</div>");
$(".test").before(div); //前
// $(".test").after(div); //后需要注意的是创建的元素只能被添加一次 当将创建额元素重复添加 只有最后一段代码会生效，即下述两端代码同时作用的话只有$("ul").prepend(li)会生效
$("ul").append(li); //添加到内部的最后面
$("ul").prepend(li); //添加到内部的最前面删除元素
删除元素
$("ul").remove(); //删除选择的元素
$("ul").empty(); //清除选择元素的内部节点
$("ul").html(""); //和empty一样获取元素的位置：offset 获取元素到文档的位置 不受定位和父级元素的影响，
console.log($(".son").offset());若要进行修改可直接传递一个对象作为参数
$(".son").offset({
left: 200,
top: 200,
});position() 返回带有父级定位的元素坐标 如果没有带有定位的父级则以文档为主
console.log($(".son").position());需要注意的是position() 只能获取，不能进行修改
jQuery事件处理：
当元素身上只有单个事件时
$("div").click(function () {
$("div").css("background", "red");
});
$("div").mouseenter(function () {
$("div").css("background", "purple");
});事件处理 on 以对象的形式传递 可以绑定多个事件 多个处理程序
$("div").on({
mouseenter: function () {
$("div").css("background", "purple");
},
click: function () {
$("div").css("background", "red");
},
mouseleave: function () {
$("div").css("background", "black");
},
});多个事件的处理程序是相同的 多个事件之间使用空格隔开
$("div").on("mouseenter mouseleave", function () {
$(this).toggleClass("current");
});这样鼠标经过和鼠标离开都会触发该事件。
on实现事件委托 事件是绑定在ul身上 但是又点击li触发 即给父元素绑定事件但是触发的对象是子元素
$("ul").on("click", "li", function () {
console.log($(this).index());
});on还可以给未来动态创建的元素绑定事件 单个事件绑定是无法实现这个效果
$("ol").on("click", "li", function () {
console.log($(this).index());
});
const li = $("<li>后来创建的</li>");
$("ol").append(li);one 和 on 使用方法一致 但是只触发一次
$("p").one("click", function () {
alert("one");
});事件解绑：
解除所有事件
$("div").off()解除某一个事件
$("div").off("click");解除事件委托
$("ul").off("click", "li");自动触发事件
//1.自动触发 元素.事件()
$("div").click();
//2.元素.trigger("事件")
$("div").trigger("click");
//3.元素.triggerHandler("事件"); 不会触发元素的默认行为 前面两种会触发默认行为
$("div").triggerHandler("click");拷贝对象：$.extend("是否为深拷贝","目标对象，被拷贝对象可以为多个") 默认为false浅拷贝
拷贝如果属性冲突会被覆盖 即相同属性以被拷贝的为主
$(function () {
let targetObj = {};
let obj = {
name: "zs",
age: 20,
};
//拷贝如果属性冲突会被覆盖 即相同属性以被拷贝的为主
// $.extend("是否为深拷贝",目标对象，被拷贝对象可以为多个) 默认为false浅拷贝
//浅拷贝 修改会影响原对象
// $.extend(targetObj, obj);
// console.log(targetObj);
$.extend(true, targetObj, obj);
console.log(targetObj);
});3.简单的增减商品案例，css格式有点丑，咱们以学习jQuery为主
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../jquery-3.7.1.min.js"></script>
<style>
a {
text-decoration: none;
font-size: 24px;
color: black;
}
input {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="nav">
<div class="price">￥100</div>
<div class="car">
<a href="#" class="decrement">-</a>
<input class="itext" type="text" value="1" />
<a href="#" class="increment">+</a>
</div>
<div class="xiaoji">￥100.00</div>
</div>
<div class="nav">
<div class="price">￥300</div>
<div class="car">
<a href="#" class="decrement">-</a>
<input class="itext" type="text" value="1" />
<a href="#" class="increment">+</a>
</div>
<div class="xiaoji">￥300.00</div>
</div>
<div>
<span class="count"></span>
<span class="money"></span>
</div>
<script>
$(function () {
$(".increment").click(function () {
let n = $(this).siblings(".itext").val();
n++;
$(this).siblings(".itext").val(n);
// console.log(n);
const price = $(this).parent().siblings(".price").html().substr(1);
// console.log(price);
$(this)
.parent()
.siblings(".xiaoji")
.html("￥" + (price * n).toFixed(2));
getSum();
});
$(".decrement").click(function () {
let n = $(this).siblings(".itext").val();
if (n <= 1) {
return false;
}
n--;
$(this).siblings(".itext").val(n);
// console.log(n);
// parents("选择器") 选择指定的祖先级元素
const price = $(this).parent().siblings(".price").html().substr(1);
console.log(price);
$(this)
.parent()
.siblings(".xiaoji")
.html("￥" + (price * n).toFixed(2));
//toFixed(n) 保留 n 位小数
getSum();
});
//文本框的值改变 计算小计
$(".itext").change(function () {
const n = $(this).val();
const price = $(this).parent().siblings(".price").html().substr(1);
$(this)
.parent()
.siblings(".xiaoji")
.html("￥" + (price * n).toFixed(2));
// console.log(1);
getSum();
});
function getSum() {
let count = 0;
let mony = 0;
$(".itext").each(function (i, a) {
count += parseInt($(a).val());
});
$(".xiaoji").each(function (i, a) {
mony += parseFloat($(a).text().substr(1));
});
// console.log("count" + count);
// console.log(mony);
$(".count").text("你选择了" + count + "件商品");
$(".money").text("共计￥" + mony + "元");
}
getSum();
});
</script>
</body>
</html>
首先我们先给+和-号注册一个点击事件，然后在每一个点击事件中我们需要获取出数量n和价格price，以+为例，当我们点击+时n++，然后将数量和价格相乘计算出小计，将n和小计又重新添加到UI，需要注意的是获取数量和价格时都是以字符串的形式获取的需要进行截取和类型转换。当然计算小计模块在-和+中都有用到，我们可以抽离成为一个单独的函数，然后进行调用即可。
除了小计以外我们还需要计算总价和总数量，总数量=所有数量相加，总价=所有小计相加然后渲染到页面即可。
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
