jQuery简介
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画操作更加简单。
jQuery最大的优点就是简化DOM操作
jQuery下载
点开后是这样 这不是乱码 点击Ctrl+s 保存文件 即可
jQuery版本说明
jQuery分为三个大版本：1.x 2.x 3.x
1.x版本
兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)
2.x版本
不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4(2016年5月20日)
3.x版本
不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.0
jQuery重点知识点
- 选择器
- DOM操作
- CSS操作
- 事件处理
- 遍历
- 动画
选择器之基础选择器(一)
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box">类选择器</div>
<div class="box">类选择器</div>
<span>元素选择器</span>
<a id="it" href="#">ID选择器</a>
<script>
// $就是jQuery的缩写，他就代表了jQuery
// 类选择器
$(".box").html("jQuery类选择器")
// 元素选择器
$("span").html("jQuery元素选择器")
// ID选择器
$("#it").html("jQuery ID选择器")
</script>
</body>
</html>
选择器之基础选择器(二)
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>
<ul>
<li>child item 1</li>
<li>child item 2</li>
<li>child item 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<script>
// jQuery子元素选择器
// .css(样式属性，样式属性值)
// $(".topnav > li").css("border","3px solid red")
// jQuery后代元素选择器
$(".topnav li").css("border","3px solid red")
</script>
</body>
</html>
选择器之属性选择器(一)
属性选择器有很多操作方式（6个）
attribute: 属性
Selector: 选择器
name: 选中的属性
value: 属性值
Attribute Selector [name=“value”]
选择指定属性是给定值的元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<input type="radio" name="user" value="username">
<span>name</span>
</div>
<div>
<input type="radio" name="user" value="age">
<span>age</span>
</div>
<script>
// 利用属性选择器：选中第一个input，修改对应的span文本：name -> username
// next(): 找到同级的下一个标签
// html() === innerHTML
$("input[value='username']").next().html("useranme");
</script>
</body>
</html>
运行结果：
Attribute Selector [name|=“value”]
选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="#" alt="gb">gb</a>
<a href="#" alt="gb-JavaScript">gb-JavaScript</a>
<a href="#" alt="gbitbaizhan">gbJavaScript</a>
<script>
// 1. 属性选择器，完美匹配或者前缀匹配(-)
$('a[alt|="gb"]').css("border","2px solid red")
</script>
</body>
</html>
运行结果：
Attribute Selector [name*=“value”]
选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="#" alt="gb">gb</a>
<a href="#" alt="gb">gb-JavaScript</a>
<a href="#" alt="gbitbaizhan">gbitbaizhan</a>
<a href="#" alt="JavaScript">JavaScript</a>
<script>
// 属性选择器，匹配包含关系即可 匹配gb
$("a[alt*='gb']").css("border","2px solid red")
</script>
</body>
</html>
运行结果：
选择器之属性选择器(二)
Attribute Selector [name~=“value”]选择指定属性用空格分隔的值中包含一个给定值的元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" name="gb-JavaScript">
<input type="text" name="gb web">
<input type="text" name="bjgbweb">
<script>
// 属性选择器，空格隔开的独立的单词可以匹配 匹配sxt
$("input[name~='gb']").css("border","2px solid red")
</script>
</body>
</html>
运行结果：
Attribute Selector [name$=“value”]
选择指定属性是以给定值结尾的元素。这个比较是区分大小写的
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" name="gb-JavaScript">
<input type="text" name="gb web">
<input type="text" name="bjgbweb">
<script>
// 属性选择器，匹配给定结尾的字符串 咱们匹配web
$("input[name$='web']").css("border","2px solid red")
</script>
</body>
</html>
运行结果：
Attribute Selector [name^=“value”]
选择指定属性是以给定字符串开始的元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" name="gb-JavaScript">
<input type="text" name="gb web">
<input type="text" name="bjgbweb">
<script>
// 属性选择器，匹配开头元素 匹配sxt
$("input[name^='gb']").css("border","2px solid red")
</script>
</body>
</html>
运行结果：
选择器之jQuery扩展(一)
:eq(index) Selector
在匹配的集合中选择索引值为index的元素。
注意：
index下标计算是从0开始的
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
<script>
// jquery 扩展选择器：:eq(index) index：下标从0开始 选中第三个li标签
$("li:eq(2)").css("border","2px solid red")
</script>
</body>
</html>
运行结果：
:even Selector
选择所引值为偶数的元素
注意：
这是基于0的索引，所以 :even 选择器是选择第一个元素，第三个元素，依此类推在匹配。
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>Row with Index #0</td>
</tr>
<tr>
<td>Row with Index #1</td>
</tr>
<tr>
<td>Row with Index #2</td>
</tr>
<tr>
<td>Row with Index #3</td>
</tr>
</table>
<script>
// jquery扩展选择器，even偶数选择器 注意，从0开始
$("tr:even").css("background-color","red")
</script>
</body>
</html>
运行结果：
:odd Selector
选择索引值为奇数元素
注意:
这是基于0的索引，所以 :odd 选择器是选择第二个元素，第四个元素，依此类推在匹配。
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>Row with Index #0</td>
</tr>
<tr>
<td>Row with Index #1</td>
</tr>
<tr>
<td>Row with Index #2</td>
</tr>
<tr>
<td>Row with Index #3</td>
</tr>
</table>
<script>
// jquery扩展选择器，even偶数选择器 注意，从0开始
$("tr:odd").css("background-color","red")
</script>
</body>
</html>
运行结果：
选择器之jQuery扩展(二)
:first Selector
选择第一个匹配的元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>
<script>
// jQuery扩展选择器 first第一个元素选择器
$("tr:first").css("background-color","red")
</script>
</body>
</html>
运行结果：
:last Selector
选择最后一个匹配的元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>
<script>
// jQuery扩展选择器 last最后一个元素选择器
$("tr:last").css("background-color","red")
</script>
</body>
</html>
运行结果：
:gt(index) Selector
选择匹配集合中所有大于给定index（索引值）的元素。
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>TD #0</td>
<td>TD #1</td>
<td>TD #2</td>
</tr>
<tr>
<td>TD #3</td>
<td>TD #4</td>
<td>TD #5</td>
</tr>
<tr>
<td>TD #6</td>
<td>TD #7</td>
<td>TD #8</td>
</tr>
</table>
<script>
// jQuery扩展选择器，gt(index) 大于index的值
$("td:gt(5)").css("background-color","red")
</script>
</body>
</html>
运行结果：
:lt(index) Selector
选择匹配集合中所有索引值小于给定index参数的元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>TD #0</td>
<td>TD #1</td>
<td>TD #2</td>
</tr>
<tr>
<td>TD #3</td>
<td>TD #4</td>
<td>TD #5</td>
</tr>
<tr>
<td>TD #6</td>
<td>TD #7</td>
<td>TD #8</td>
</tr>
</table>
<script>
// jQuery扩展选择器，lt(index) 小于index的值
$("td:lt(5)").css("background-color","red")
</script>
</body>
</html>
运行结果：
DOM操作(一)
addClass()
给元素添加class，值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
也可以同时添加多个class
removeClass()
移除元素中每个匹配元素上一个，多个或全部样式 通过class名字移除元素
配合addClass() 一起使用用来切换元素的样式
toggleClass()
这是一个开关方法，如果class存在则删除，如果class不存在则添加
hasClass()
判断一个元素上是否具有某个class
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="error">Hello</div>
<span class="txt">Hello</span>
<a href="#" class="active">itbaizhan</a>
<img src="" alt="" class="img">
<script>
/**
* 1. addClass() :添加class，不会覆盖原有的class 可以添加多个class，用个空格隔开
* 2. removeClass() :移除class，可以移除一个或者多个，也可以全部移除
* 3. toggleClass() :开关，如果存在则删除，如果不存在则添加
* 4. hasClass() :判断一个元素是否存在某个class，存在返回true，不存在返回false
*
* 补充知识点：在jQuery中，有个链式调用
* */
// $("div").addClass("txt success");
// $("div").removeClass("txt error");
// $("div").removeClass(); // 全部移除
// $("span").toggleClass("txt")
// var flag = $("a").hasClass("active");
// console.log(flag);
// if(flag){
// console.log("a标签存在active");
// }else{
// console.log("a标签不存在active");
// }
// 给某个元素添加一个class然后在移除一个class
// 把img的class="img"移除掉，在添加个class="image"
// $("img").addClass("image");
// $("img").removeClass("img")
$("img").removeClass("img").addClass("image") // 链式调用
</script>
</body>
</html>
DOM操作(二)
html()
获取元素中的HTML内容
html()方法还可以设置元素的html内容
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box">Hello, jQuery</div>
<script>
// 1. html() :设置一个元素内容和获取一个元素内容
// var content = $(".box").html(); // 获得内容
// console.log(content);
// $(".box").html("你好啊") // 设置内容
// 在js中，innerHTML和innerText 在jQuery html() text()
// var content = $(".box").text();
// console.log(content);
// $(".box").text("<a href='#'>itbaizhan</a>");
$(".box").html("<a href='#'>itbaizhan</a>");
</script>
</body>
</html>
val()
用于获取 <input> 标签中的内容
也可以设置 <input> 标签内容
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" value="我是内容">
<script>
// val：设置和获取input输入框的内容
$("input").val("我是动态设置的内容")
var content = $("input").val(); // 获取内容
console.log(content);
</script>
</body>
</html>
运行结果：
attr()
获取匹配的元素的属性的值 或 设置匹配元素的一个或多个属性
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<img class="img1" src="./1.jpg" alt="小姐姐" width="200px">
<img class="img2" src="" alt="" width="200px">
<script>
var content = $(".img1").attr("alt");
console.log(content);//小姐姐
$(".img2").attr("src","./1.jpg")
// 同时设置多个属性
$(".img2").attr({
src:"./1.jpg",
alt:"美女",
title:"小姐姐"
})
</script>
</body>
</html>
运行结果：
removeAttr()
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<a class="ceshi" href="#" alt="测试">itbaizha</a>
<script>
var content = $(".ceshi").attr("alt"); //获取这个alt属性的值
console.log(content)//测试
$(".ceshi").removeAttr("alt"); // 删除属性alt
var content1 = $(".ceshi").attr("alt"); //重新获取这个alt属性的值
console.log(content1)//undefined
</script>
</body>
</html>
运行结果：
DOM操作(三)
DOM 插入并包裹现有内容
.wrap()
在每个匹配的元素外层包上一个html元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text">Hello</p>
<p>World</p>
<script>
// 创建一个div容器，包裹p标签
$("#text").wrap("<div class='container'></div>");
</script>
</body>
</html>
运行结果：
.unwrap()
将匹配元素集合的父级元素删除，保留自身在原来的位置
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p id="text">Hello</p>
</div>
<div>
<p>Hello</p>
</div>
<script>
// 删除p标签的父级元素
$("#text").unwrap();
</script>
</body>
</html>
运行结果：
.wrapAll()
在所有匹配元素外面包一层HTML结构
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>sxt</p>
<p>itbaizhan</p>
<span>Hello</span>
<p>web</p>
<script>
// 将三个p标签包裹在一个容器中div
$("p").wrapAll("<div></div>");
</script>
</body>
</html>
运行结果：
.wrapInner()
在匹配元素里的内容外包一层结构
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>Hello</p>
<script>
// 包裹p标签里的内容
$("p").wrapInner("<i></i>");
</script>
</body>
</html>
运行结果：
DOM操作(四)
DOM 插入现有元素内
在一个现有元素内插入新内容
.append()
在每个匹配元素里面的末尾处插入参数内容
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="root">
<p>分割线</p>
</div>
<script>
// 在一个元素的尾部添加内容
$("#root").append("<p>Hello World</p>");
</script>
</body>
</html>
运行结果：
.prepend()
将参数内容插入到每个匹配元素的前面（元素内部）
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="root">
<p>分割线</p>
</div>
<script>
// 在一个元素的头部添加内容
$("#root").prepend("<p>Hello World</p>");
</script>
</body>
</html>
运行结果：
DOM操作(五)
DOM 插入现有元素外
.after()
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>Hello</p>
<script>
// 在p标签的同级下面增加一个p标签，内容为world
$("p").after("<p>world</p>");
</script>
</body>
</html>
运行结果：
.before()
根据参数设定，在匹配元素的前面插入内容，作为其兄弟节点
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>Hello</p>
<script>
// 在p标签的同级上面增加一个p标签，内容为world
$("p").before("<p>world</p>");
</script>
</body>
</html>
运行结果：
DOM操作(六)
DOM 移除
从 DOM 树中删除元素
.empty()
从DOM中移除集合中匹配元素的所有子节点
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box">
<p>Hello</p>
<span>Wrold</span>
</div>
<script>
// 清空div中的内容：empty
$("#box").empty();
</script>
</body>
</html>
运行结果：
.remove()
将匹配元素集合从DOM中删除
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box">
<p>Hello</p>
<span>Wrold</span>
</div>
<script>
// 移除div元素，同时移除掉里面所有的内容 remove
$("#box").remove();
</script>
</body>
</html>
运行结果：
DOM 替换
从 DOM 树中移除已有的内容并将其替换为新内容
.replaceAll()
用集合的匹配元素替换每个目标元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p id="text">Hello</p>
</div>
<script>
// 将p标签替换成span标签: replaceAll
$("<span>World</span>").replaceAll("#text")
</script>
</body>
</html>
运行结果：
.replaceAll()
用集合的匹配元素替换每个目标元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p id="text">Hello</p>
</div>
<script>
// 将p标签替换成span标签: replaceWith
$("#text").replaceWith("<b>World</b>")
</script>
</body>
</html>
运行结果：
CSS操作(一)
.css()
获取和设置匹配元素的样式
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container">你好啊</div>
<script>
// 通过.css获取当前元素的样式
var color = $(".box").css("background-color");
console.log(color); //rgb(255, 0, 0)
$(".container").css("height","200px")
$(".container").css({
width:"200px",
height:"200px",
// 如果涉及到-的形式，写成驼峰命名法：font-size -> fontSize
fontSize:"20px",
backgroundColor:"green"
})
</script>
</body>
</html>
运行结果：
.height()，.width()
获取元素的当前高度值宽度值或设置元素的高度值宽度值
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script>
// 获取box1宽度和高度
var width = $(".box1").width();
var height = $(".box1").height();
console.log(width,height);
// 设置box2的宽度和高度 链式调用
$(".box2").width(200).height(200);
</script>
</body>
</html>
运行结果：
.innerHeight()，.innerWidth()
为元素的当前计算高度值和宽度值,包括padding，但是不包括border
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: 10px solid green;
margin: 30px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// innerHeight和innerWidth获取一个元素的宽度高度+padding
var height = $(".box").innerHeight();
var width = $(".box").innerWidth();
console.log(height,width); // 240 240
</script>
</body>
</html>
运行结果：
.outerHeight()，.outerWidth()
获取元素的当前宽度值和高度值,包括padding，border和选择性的margin
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: 10px solid green;
margin: 30px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 获取一个div的宽度高度+padding+border
var height1 = $(".box").outerHeight();
var width1 = $(".box").outerWidth();
console.log(height1,width1); // 260 260
// 获取一个div的宽度高度+padding+border+margin
var height2 = $(".box").outerHeight(true);
var width2 = $(".box").outerWidth(true);
console.log(height2,width2); // 320 320
</script>
</body>
</html>
运行结果：
CSS操作(二)
.offset()
获取元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 100px;
top: 50px;
}
.root{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="root"></div>
<script>
// 获取元素相对文档的位置 offset-> left top
var offset = $(".box").offset()
$(".root").offset({
top:offset.top + 200,
left:offset.left
})
</script>
</body>
</html>
运行结果：
.position()
获取元素的当前坐标，相对于 offset parent 的坐标
注意：
.position() 方法可以取得元素相对于父元素的偏移位置。与 .offset()不同, .offset() 是获得该元素相对于 documet 的当前坐标 当把一个新元素放在同一个容器里面另一个元素附近时，用 .position() 更好用。
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.container {
width: 300px;
height: 200px;
border: 2px solid #000;
margin-left: 100px;
position: relative;
}
.box {
width: 100px;
height: 100px;
padding: 15px;
background-color: red;
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
<script>
// 1. 利用offset获取当前元素距离左边的值
// 2. 利用position获取当前元素距离左边的值
var offset = $(".box").offset();
console.log(offset);
var position = $(".box").position();
console.log(position);
</script>
</body>
</html>
运行结果：
scrollLeft(), .scrollTop()
获取元素的当前水平和垂直滚动条的位置。设置每个匹配元素的水平和垂直滚动条位置
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
.container {
background: #CCCCCC;
border: 3px solid #666666;
margin: 5px;
padding: 5px;
width: 200px;
height: 200px;
overflow: auto;
}
p {
margin: 10px;
padding: 5px;
border: 2px solid #666;
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div class="container">
<h1>itbaizhan</h1>
<p>sxt</p>
</div>
<span class="text"></span>
<script>
// 设置父级容器左右和上下滚动
$(".container").scrollTop(200);
$(".container").scrollLeft(200);
// 获取元素的滚动距离
console.log($(".container").scrollTop());
console.log($(".container").scrollLeft());
</script>
</body>
</html>
运行结果：
事件之绑定事件处理器
.on()
在选定的元素上绑定一个或多个事件处理函数
事件委托
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
// 绑定事件处理器：on
$("#btn").on("click",function(){
console.log("事件触发了");
})
// 事件委托
$("ul").on("click","li",function(event){
console.log(event.target);
})
</script>
</body>
</html>
运行结果：
.one()
为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
// one事件处理器，只能触发一次
$("#btn").one("click",function(){
console.log("一次性事件");
})
</script>
</body>
</html>
.off()
移除一个事件处理函数，移除on事件处理器
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
function clickHandle(){
console.log("事件处理器");
}
$("#btn").on("click",clickHandle)
// 移除on事件处理器
$("#btn").off("click",clickHandle)
</script>
</body>
</html>
运行结果：
控制台什么都没有
事件之鼠标事件
.click()
为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的"click" 事件
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
//方式一：
$("#btn").on("click",function(){
console.log("点击事件");
})
//方式二：
$("#btn").click(function(){
console.log("点击事件");
})
</script>
</body>
</html>
.hover()
将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
}
#container{
width: 200px;
height: 100px;
background-color: gray;
position: absolute;
left: 108px;
top: 8px;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="container"></div>
<script>
// hover：鼠标移入和鼠标移出
$("#box").hover(
// 鼠标划入
function(){
console.log("鼠标进入元素");
$("#container").css("display","block")
},
// 鼠标划出
function(){
console.log("鼠标移开元素");
$("#container").css("display","none")
}
)
</script>
</body>
</html>
.mouseenter() 和 .mouseleave()
鼠标进入事件 ；鼠标离开事件
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
// 鼠标进入 鼠标移除
$("div").mouseenter(function(){
console.log("鼠标进入");
})
$("div").mouseleave(function(){
console.log("鼠标移除");
})
</script>
</body>
</html>
运行结果：
.mousemove()
鼠标滑动事件
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
// 鼠标滑动事件 防抖和节流！！！
$("div").mousemove(function(){
console.log("滑动");
})
</script>
</body>
</html>
运行结果：
.mouseover() 和 .mouseout()
鼠标进入事件（注：支持事件冒泡
鼠标离开事件（注：支持事件冒泡）
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
.root{
width: 300px;
height: 300px;
background-color: red;
}
.box{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="root">
<div class="box"></div>
</div>
<script>
// mouseover mouseout 支持事件冒泡 子元素中也会触发父元素的事件
$(".root").mouseover(function(){
console.log("鼠标进入元素");
})
$(".root").mouseout(function(){
console.log("鼠标离开元素");
})
//mouseenter mouseleave 不支持事件冒泡
// $(".root").mouseenter(function(){
// console.log("鼠标进入元素");
// })
// $(".root").mouseleave(function(){
// console.log("鼠标离开元素");
// })
</script>
</body>
</html>
事件之表单事件
.focus()
为 JavaScript 的 “focus” 事件绑定一个获取焦点处理函数，或者触发元素上的 “focus” 事件
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 表单事件：获取焦点事件focus
$("#username").focus(function(){
console.log("获取到焦点");
$("#username").css("border","5px solid red")
})
</script>
</body>
</html>
运行结果：
.blur()
为 “blur” 事件绑定一个失去焦点处理函数
<!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="./js/jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 表单事件：失去焦点事件blur
$("#username").blur(function(){
console.log("失去焦点");
$("#username").val(""); // 清空输入框中的内容
})
</script>
</body>
</html>
运行结果：
.change()
为JavaScript 的 “change” 事件绑定一个表单改变处理函数
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 表单事件：内容发生改变，失去焦点，或者回车都会触发
$("#username").change(function(e){
console.log(e.target.value); // js的方法，如果想用jq：val
console.log($(e.target).val()); // $() // 1. 选择器 2. 转换成一个jQuery对象
console.log($(this).val()); // this代表当前元素，也就是input输入框
})
</script>
</body>
</html>
运行结果：
.submit()
当用户提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在 <form> 元素上
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<input type="text">
<input type="submit">
</form>
<script>
// submit表单提交事件：只能绑定在form表单上
$("form").submit(function(){
alert("提交触发了")
// 将表单的数据提交给服务器
})
</script>
</body>
</html>
运行结果：
事件之键盘事件
.keydown()
添加键盘按下事件
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 键盘事件：keydown
$("#username").keydown(function(e){
console.log(e.keyCode); // 每个按钮的唯一标识
})
</script>
</body>
</html>
运行结果：
.keyup()
添加键盘抬起事件
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 键盘事件：keyyp
$("#username").keyup(function(e){
console.log(e.keyCode); // 每个按钮的唯一标识
})
</script>
</body>
</html>
运行结果：
.keypress()
添加键盘事件
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 键盘事件：keypress 不存在按下抬起 按了就会触发
$("#username").keypress(function(e){
console.log(e.keyCode); // 每个按钮的唯一标识
})
</script>
</body>
</html>
运行结果：
事件之浏览器事件
.resize()
添加浏览器窗口发生变化触发事件
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
// 浏览器事件：resize：当浏览器的可视窗口发生变化时触发
$(window).resize(function(){
console.log("浏览器窗口大小发生变化");
// 窗口发生变化要隐藏一些元素
// 当浏览器的可视窗口小于800的时候，隐藏div
if($(window).width() <= 800){
$("div").css("display","none");
}
})
</script>
</body>
</html>
.scroll()
浏览器滚动事件
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
p{
height: 500px;
}
</style>
</head>
<body>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容4</p>
<script>
// 浏览器事件：滚动事件 scroll
$(window).scroll(function(){
// 获得滚动高度的方法
if($(window).scrollTop() >= $(window).height() - 50){
console.log("浏览器滚动到了最底下，被你看光了");
}
})
</script>
</body>
</html>
运行结果:
事件对象
event.type
获取事件类型
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
$("#btn").on("click",function(e){
console.log(e.type); // click
})
</script>
</body>
</html>
event.target
获取当前元素对象
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
$("#btn").on("click",function(e){
// e.target:js对象
console.log(e.target); // button
// js中
console.log(e.target.innerHTML);
// jQuery中
// jquery对象才能调用jquery方法，js对象能调用js的方法，不能混淆
// 把一个js对象变成一个jquery对象 $(js对象)
console.log($(e.target).html());
})
</script>
</body>
</html>
event.currentTarget
获取当前元素对象
注意：
target：指向触发事件元素
currentTarget：指向添加事件的元素
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="button">按钮</button>
<div id="container">
<button id="btn">按钮</button>
</div>
<script>
$("#button").on("click",function(e){
console.log(e.currentTarget);
})
$("#container").click(function(e){
console.log("container-target:",e.target);
console.log("container-currentTarget:",e.currentTarget);
})
$("#btn").click(function(e){
console.log("btn-target:",e.target);
console.log("btn-currentTarget:",e.currentTarget);
})
</script>
</body>
</html>
执行结果：
event.preventDefault()
如果调用这个方法，默认事件行为将不再触发。
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="https://itbaizhan.com">itbaizhan</a>
<script>
$("a").click(function(e){
e.preventDefault();
console.log("哈哈");
})
</script>
</body>
</html>
执行结果：
event.stopPropagation()
防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<button>按钮</button>
</div>
<script>
$("div").click(function(){
console.log("我是div");
})
$("button").click(function(e){
e.stopPropagation(); // 组织事件冒泡
console.log("我是button");
})
</script>
</body>
</html>
执行结果：
jQuery遍历
.map()
通过一个函数匹配当前集合中的每个元素,产生一个包含新的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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
/*
jQuery遍历
map
函数类型的参数：
index：每个元素的下标
element：每个元素
对象类型的区分：
jquery：S.fn.init(4) [li, li, li, li, prevObject: S.fn.init(1)]
js：原始的元素效果
*/
$("li").map(function(index,element){
console.log(index,element);
$(element).html("jQuery"+index +"new");
//element.innerHTML = "item" + index + "new"
if(index == 2){
$(element).css("color","red");
//element.style.color = "blue"
}
})
</script>
</body>
</html>
运行结果：
.each()
遍历一个jQuery对象，为每个匹配元素执行一个函数
注意：
each和map的返回值不同，map返回一个新的数组，each返回原始数组
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
/*
jQuery遍历
each
函数类型的参数：
index：每个元素的下标
element：每个元素
对象类型的区分：
jquery：S.fn.init(4) [li, li, li, li, prevObject: S.fn.init(1)]
js：原始的元素效果
*/
$("li").each(function(index,element){
console.log(index,element);
if(index == 2){
$(element).css("color","blue");
//element.style.color = "red"
}
})
</script>
</body>
</html>
运行结果：
.get()
通过jQuery对象获取一个对应的DOM元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
// 通过get获取列表中的其中一个元素
// 下标从0开始
$("li").get(1).innerHTML = "我是一个全新的item"
var a = $("li").get(2);
$(a).html("我是第三个元素");
$($("li").get(3)).html("我是第四个元素");
/*
为什么要有js和jQuery对象的相互转换
解：因为他们的方法和属性是不能互相调用的
1. js对象转换成jquery对象：$(lis)
2. jquery对象转换成js对象
1. 获取一个元素：get();
2. 获取每一个元素:each map
*/
console.log($("li").get(1));
</script>
</body>
</html>
运行结果：
jQuery树遍历
.children()
获得子元素，可以传递一个选择器参数
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="first">
<li>item 1</li>
<li>
<ul class="second">
<li>child item1</li>
<li>child item2</li>
</ul>
</li>
<li>item 3</li>
<span>Hello</span>
</ul>
<script>
// jquery元素关系 children：获取子元素
// $(".first").children().css("border","2px solid red") //子元素中的所有元素（不包括孙子元素）
$(".first").children("li").css("border","2px solid red") //指定子元素中的指定元素
</script>
</body>
</html>
运行结果：
.find()
寻找后代元素
注意：
find() 和 .children() 方法是相似的，但后者只是再DOM树中向下遍历
一个层级（注：就是只查找子元素，而不是后代元素）。
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="first">
<li>item 1</li>
<li>
<ul class="second">
<li>child item1</li>
<li>child item2</li>
</ul>
</li>
<li>item 3</li>
<span>Hello</span>
</ul>
<script>
// jquery元素关系 find：获取后代元素（包括子孙元素）
console.log($(".first").find("li"));
$(".first").find("li").css("border","2px solid red")
</script>
</body>
</html>
运行结果：
.next()
取得元素紧邻的后面同辈元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>第一个元素</div>
<span>第二个元素</span>
<p>第三个元素</p>
<script>
// 关系：next：同级的下一个元素
$("span").next().css("border","2px solid red")
</script>
</body>
</html>
运行结果：
.parent()
取得元素的父元素
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>Hello</p>
</div>
<script>
// 关系：parent：读取元素的父级
$("p").parent().css("border","3px solid red")
</script>
</body>
</html>
运行结果：
.siblings()
获得元素的兄弟元素，可以传递一个选择器参数
<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>Hello1</p>
<p>Hello2</p>
<p class="text">Hello3</p>
<p>Hello4</p>
<span>World</span>
<p>Hello5</p>
<script>
// 关系：siblings：获取所有同级元素
$(".text").siblings("p").css("border","2px solid red")
</script>
</body>
</html>
运行结果：
jQuery动画(一)
.show()
执行显示动画
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<div></div>
<script>
// jquery动画：show(time) time:动画执行的时常 单位是毫秒
$("div").show(2000);
</script>
</body>
</html>
.hide()
执行隐藏动画
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<script>
// jquery动画：hide(time) time:动画执行的时常 单位是毫秒
$("#show").click(function () {
$("div").show(1000)
})
$("#hide").click(function () {
$("div").hide(1000)
})
</script>
</body>
</html>
.fadeIn() 和 .fadeOut()
通过淡入的方式显示匹配元素。
通过淡出的方式显示匹配元素
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div></div>
<script>
// 淡入淡出
$("#show").click(function () {
$("div").fadeIn(1000)
})
$("#hide").click(function () {
$("div").fadeOut(1000)
})
</script>
</body>
</html>
jQuery动画(二)
jQuery提供了一系列的动画基本方法，同时也提供了自定动画方案 .animate()
.slideDown() 显示 和 .slideUp() 隐藏
上下滑动
用滑动动画显示一个元素
用滑动动画隐藏一个元素
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<script>
// jquery动画： slideDown和slideUp：滑动动画
$("#show").click(function () {
$("div").slideDown(2000);
})
$("#hide").click(function () {
$("div").slideUp(2000);
})
</script>
</body>
</html>
运行结果：
.animate()
执行自定义动画
<!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="./js/jquery-3.6.0.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<button id="btn">执行动画</button>
<button id="btn2">执行动画</button>
<script>
// 自定义动画:animate({ }) 宽度和透明度一起执行动画
$("#btn").click(function () {
$("div").animate({
width: "400px",
opacity: 0.5
}, 2000) // 第二个参数是动画执行的时常
})
$("#btn2").click(function () {
$("div").animate({
width: "200px",
opacity: 1
}, 2000) // 第二个参数是动画执行的时常
})
</script>
</body>
</html>
扫一扫
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
