jQuery
jQuery是对JavaScript的封装，是一个JavaScript函数库。
jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过一个易于使用的、可跨多种浏览器工作的API，使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单。
下载jQuery库
开发环境中使用未压缩的版本；生产环境使用压缩版本
编写第一个jQuery代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初步使用jQuery</title>
<!-- 使用外链式将jquery引入 -->
<script src="js/jquery-3.6.0.js" charset="utf-8"></script>
<script type="text/javascript">
// 获取元素的前提是:页面加载完成
// 页面加载完成也是会触发事件的
// document 是js中的dom对象
// $(document) 是jquery对象
/*
ready(fn):
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法
请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。
其中注册的函数会按照（代码中的）先后顺序依次执行。
*/
// $(document).ready(function(){
// $("p").text("你好");
// })
// $(document).ready 可以简写如下
$(function(){
$("p").text("你好啊");
})
</script>
</head>
<body>
<p>段落1</p>
</body>
</html>
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
jQuery选择器
基础选择器
- 通配符选择器
- 类选择器
- id选择器
- 标签选择器
- 并集选择器
- 交集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 通配符选择器: 文字大小统一设置成 50px
// jquery是封装的js函数库.也就是jquery中操作js的属性也是通过调用函数
// css()函数对应js中的style属性
$("*").css("font-size","50px");
// 标签选择器:将文件的颜色统一设置成红色
$("p").css("color","red");
// 类选择器: 将文本内容修改成 你好
// text()函数对应js中的innerText属性
$(".c1").text("你好");
// id选择器: 将文本内容修改成 一级标题的 hello
// html()函数对应js中的innerHTML属性
$("#p3").html("<h1>hello</h1>");
// 并集选择器: 将p和span的文字添加下划线
$("p,span").css("text-decoration","underline");
})
</script>
</head>
<body>
<p class="c1">段落1</p>
<p class="c1">段落2</p>
<p id="p3">段落3</p>
<span>内容1</span>
</body>
</html>
层级选择器
- 子代选择器（“parent > child”）
- 后代选择器 (“ancestor descendant”)
- 相邻兄弟选择器 (“prev + next”)
- 通用兄弟选择器 (“prev ~ next-siblings”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级选择器</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
// 子代选择器
$(".nav>li").css("border", "3px solid red");
// 后代选择器
$(".nav li").css("border", "3px solid blue");
// 相邻兄弟选择器
$(".nav+div").css("border", "3px solid green");
// 通用兄弟选择器
$(".nav~div").css("border", "3px solid pink");
})
</script>
</head>
<body>
<div>
div0
</div>
<ul class="nav">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
<li>Nested item 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<div>
div1
</div>
<div>
div2
</div>
</body>
</html>
属性选择器
[属性名]
[属性名=“属性值”]
<head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.6.1.min.js"></script> <script> //页面加载完成 $(function () { //控件名[属性名='属性值'] $("input[name='n1']").prop('checked',true); //控件名[属性名] $("input[type]").prop('checked',true); }) </script> </head> <body> 老大：<input type="checkbox" name="n1"/><br> 老二：<input type="checkbox" name="n2"/><br> 老三：<input type="checkbox" name="n3"/> </body>
表单选择器
https://api.jquery.com/category/selectors/form-selectors/
- :button 选择所有的button元素和类型是button的元素
- :input 选择所有的input、textarea、select、button元素
- val()函数，表示获取其value值的 函数 ,一般应用在表单中,不传入参数，表示获取，如果传入参数，表示设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(":input").css("color","red");
})
</script>
</head>
<body>
<input type="button" value="按钮1"/>
<button>按钮2</button>
</body>
</html>
基础过滤器
需要配合选择器一起使用，索引从0开始
- 元素名:eq(n) 选择索引等于n的指定元素
- 元素名:gt(n) 选择索引大于n的指定元素
- 元素名:lt(n) 选择索引小于n的指定元素
- 元素名:even() 选择索引是偶数的指定元素
- 元素名:odd() 选择索引是奇数的指定元素
- 元素名:first() 选择指定元素的第一个
- 元素名:last() 选择指定元素的最后一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础过滤器</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 索引从0开始
$("li:eq(2)").css("color","red");
$("li:even()").css("color","blue");
$("li:last()").css("color","pink");
$("li:first()").css("color","pink");
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
子元素过滤器
子元素过滤器一般配合子代或者后代选择器使用
- first-child: 选择所有子元素中的第一个子元素
- nth-child(n): 选择所有子元素中的第n个子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子元素过滤器</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
/* 选择ul下的第一个li */
$("ul>li:first-child").css("color","red");
// 选择第几个子元素
// 2n表示第偶数个
// 2n+1 表示第奇数个
$("ul>li:nth-child(2n+1)").css("color","green");
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
DOM对象和jQuery对象转换
DOM对象的属性和函数，jQuery对象是不能使用的
jQuery对象的函数和属性，DOM对象是不能使用的。
DOM对象转jQuery对象
$(DOM对象)
jQuery对象转DOM对象
jQuery对象是一个伪数组，里面的元素是DOM对象，所以使用索引就可以将jQuery对象转DOM对象
$(DOM对象)[索引]
或者：
$(DOM对象).get(索引)
jQuery事件
- 单击事件和鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery事件</title>
<style type="text/css">
div{
width: 120px;
height: 120px;
}
.c1{
background-color: deeppink;
}
.c2{
background-color: skyblue;
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 单击事件
$("#btn01").click(function(){
// text()没有传参就表示取值
console.log($(this).text());
})
// 鼠标进入事件
$("div").mouseenter(function(){
// 将jQuery对象转成DOM对象,使用DOM对象的属性来实现
// $(this)[0].className ="c2";
// $(this).addClass("c2");
// toggleClass() 类不存在就添加,类存在就删除
$(this).toggleClass("c2");
})
// 鼠标离开事件
$("div").mouseleave(function(){
// $(this).removeClass("c2");
$(this).toggleClass("c2");
})
})
</script>
</head>
<body>
<button type="button" id="btn01">按钮1</button>
<br>
<div class="c1">
</div>
</body>
</html>
hover事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hover事件</title> <style type="text/css"> div { width: 120px; height: 120px; } .c1 { background-color: deeppink; } .c2 { background-color: skyblue; } </style> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { /* hover([over,]out)： over:鼠标移到元素上要触发的函数 out:鼠标移出元素要触发的函数 */ // $("div").hover(function(){ // $(this).toggleClass("c2"); // }, function(){ // $(this).toggleClass("c2"); // }) // 鼠标进入和离开的代码是一样的,所以可以只写一个函数 $("div").hover(function() { $(this).toggleClass("c2"); }) }) </script> </head> <body> <div class="c1"> </div> </body> </html>on和off绑定和解绑事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件绑定</title> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // on(events,[selector],[data],fn) /* 事件绑定： 这里是给每一个li标签绑定了一个单击事件 有多少个li标签就绑定了多少个单击事件 $("ul>li").on("click",function(){ console.log($(this).text()); }) */ /* 事件委托: 现在将事件绑定到ul标签上 li的单击事件会委托给ul上的单击事件处理 */ $("ul").on("click","li",function(){ console.log($(this).text()); }) // off(events,[selector],[fn]) // 事件解绑 $("ul").off("click","li"); }) </script> </head> <body> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul> </body> </html>事件自动触发-trigger和triggerHandler
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>trigger</title> <style type="text/css"> div{ width: 150px; height: 150px; } .c1{ background-color: deeppink; } .c2{ background-color: deepskyblue; } </style> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("div").click(function(){ $(this).toggleClass("c2"); console.log("div被点击了"); }) // 自动触发单击事件 // 方式一: 手动调用单击事件函数 // $("div").click(); // 方式二 $("div").trigger("click"); }) </script> </head> <body> <div class="c1"> </div> </body> </html>trigger不会阻止默认行为和事件冒泡
triggerHandler会阻止默认行为和阻止事件冒泡
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>trigger不会阻止默认行为</title> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ console.log("hello,js"); }) // trigger不会阻止默认行为和事件冒泡 // $("#btn").trigger("click"); // triggerHandler会阻止默认行为和阻止事件冒泡 $("#btn").triggerHandler("click"); }) </script> </head> <body> <form action="#" method="get"> 账号： <input type="text" name="username" value="zhangsan"/> <input type="submit" value="注册" id="btn"/> </form> </body> </html>
jQuery操作html元素的相关API
获取内容：text()、html() 以及 val()
text() 获取元素的文本内容和设置元素的文本内容，对应js的innerText属性
text()不传参数就是获取内容；传入参数就是设置内容
html() 获取元素的文本内容及文本标签和设置元素的文本内容，对应js的innerHTML属性
val() 获取元素的value属性值和设置元素的value属性值 – 对应js中的value属性
获取属性：attr()和prop()
attr()可以操作自有属性和自定义属性
prop()只能操作自有属性，不能操作自定义属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>attr()和prop()</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 设置name属性
// $("input").attr("value","张三");
// $("input").prop("value","张三");
// attr可以设置自定义属性
$("input").attr("xxx","123");
// prop不能设置自定义属性
$("input").prop("yyy","123");
// 获取属性
console.log($("input").attr("name"));
console.log($("input").prop("type"));
// 获取自定义属性
console.log($("input").attr("my"));
// 不能获取自定义属性
console.log($("input").prop("my"));// undefined
})
</script>
</head>
<body>
<input type="text" name="username" id="uid" my="abc"/>
</body>
</html>
添加元素
内部添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部添加</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// append内部追加: 将span添加到div内部
$("div").append("<span>你好</span>");
// appendTo: 追加到
$("<span>你好啊啊</span>").appendTo("div");
// 向每个匹配的元素内部前置内容。
$("div").prepend("<p>段落0</p>");
// prependTo 添加到xxx的前面
$("<span>你好啊啊000</span>").prependTo("div");
})
</script>
</head>
<body>
<div class="c1">
<p>段落1</p>
</div>
</body>
</html>
外部添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部添加</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 外部添加:添加的元素p和div是平级的
$("div").after("<p>段落2</p>");
$("div").before("<p>段落0</p>");
})
</script>
</head>
<body>
<div class="c1">
<p>段落1</p>
</div>
</body>
</html>
删除元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除元素</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// empty() 删除匹配的元素集合中所有的子节点。
// 删除子元素
$("#d1").empty();
// 从DOM中删除所有匹配的元素。
// 删除自身及子元素
$("#d2").remove();
})
</script>
</head>
<body>
<div id="d1">
<p>段落1</p>
<p>段落2</p>
</div>
<div id="d2">
<p>段落3</p>
<p>段落4</p>
</div>
</body>
</html>
css类
- addClass(class): 为每个匹配的元素添加指定的类名。
- removeClass(class):为每个匹配的元素删除指定的类名。
- toggleClass(class)： 类不存在就添加，存在就删除
addClass(class)可以为元素添加class属性；attr(“class”,”类名”)也可以给元素添加class属性，两者有啥区别？
addClass(class)不会覆盖已有的类型，而是在已有类名的基础上增加新的类型
attr(“class”,”类名”) 会覆盖已有的类型，没有类名就是添加类名
css()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css()方法</title>
<style type="text/css">
p{
color: red;
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 设置css样式: 需要给属性赋值
$("p").css("font-size","30px");
// 获取css样式: 只有属性名
console.log($("p").css("color"));
// 设置多个css
// css的属性有特殊符号,引号不能省略
$("p").css({color:"blue","text-decoration":"underline"});
})
</script>
</head>
<body>
<p>段落1</p>
</body>
</html>
jQuery元素遍历
jQuery中除了选择器以外，还提供了类似功能的函数来选择元素
查找祖先元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素查找</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// parent([expr]): 查找元素的父元素
var $ele = $("p").parent();
console.log($ele);
// parents([expr]):获取匹配元素的祖先元素
var $ele = $("p").parents();
console.log($ele);
// parents([expr]):获取匹配元素的指定的祖先元素
var $ele = $("p").parents("div");
console.log($ele);
// parentsUntil([expr|element][,filter])
// 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。不包含指定的父辈元素
var $ele = $("p").parentsUntil("body");
console.log($ele);
})
</script>
</head>
<body>
<div id="d1">
<div id="d2">
<p>Hello</p>
<p>Hello</p>
</div>
</div>
</body>
</html>
查找后代元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素查找</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// children([expr]): 查找子元素
var $ele = $('#d2').children();
console.log($ele);
// find(expr|obj|ele): 查找指定的子子孙孙
var $ele = $('#d2').find("span");
console.log($ele);
})
</script>
</head>
<body>
<div id="d1">
<div id="d2">
<p>
<span>
Hello01
</span>
</p>
<p>Hello</p>
<span>
Hello02
</span>
</div>
</div>
</body>
</html>
查找兄弟元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素查找</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// siblings([expr]): 查找兄弟姐妹元素,可以从前和从后查找
var $ele = $("div").siblings();
// var $ele = $("div").siblings("p");
console.log($ele);
// next([expr]):每一个元素紧邻的后面同辈元素的元素集合。
var $ele = $("div").next();
console.log($ele);
// nextAll([expr]): 查找当前元素之后所有的同辈元素。
var $ele = $("div").nextAll();
console.log($ele);
// nextUntil([exp|ele][,fil]):查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
// 不包含指定的兄弟元素
var $ele = $("div").nextUntil("script");
console.log($ele);
})
</script>
</head>
<body>
<p id="p01">
<span>
Hello00
</span>
</p>
<div id="d1">
<p id="p02">
<span>
Hello
</span>
</p>
</div>
<p id="p03">
<span>
Hello01
</span>
</p>
</body>
</html>
过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// first():获取第一个元素
var $ele = $("ul li").first();
$ele.css("color","red");
//last():获取最后一个元素
var $ele = $("ul li").last();
$ele.css("color","red");
// eq(index|-index): 过滤等于index索引的元素
// index 一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
// -index 一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(-1算起)
var $ele = $("ul li").eq(3);
$ele.css("color","red");
// filter(expr|obj|ele|fn):筛选出与指定表达式匹配的元素集合。
var $ele = $("ul li").filter(".c1");
$ele.css("color","red");
// not(expr|ele|fn):从匹配元素的集合中删除与指定表达式匹配的元素
// html中元素还在,只是删除了匹配元素的集合中的元素
var $ele = $("ul li").not(".c1");
console.log($ele);
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="c1">3</li>
<li>4</li>
<li>5</li>
</ul>
<p>Hello</p>
<p id="selected">Hello Again</p>
</body>
</html>
serializeArray()与serialize()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>serializeArray()与serialize()</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("button").on("click",function(){
// serialize()：作用是将表单的参数和参数值拼接成一个完整的请求参数
var data = $("#info").serialize();
console.log(data); // username=zhangsan&pwd=123456
/*
serializeArray() 返回的是一个json数组，格式是：
[
{
name:"username",
value:"zhangsan"
},
{
name:"pwd",
value:"123456"
}
]
*/
var data = $("#info").serializeArray();
console.log(data);
})
})
</script>
</head>
<body>
<form action="#" method="get" id="info">
账号：
<input type="text" name="username"/>
<br>
<br>
密码：
<input type="password" name="pwd"/>
<br>
<br>
<button type="button">注册</button>
</form>
</body>
</html>
遍历：each()和$.each()
each(callback)：只能遍历jQuery对象
$.each()可以遍历任意对象（jQuery对象、dom对象、自定义对象）和数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>each()和$.each()</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// each(callback) : 以每一个匹配的元素作为上下文来执行一个函数。
// each(callback)：只能遍历jQuery对象
/* $("img").each(function(index){
console.log(index);
this.src = "image/mm0"+(index+1)+".webp";
}) */
// $.each(object, [callback])
// 在jQuery中$就表示jQuery
/*
// $.each 可以变量jquery对象
$.each($("img"),function(index){
this.src = "image/mm0"+(index+1)+".webp";
})
*/
/*
// $.each 可以遍历DOM对象
var ele = document.getElementsByTagName("img");
$.each(ele,function(index){
this.src = "image/mm0"+(index+1)+".webp";
}) */
var stu = {
name:"张三",
age:20
}
/* // $.each 可以遍历对象
$.each(stu,function(prop){
console.log(stu[prop]);
}) */
var arr = [10,2,3,4,5,6,7];
// $.each 可以遍历数组
$.each(arr,function(index){
console.log(arr[index]);
})
})
</script>
</head>
<body>
<img/>
<img/>
<img/>
</body>
</html>
