4. jQuery
jQuery是一个JavaScript第三方模块（第三方类库）。
- 基于jQuery，自己开发一个功能。
- 现成的工具 依赖jQuery，例如：BootStrap动态效果。
4.1 快速上手
-
下载jQuery
https://jquery.com/ -
应用jQuery
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 id="txt">中国联通</h1> <script src="static/jquery-3.6.0.min.js"></script> <script type="text/javascript"> // 利用jQuery中的功能实现某些效果 $("#txt").text("广西移动"); </script> </body> </html>
4.2 寻找标签（直接寻找）
-
ID选择器
<h1 id="txt">中国联通</h1> <h1>中国联通</h1> <h1>中国联通</h1>$("#txt") -
样式选择器
<h1 class="c1">中国联通1</h1> <h1 class="c1">中国联通2</h1> <h1 class="c2">中国联通3</h1>$(".c1") -
标签选择器
<h1 class="c1">中国联通1</h1> <div class="c1">中国联通2</h1> <h1 class="c2">中国联通3</h1>$("h1") -
层级选择器
<h1 class="c1">中国联通1</h1> <h1 class="c1"> <div class="c2"> <span></span> <a></a> </div> </h1> <h1 class="c2">中国联通3</h1>$(".c1 .c2 a") -
多选择器
<h1 class="c1">中国联通1</h1> <h1 class="c1"> <div class="c3"> <span></span> <a></a> </div> </h1> <h1 class="c2">中国联通3</h1> <ul> <li>xx</li> <li>xx</li> </ul>$("#c3,#c2,li") -
属性选择器
<input type='text' name="n1" /> <input type='text' name="n1" /> <input type='text' name="n2" />$("input[name='n1']")
4.3 间接寻找
-
找到兄弟
<div> <div>北京</div> <div id='c1'>上海</div> <div>深圳</div> <div>广州</div> </div>$("#c1").prev() // 上一个 $("#c1") $("#c1").next() // 下一个 $("#c1").next().next() // 下一个、下一个 $("#c1").siblings() // 所有的系统 -
找父子
<div> <div> <div>北京</div> <div id='c1'> <div>青浦区</div> <div class="p10">宝山区</div> <div>浦东新区</div> </div> <div>深圳</div> <div>广州</div> </div> <div> <div>陕西</div> <div>山西</div> <div>河北</div> <div>河南</div> </div> </div>$("#c1").parent() // 父亲 $("#c1").parent().parent() // 父亲、父亲 $("#c1").children() // 所有的儿子 $("#c1").children(".p10") // 所有的儿子中寻找class=p10 $("#c1").find(".p10") // 去所有子孙中寻找class=p10 $("#c1").find("div") // 去所有子孙中寻找class=p10
案例：菜单的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
height: 800px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
}
.menus .content a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div>
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
</div>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
function clickMe(self) {
// $(self) -> 表示当前点击的那个标签。
// $(self).next() 下一个标签
// $(self).next().removeClass("hide"); 删除样式
$(self).next().removeClass("hide");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
height: 800px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.menus .content a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div>
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
</div>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
function clickMe(self) {
var hasHide = $(self).next().hasClass("hide");
if(hasHide){
$(self).next().removeClass("hide");
}else{
$(self).next().addClass("hide");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus {
width: 200px;
height: 800px;
border: 1px solid red;
}
.menus .header {
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.menus .content a {
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div>
<div class="content">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">上海2</div>
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京2</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
</div>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
function clickMe(self) {
// 让自己下面的功能展示出来
$(self).next().removeClass("hide");
// 找父亲，父亲的所有兄弟，再去每个兄弟的子孙中寻找 class=content，添加hide样式
$(self).parent().siblings().find(".content").addClass("hide");
}
</script>
</body>
</html>
4.4 操作样式
- addClass
- removeClass
- hasClass
4.5 值的操作
<div id='c1'>内容</div>
$("#c1").text() // 获取文本内容
$("#c1").text("休息") // 设置文本内容
<input type='text' id='c2' />
$("#c2").val() // 获取用户输入的值
$("#c2").val("哈哈哈") // 设置值
案例：动态创建数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txtUser" placeholder="用户名">
<input type="text" id="txtEmail" placeholder="邮箱">
<input type="button" value="提交" onclick="getInfo()"/>
<ul id="view">
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
function getInfo() {
// 1.获取用户输入的用户名和密码
var username = $("#txtUser").val();
var email = $("#txtEmail").val();
var dataString = username + " - " + email;
// 2.创建li标签，在li的内部写入内容。 $("<li>")
var newLi = $("<li>").text(dataString);
// 3.把新创建的li标签添加到ul里面。
$("#view").append(newLi);
}
</script>
</body>
</html>
4.6 事件
<input type="button" value="提交" onclick="getInfo()"/>
<script>
function getInfo() {
}
</script>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script>
$("li").click(function(){
// 点击li标签时，自动执行这个函数；
// $(this) 当前你点击的是那个标签。
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
$("li").click(function () {
var text = $(this).text();
console.log(text);
});
</script>
</body>
</html>
在jQuery中可以删除某个标签。
<div id='c1'>内容</div>
$("#c1").remove();
案例：删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
$("li").click(function () {
$(this).remove();
});
</script>
</body>
</html>
当页面框架加载完成之后执行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
$(function () {
// 当页面的框架加载完成之后，自动就执行。
$("li").click(function () {
$(this).remove();
});
});
</script>
</body>
</html>
案例：表格操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>武沛齐</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
<tr>
<td>1</td>
<td>武沛齐</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
<tr>
<td>1</td>
<td>武沛齐</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
<tr>
<td>1</td>
<td>武沛齐</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
</tbody>
</table>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
$(function () {
//找到所有class=delete的标签，绑定事件
$(".delete").click(function () {
// 删除当前行的数据
$(this).parent().parent().remove();
});
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
