1.jquery简介
在现代的网页开发中，JavaScript 扮演着至关重要的角色，它不仅能够实现与用户的交互，还可以使页面更加动态和吸引人。然而，纯粹的 JavaScript 编码往往繁琐复杂，为了简化前端开发的过程，诞生了许多优秀的 JavaScript 库和框架，其中最著名的之一便是 jQuery。
jQuery 是一个快速、简洁的 JavaScript 库，它简化了许多常见的任务，如 HTML 文档遍历和操作、事件处理、动画效果和 Ajax 操作等。由 John Resig 在 2006 年创建，jQuery 的设计目标是使 JavaScript 更加简单和易于使用。如今，jQuery 已成为前端开发的事实标准之一，被广泛应用于各种网站和 Web 应用程序中。简而言之，jquery就是一个工具库。
2.jquery下载
下载网址：Download jQuery | jQuery或者jQuery API 中文文档 | jQuery中文网
下载版本分为生产版本和开发版本，二者的区别在于，生产版本是压缩过的体积小，以min.js为后缀，而开发版本没有压缩，体积大，但是其中的源码可以看懂。
下载到本地后，将该文件放在VS code的工作目录下，方便引入。
3.引入jquery
在head中使用script结合src来引入
测试：在script中执行console.log($)，打印函数则引入成功。
文档加载完毕事件：$(function(){ "加载完毕"})，即在使用jquery时，将script写在$()中，保证文档加载完毕，可以获取到元素。
4.jquery使用三部曲
4.1 获取元素
$("选择器") 返回的是jquery对象
jquery转js get(0)
js转jquery $(js对象)
$(this) 将js转jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
引入jquery
在head中使用script结合src
-->
<script src="jquery-3.7.1.js"></script>
<script>
// 文档加载完毕事件 $(function(){ "加载完毕"})
// 即在使用jquery时，将script写在$()中
// 保证文档加载完毕,可以获取到元素
// 理论上script可以写在任何位置，但是从上往下加载时还没有标签就开始获取元素，是找不到的
// 所以当script写在头部时，使用$(function(){ "加载完毕"})，最好的方法就是每次使用jquery时
// 都将其写在$(function(){})中
$(function(){
let con = $(".container");
con.each(function(index,item){
console.log(index, item);
})
})
</script>
</head>
<body>
<div class="container">
<p><span>span1</span><span>span2</span><span>span3</span></p>
<p><span>span1</span><span>span2</span><span>span3</span></p>
<p><span>span1</span><span>span2</span><span>span3</span></p>
</div>
<script>
// js工具库下载:https://www.jquery123.com/，有生产版本和开发版本
// 生产版本是压缩过的，体积小， .min.js
// 开发版本未压缩，体积大，但是可以看源码
// console.log($);
</script>
<script>
// jquery获取元素 $("选择器")，返回的是jquery对象
// jquery转js get(0)
// js转jquery $(js对象)
let con = $(".container");
// console.log(con);
// let con_js = con.get(0);
// console.log(con_js);
// let con_jq = $(con_js);
// console.log(con_jq);
// 遍历 each function(index,item){ $(item)}
con.each(function(index,item){
console.log(index, item);
})
// 文档加载完毕事件 $(function(){ "加载完毕"})
// 即在使用jquery时，将script写在$()中
// 保证文档加载完毕,可以获取到元素
</script>
</body>
</html>4.2 绑定事件
js所有事件--事件名不带on
$(this).click(function(e){ })
$(this).on("事件名", 函数名)
$(this).off("事件名", 函数名) 不带函数名，则关闭所有事件
$(this).one("事件名", 函数名) 只执行一次
4.3 修改、获取元素
内容：text() html()可以识别标签 这两个如果没有实参就是获取，有实参就是设置
属性：普通属性：attr("属性名")获取 attr("属性名","属性值")设置
类名属性：hasClass()是否有类名 addClass()添加类名
removeClass()删除类名 toggleClass()有就删除没有就添加
样式css：css("属性名")--获取 css("属性名","属性值")--获取设置
css({"属性名":"属性值", "属性名":"属性值"})--设置多个
动画：显示与隐藏：显示show 隐藏hide 切换toggle
自定义动画：animate({ }. time, 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>
<script src="./jquery-3.7.1.js"></script>
</head>
<body>
<div class="container">
<span>span1</span>
<span>span2</span>
<span>span3</span>
</div>
<a class="a0" id="aa" title="aa" href=""></a>
<script>
// let con = $(".container").text();
// console.log(con);
// let con_ht = $(".container").html();
// console.log(con_ht);
// let con = $(".container").text("span");
// let con_ht = $(".container").html('<a href="">百度</a>');
// 普通属性 attr("属性名")获取 attr("属性名","属性值")设置
// let id = $("a").attr("id");
// console.log(id);
// $("a").attr("id","a0");
// let i_d = $("a").attr("id");
// console.log(i_d);
// 类名属性 hasClass()是否有类名 addClass()添加类名
// removeClass()删除类名 toggleClass()有就删除没有就添加
console.log($("a").hasClass("a0"));
$("a").addClass("aa");
console.log($("a").hasClass("aa"));
$("a").removeClass("a0");
console.log($("a").hasClass("a0"));
$("a").toggleClass("a0");
console.log($("a").hasClass("a0"));
</script>
</body>
</html>4.4 元素相关
相关元素：子children() 父parent()
上一个prev() 下一个next() 同级别其他的siblings()
创建与删除：A.appendTo(B)返回A，A是创建内容
A.append(B)返回A，B是创建内容
目标元素.remove()移除
目标元素.empty()删除目标元素所有子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.7.1.js"></script>
</head>
<body>
<div class="container">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
<script>
// 子children() 父parent() 上一个prev() 下一个next() 同级别其他的siblings()
let parent = $(".container").parent();
console.log(parent);
let children = $(".container").children();
console.log(children);
let second = $("p:nth-of-type(2)");
console.log(second.prev());
console.log(second.next());
console.log(second.siblings());
// 创建与删除
// A.appendTo(B)返回A，A是创建内容
// A.append(B)返回A，B是创建内容
// 目标元素.remove()移除
// 目标元素.empty()删除目标元素所有子元素
let create = $(`
<a href="">百度</a>
<span>span1</span>
`).appendTo(".container");
create.remove();
$(".container").empty();
// https://httpbin.org/get
</script>
</body>
</html>5.jquery使用ajax与服务器交互
使用ajax与服务器进行交互，ajax({url,method,data,success})
url服务器地址，method有get和post，data为数据，success成功
get请求数据在args中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.7.1.js"></script>
</head>
<body>
<div class="items">
<div class="con">
</div>
<button>get请求</button><button>post请求</button>
</div>
<script>
// 使用ajax与服务器进行交互，ajax({url,method,data,success})
$("button:nth-of-type(1)").click(function(){
$.ajax({
// 测试服务器地址
url:"https://httpbin.org/get",
method:"get",
data:{
"name": "zyj",
"age": 20
},
success:function(res){
console.log("请求成功",res.args);
$(".con").append(`
<div class=".container">
<p>
<span>姓名</span><span>${res.args.name}</span>
</p>
<p>
<span>年纪</span><span>${res.args.age}</span>
</p>
</div>
`)
}
})
})
// post请求数据在form中
$("button:nth-of-type(2)").click(function(){
$.ajax({
url:"https://httpbin.org/post",
method:"post",
data:{
"n": "zyj",
"a": 20
},
success:function(res){
console.log("请求成功",res.form);
$(".con").append(`
<div class=".container">
<p>
<span>n</span><span>${res.form.n}</span>
</p>
<p>
<span>a</span><span>${res.form.a}</span>
</p>
</div>
`)
}
})
})
</script>
</body>
</html>小结
jQuery 的出现极大地简化了前端开发的工作，使得开发者可以更加专注于实现功能和用户体验，而不必过多关注浏览器兼容性和复杂的 JavaScript 编码。虽然现在有许多新兴的 JavaScript 框架和库，但 jQuery 仍然是许多开发者的首选，它的简单易用性和强大的功能依然不可替代。因此，掌握 jQuery 将会为你的前端开发之路带来极大的便利和效率提升。
4286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
