文章目录
- 前言
- 一、安装与快速上手
- 二、直接寻找标签
- 1.ID选择器
- 2.类选择器/样式选择器
- 3.标签选择器
- 4.层级选择器
- 5.多选择器
- 6.属性选择器
- 三、间接寻找标签
- 1.找兄弟
- 2.找父子
- 四、值操作
- 五、事件
- 六、样式操作
前言
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
一、安装与快速上手
- JQuery是一个JavaScript的第三方模块(第三方类库)
- JQuery的安装方式参考《BootScrap详细教程》的实现动态效果部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1 id="txt">中国联通</h1><script src="static/js/jquery-3.6.1.min.js"></script><script type="text/javascript">//使用JQuery修改内容$("#txt").text("广西移动");</script></body>
</html>
二、直接寻找标签
1.ID选择器
<h1 id="txt">中国联通</h1>
<h1>中国联通</h1>
<h1>中国联通</h1>
$("#txt")
2.类选择器/样式选择器
<h1 class="c1">中国联通</h1>
<h1 class="c2">中国联通</h1>
<h1 class="c3">中国联通</h1>
$(".c1")
3.标签选择器
<h1 class="c1">中国联通</h1>
<h1 class="c2">中国联通</h1>
<h1 class="c3">中国联通</h1>
$("h1")
4.层级选择器
<div class="c1"><div class="c2"><h1>123</h1></div>
</div>
$(".c1 .c2 h1")
5.多选择器
<div class="c1"><div class="c2"><h1>123</h1></div>
</div>
<div class="c3"><div class="c4"><h1>123</h1><li>456</li></div>
</div>
$("#c1,#c2,li")
6.属性选择器
<input type="text" name="n1" />
<input type="text" name="n2" />
<input type="text" name="n3" />
$("input[name='n1']")
三、间接寻找标签
1.找兄弟
<div><div>北京</div><div id="c1">上海</div><div>深圳</div><div>广州</div>
</div>
$("#c1").prev() //上一个
$("#c1") //本体
$("#c1").next() //下一个
$("#c1").next().next() //下一个的下一个
$("#c1").siblings() //所有的
2.找父子
<div><div><div>北京</div><div id="c1"><div>浦东新区</div><div>静安区</div><div>奉贤区</div></div><div>深圳</div><div>广州</div></div><div><div>北京</div><div id="c1">上海</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").children("div") //所有的儿子中寻找标签 div
- 实例：菜单切换
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.menus {width: 200px;height: 1000px;border: 1px solid red;}.menus .header {background-color: royalblue;padding: 5px 5px;border-bottom: 1px dotted gray;cursor: pointer;}.menus .content a {display: block;padding: 5px 5px;border-bottom: 1px dotted gray;}.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><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><a>青浦区</a></div></div></div><script src="static/js/jquery-3.6.1.min.js"></script><script type="text/javascript">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>Document</title><style>.menus {width: 200px;height: 1000px;border: 1px solid red;}.menus .header {background-color: royalblue;padding: 5px 5px;border-bottom: 1px dotted gray;cursor: pointer;}.menus .content a {display: block;padding: 5px 5px;border-bottom: 1px dotted gray;}.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><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><a>青浦区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">上海1</div><div class="content hide"><a>静安区</a><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><a>青浦区</a></div></div></div><script src="static/js/jquery-3.6.1.min.js"></script><script type="text/javascript">function clickMe(self) {//1.让菜单展示出来$(self).next().removeClass("hide");//2.找父亲,父亲的所有兄弟,再去每个兄弟的子孙中寻找 class="content", 添加 hide 样式$(self).parent().siblings().find(".content").addClass("hide");}</script>
</body>
</html>
四、值操作
<div id="c1">内容</div>
<input type="text " id="c2"/>
- JQuery操作:
$("#c1").text() //获取文本内容
$("#c1").text("abc") //设置文本内容$("#c2").val() //获取用户输入的值
$("#c2").val("嘿嘿嘿") //设置值
- 实例：动态创建数据
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</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/js/jquery-3.6.1.min.js"></script><script>function getInfo() {//1.获取用户输入的用户名与密码var username = $("#txtUser").val();var email = $("#txtEmail").val();dataString = username + ":" + email//2.创建li标签, 在li内部写入内容var newLi = $("<li>").text(dataString);//3.把新创建的li标签添加到ul里面$("#view").append(newLi);}</script>
</body>
</html>
五、事件
- $(“相关标签”).click(function(){函数内容});
<body><ul><li>百度</li><li>谷歌</li><li>搜狗</li></ul><script src="static/js/jquery-3.6.1.min.js"></script><script>$("li").click(function(){// 点击li标签时,自动执行这和函数// $(this) 当前你点击的是哪个标签$(this).remove();//删除标签});</script>
</body>
- 实例：表格操作
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><table border="1"><thead><tr><th>ID</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="body"><tr><td>1</td><td>poker</td><td><input type="button" value="删除" class="delete" /></td></tr><tr><td>1</td><td>poker</td><td><input type="button" value="删除" class="delete" /></td></tr><tr><td>1</td><td>poker</td><td><input type="button" value="删除" class="delete" /></td></tr><tr><td>1</td><td>poker</td><td><input type="button" value="删除" class="delete" /></td></tr></tbody></table><script src="static/js/jquery-3.6.1.min.js"></script><script>$(function () {$(".delete").click(function () {$(this).parent().parent().remove();});})</script>
</body>
</html>
六、样式操作
- addClass
- removeClass
- hasClass
- 等等
十分多，可以在jQuery手册中寻找https://jquery.cuishifeng.cn/
![[OpenCV学习笔记]获取鼠标处图像的坐标和像素值](https://img-blog.csdnimg.cn/img_convert/538512804500b8edfd1edc71f301e12e.webp?x-oss-process=image/format,png)
![BUU [MRCTF2020]套娃](https://img-blog.csdnimg.cn/img_convert/683efe5ab1e0ef97a24003e26188d6ff.png)
