JQuery的是什么？
它是JavaScript的第三方库。是比较主流的网页动态效果实现工具；相比原生JavaScript，JQuery的语法更加简洁，更容易学习。这是jQuery的学习笔记，所以我不会告诉你Vue.js正在超越jQuery。
1.0 快速的上手，下载，应用。
为了方便学习，降低门槛，我这里就直接引用一个CDN地址来引入JQuery库。
<script src="/ajax/libs/jquery/3.6.3/jquery.js"></script>
1.1 JQuery的简单应用1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><h1 id="txt"> 预留，初始文本 </h1><input type="button" value="Jquery启动" onclick="JqueryText()" ><script src="/ajax/libs/jquery/3.6.3/jquery.min.js"></script><!--用CDN引入jquery代码库--><script type="text/javascript">function JqueryText(){$("#txt").text("我是Jquery，这是一个HTML的H1大标题")// 用 JQuery的 $("#txt") 方法定位HTML标签。 用 text 方法修改标签中的文本信息}</script></html>
相同效果用原生JavaScript实现的代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><h1 id="txt"> 预留，初始文本 </h1><input type="button" value="javascript启动" onclick="changeH1()" ><script type="text/javascript">function changeH1(){var tag = document.getElementById("txt"); // 1. 定位需要处理的HTML标签tag.innerText="我原生javascript，我修改了HTML的H1大标题" //2. 修改标题。}</script></html>
以上两条代码主要是想表达Jquery更简洁。
1.2 JQuery示例1
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title</title><script src="/ajax/libs/jquery/3.6.3/jquery.min.js"></script></head><body><h1>试试点击我吧。</h1><h2>点我给你表演个魔术。</h2><h3>我和他们的技能是相同的。</h3><script>// 1. 等待页面加载完成$(document).ready(function () {//2. 同时选择h1, h2, h3 三个标签，并为其创建点击事件$("h1,h2,h3").click(function () {//3. 隐藏被点击的标签$(this).hide();});});</script></body></html>
1.3 JQuery示例2
当用户点击一个按钮时，用jQuery将文本设置为“Hello World”：
// 1. 当html中的button标签被点击后$("button").click(function() {// 2. 将html中的P标签中的内容，改成"Hello World"$("p").text("Hello World");});//执行此示例代码要先创建一个button标签和P标签。
1.4 JQuery示例3
用jQuery向文本输入框添加实时输入事件监听器：
// 1. 监听用户在input标签中输入的内容，实时获取输入框中的内容。$("input").on("input", function() {var value = $(this).val();// 2.并实时在P标签中显示$("p").text(value);});//执行此示例代码要先创建一个input标签和P标签。
1.5 JQuery示例4
用jQuery向文本输入框添加失去焦点事件监听器：
// 通常会把jQuery函数包裹在$(document).ready(function() {......});内// 其作用是让被包裹的代码可以尽快加载。而不需要等待整个HTML加载完成的最后才加载！$(document).ready(function() {// 失去焦点事件$("input").blur(function() {alert("输入框失去焦点");});});
1.6 JQuery示例5
使用jQuery在HTML元素上添加或删除（已有就删除，没有就添加）类：
$(document).ready(function() {// 1. 当html中的button标签被点击后$("button").click(function() {//2. toggle = 切换，Class=类。 添加或移除，所有P标签中nav的类名$("p").toggleClass("nav");});});
toggleClass()方法，可以在元素上添加或者移除一个或多个类。多个类名之间用空格分隔。
示例：$("p").toggleClass("nav1 nav2");
1.7 JQuery示例6
使用jQuery将元素淡入或淡出（如果标签可见则隐藏，不可见则显示）：
$(document).ready(function() {// 1. 当html中的button标签被点击后$("button").click(function() {// 2. 隐藏（淡出）或显示（淡入）P标签。$("p").fadeToggle();});});
1.8 JQuery示例7
使用jQuery在元素中添加新的HTML内容：
$(document).ready(function() {// 1. 当html中的button标签被点击后$("button").click(function() {// 2. 在P标签内插入一条新的HTML$("p").append("<strong>Hello World!</strong>");});});
2.0 JQuery的核心学习内容1：定位标签
<h1>一人之下<h1><p id="p1"> 冯宝宝 </p><p> 不摇碧莲 </p><div class="d3"> 王大师 </p>
//JQuery定位标签语法$("#p1") //ID定位： <p id="p1"> 冯宝宝 </p>$("p") //标签定位： <p> 不摇碧莲 </p>$(".d3") //calss定位： <div class="d3"> 王大师 </p>$("#p1,p,.d3") //用逗号, 分隔，同时选择多个标签
层级选择
<h1>冯宝宝</h1><h1 class="c1"><div class="d1"><span>不摇碧莲</span><a href=#>天师府</a></div></h1>
//JQuery定位标签语法$(".c1 .d1 a") //逐层定位： <a href=#>天师府</a>
属性选择器
<input type="text" name="t1" /><input type="text" name="t2" /><input type="text" name="t3" />
//JQuery定位标签语法$("input[name='t1']") //属性选择器，根据标签名称和属性定位
间接定位
寻找指定标签附近的标签。例如查找兄弟，查找父母。<div id="d1">一人之下<ul><li>气体源流</li><li id="l2">拘灵遣将</li><li>风后奇门</li><li class="l3">神机百炼</li><li class="l3">六库仙贼</li></ul></div>
//JQuery定位标签语法$("#l2").prev() //定位上一个标签：<li>气体源流</li>$("#l2").next() //定位下一个标签： <li>风后奇门</li>$("#l2").next().next() //定位下下一个标签： <li>神机百炼</li>$("#l2").siblings() //定位除#l2自身以外其他所有的<li>...</li>标签$("#l2").parent() //定位父级标签：<ul>....</ul>$("#l2").parent().parent() //定位父亲的父亲的标签<div>一人之下...</div>$("#d1").children() //定位子标签：<ul>....</ul>$("#d1").children().children(".l3") //定位子标签的子标签中的：<li class="l3">神机百炼</li> <li class="l3">六库仙贼</li>$("#d1 ul").children(".l3") //和上一条效果相同，定位子标签的子标签中的：<li class="l3">神机百炼</li> <li class="l3">六库仙贼</li>$("#d1").find(".l3") //和上一条效果相同，在指定范围内查找标签：<li class="l3">神机百炼</li> <li class="l3">六库仙贼</li>
3.0 点击展开菜单演示
点击展开下拉菜单，再次点击隐藏下拉菜单。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="/ajax/libs/jquery/3.6.3/jquery.min.js"></script><style>.menus{width: 150px; /*高度*/}.item .header{background: #e38d13; /*背景色*/padding: 10px 5px; /* 上下10px，左右5px 外边距*/cursor: pointer; /* 焦点时改变指针形状 */}.item .header:hover{background: greenyellow;}.item .content{padding: 5px 5px; /*外边距*/}.item .content div{border:1px dotted darkred; /*边框线 虚线 灰色*/}.hide{display: none; /* 隐藏 */}</style></head><body><div class="menus"><div class="item"><div class="header" onclick="clickME(this)">八奇技</div><div class="content hide"><div>气体源流</div><div>拘灵遣将</div><div>风后奇门</div><div>神机百炼</div><div>六库仙贼</div><div>大罗洞观</div><div>双全手</div><div>通天禄</div></div></div><div class="item"><div class="header" onclick="clickME(this)">猪脚们</div><div class="content hide"><div>冯宝宝</div><div>张楚岚</div><div>王也</div><div>徐三</div><div>徐四</div><div>马仙洪</div><div>诸葛青</div><div>陆玲荣</div></div></div></div><script></script></body><script>function clickME(self){var hasHide = $(self).next().hasClass("hide") //hasClass 方法判断对应的class 是否存在if(hasHide){$(self).next().removeClass("hide") //如果hide存在就删除hide}else{$(self).next().addClass("hide") //如果hide不存在就添加hide}}// function clickME(self){//$(self).next().slideToggle()// }</script></html>
3.1 点击展开菜单升级版
让每次显示的菜单只有1个，打开新菜单时，自动关闭其他菜单。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="/ajax/libs/jquery/3.6.3/jquery.min.js"></script><style>.menus {width: 150px; /*高度*/}.item .header {background: #e38d13; /*背景色*/padding: 10px 5px; /* 上下10px，左右5px 外边距*/cursor: pointer; /* 焦点时改变指针形状 */}.item .header:hover {background: greenyellow;}.item .content {padding: 5px 5px; /*外边距*/}.item .content div {border: 1px dotted darkred; /*边框线 虚线 灰色*/}.hide {display: none; /* 隐藏 */}</style></head><body><div class="menus"><div class="item"><div class="header" onclick="clickME(this)">八奇技</div><div class="content hide"><div>气体源流</div><div>拘灵遣将</div><div>风后奇门</div><div>神机百炼</div><div>六库仙贼</div><div>大罗洞观</div><div>双全手</div><div>通天禄</div></div></div><div class="item"><div class="header" onclick="clickME(this)">猪脚们</div><div class="content hide"><div>冯宝宝</div><div>张楚岚</div><div>王也</div><div>徐三</div><div>徐四</div><div>马仙洪</div><div>诸葛青</div><div>陆玲荣</div></div></div><div class="item"><div class="header" onclick="clickME(this)">八奇技22</div><div class="content hide"><div>气体源流</div><div>拘灵遣将</div><div>风后奇门</div><div>神机百炼</div><div>六库仙贼</div><div>大罗洞观</div><div>双全手</div><div>通天禄</div></div></div><div class="item"><div class="header" onclick="clickME(this)">猪脚们22</div><div class="content hide"><div>冯宝宝</div><div>张楚岚</div><div>王也</div><div>徐三</div><div>徐四</div><div>马仙洪</div><div>诸葛青</div><div>陆玲荣</div></div></div></div><script></script></body><script>function clickME(self) {var hasHide = $(self).next().hasClass("hide") //hasClass 方法判断对应的class 是否存在$(self).next().removeClass("hide") //如果hide存在就删除hide//找到点击标签的所有父标签的其他兄弟标签下的所有 .content标签 为其添加 .hide 属性//效果：点开新的菜单时，关闭已有的菜单。即：只显示一个下拉菜单$(self).parent().siblings().find(".content").addClass("hide")}</script></html></script></html>
3.2 JQuery 样式操作
addclass("xxx")为标签添加class="xxx"属性removeclass(" ")移除class="xxx"属性hasclass(" ")检查标签是否包含class="xxx"的属性remove()删除标签4.0 JQuery 值操作
$("#d1").text()获取标签内的文本内容$("#d1").text(”xxx“)设置标签内的文本内容为xxx$("input").val()获取input标签中用户输入的内容$("input").val(”xxx“)设置input标签中的内容4.1 获取用户输入的账号密码示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="/ajax/libs/jquery/3.6.3/jquery.min.js"></script></head><body><div><input type="text" id="account" placehoder="账号"/><input type="password" id="password" placehoder="密码"/><input type="button" value="提交" onclick="info(this)"/></div><h2> </h2><script>function info(self) {//1. 获得用户输入的账号密码var account= $("#account").val() // 获取账号输入框中的内容var password= $("#password").val() // 获取密码输入框中的内容$("h2").text("账号："+ account +" 密码：" + password)}</script></body></html>
![jquery 样式获取设置值_[JQuery] jQuery选择器ID CLASS 标签获取对象值 属性 设置css样式...](https://700zi.400zi.cn/uploadfile/img/14/874/cc94b9bfa8df17c22d1f6c5c3b40d557.jpg)
