jQuery是一个Javascript第三方模块(第三方类库)。
基于jQuery,自己开发一个功能;现成的工具依赖jQuery,例如Bootstrap动态效果。
6.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">广东</h1>
<h1 class="c1">湖南</h1>
<h1 class="c2">湖北</h1>
$(".c1")
标签选择器
<h1 class="c1">广东</h1>
<div class="c1">湖南</h1>
<h1 class="c2">湖北</h1>
$("h1")
层级选择器
<h1 class="c1">广东</h1>
<h1 class="c1">
<div class="c2">
<span></span>
<a></a>
</div>
</h1>
<h1 class="c2">湖北</h1>
$(".c1 .c2 a")
多选择器
<h1 class="c1">广东</h1>
<h1 class="c1">
<div class="c3">
<span></span>
<a></a>
</div>
</h1>
<h1 class="c2">湖北</h1>
<ul>
<li>xx</li>
<li>xx</li>
</ul>
$("#c1,#c2,li")
属性选择器
<input type='text' name="n1" />
<input type='text' name="n1" />
<input type='text' name="n2" />
$("input[name='n1']")
6.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 class="p1">长沙</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(".p1") //所有的儿子中寻找p1
$("#c1").find(".p1") //所有的子孙中寻找p1
6.4 操作样式
addClass、removeClass、hasClass
6.5 值的操作
<div id='c1'>内容</div>
$("#c1").text() //获取文本内容
$("#c1").text("吃饭") //设置文本内容
<input type='text' id='c2' />
$("#c2").val() //获取用户输入的值
$("#c2").val("不吃饭") //设置值
6.6 事件
<input type="button" value="提交" onclick="getInfo()" />
<script>
function getInfo() {
}
</script>
在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>
$(function () {
// 当页面的框架加载完成之后,自动就执行。
$("li").click(function () {
$(this).remove();
});
})
</script>
</body>
</html>