源于此视频p23-24
#jquery
jquery、vue、react是javascript的类库。bootstrap动态效果，需jquery配合
基于jQuery，自己开发功能；
现有工具依赖jQuery，bootstrap动态效果，需jquery配合。
##快速上手
下载与放置地址
https://jquery.com/download/
static/js/…… #放置地址
应用jQuery：找到标签；替换内容
<body>
<h1 id="txt">上海</h1>
<script src="static/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//利用jQuery实现效果
//1.找到标签id，2替换内容
$("#txt").text("北京") //无jQuery，直接JavaScript编写为 document.getElementById('txt').innerText="北京"
</script>
</body>
##选择器(类似于CSS中的选择器)
ID选择器
<h1 id="txt">北京</h1>
$("#txt")
样式选择器
<h1 id="txt">北京</h1>
$(".txt")
标签选择器
<h1>北京</h1>
$("h1")
层级选择器
$(".c1 .c2 h1") <!--找到嵌套结构下的h1标签-->
多个选择器
$(".c1, .c2, .c2") <!--同时选择,以“，”隔开-->
属性选择器
<input type="button" name="submit" value="提交" />
$(input[name="submit"])
间接选择器
$(.c1).prev() <!--找到同层级的上一个-->
$(.c1).next() <!--找到同层级的下一个-->
$(.c1).next().next() <!--找到同层级的下下一个-->
$(.c1).siblings() <!--同层级下所有-->
$(.c1).parent() <!--上一级父辈-->
$(.c1).children() <!--下一级所有孩子-->
$(.c1).children(.d1) <!--下一级class="d1"的孩子-->
操作样式
addClass
removeClass
hasClass//用于判断语句
案例1： 侧边栏菜单
例1.1点击展开，再点关闭
<!--点击展开，再点关闭-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
height: 400px;
border: 1px solid red;
}
.menus .item{
}
.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> <!--this代表此行-->
<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/js/jquery-3.6.0.js"></script>
<script>
function clickMe(self){ //定义函数，self为定位形参
var hasHide = $(self).next().hasClass("hide") //找到同级下一行；hasClass返回值可供判断语句
if(hasHide){
$(self).next().removeClass("hide"); //去除hide
}else{
$(self).next().addClass("hide"); //增加hide
}
}
</script>
</body>
例1.2：第一个默认打开，点击其他即关闭
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
height: 400px;
border: 1px solid red;
}
.menus .item{
}
.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> <!--this代表此行-->
<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 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/js/jquery-3.6.0.js"></script>
<script>
function clickMe(self){ //定义函数，self为定位形参
//点击移除hide
$(self).next().removeClass("hide");
//找到获取所有父辈，找到父辈下的.content,添加hide。
$(self).parent().siblings().find(".content").addClass("hide");
}
</script>
</body>
值操作
<div id="c1">内容</div>
$("#c1").text() //获取文本内容
$("#c1").text("改变内容")
<input type="text" id="c2"/>
$("#c2").val() //获取输入值
案例2：用户名、密码输入
<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.0.js"></script>
<script>
function getInfo(){
//获取用户输入的用户名和密码
var username = $("#txtUser").val();
var email = $("#txtEmail").val();
var dataString = username + "-" +email;
//创建li标签，在li内部写入内容
var newLi = $("<li>").text(dataString);
//把新建的li标签加到ul里面
$("#view").append(newLi);
}
</script>
</body>
绑定事件
<!--1.javascript中绑定法-->
<input type="button" value="提交" onclick="getInfo()"/> <!--缺点：onclick需要重复写-->
<input type="button" value="我再提交" onclick="getInfo()"/>
<input type="button" value="我再再提交" onclick="getInfo()"/>
<script>
function getInfo(){
}
</script>
<!--2.jQuery中绑定法-->
<input type="button" value="提交"/> <!--无onclick-->
<input type="button" value="我再提交" />
<input type="button" value="我再再提交" />
<script>
$("input").click(function(){} //批量在input标签中添加鼠标点击事件，注意层级关系
)
</script>
案例：绑定事件，改写1.2
<!--head参考案例1.2-->
<body>
<div class="menus">
<div class="item">
<div class="header">上海</div> <!--删除标签内onclick，由jQuery中统一定义-->
<div class="content">
<a>嘉定区</a>
<a>闵行区</a>
<a>普陀区</a>
<a>静安区</a>
</div>
</div>
<div class="item">
<div class="header">北京</div>
<div class="content hide">
<a>朝阳区</a>
<a>崇武区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
<div class="item">
<div class="header">南京</div>
<div class="content hide">
<a>栖霞区</a>
<a>浦口区</a>
<a>高淳区</a>
<a>雨花台</a>
</div>
</div>
<div class="item">
<div class="header">武汉</div>
<div class="content hide">
<a>汉口区</a>
<a>武昌区</a>
<a>江岸区</a>
<a>青山区</a>
</div>
</div>
</div>
<script src="static/js/jquery-3.6.0.js"></script>
<script>
$(".header").click(function(){ //$(".header").click( )，找到header标签，统一定义click事件号
$(this).next().removeClass("hide"); //注意括号层级， $(this)代表作用于点击的本行
$(this).parent().siblings().find(".content").addClass("hide");
}
)
</script>
</body>
删除标签（刷新再次出现）
$().remove(); //找到，删除
//创立标签
$("<li>")
让js早一些出现的方法 ，而不放在head内
<script>
$(function(){
需操作的内容
}) //当页面框架加载完成后,自动、优先（有交互需求的如删除该行）执行事件
</script>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
