一、写在前面
JQuery世界上使用最广泛的一个库，它是一个轻量级的库，文件大小只有几十k，但是功能却相当强大。并且它可以兼容CSS的多个版本和各种浏览器，这也是它用途极为广泛的原因。接下来几篇将要介绍jQuery的相关用法。
二、jQuery的引入
1、jQuery的下载
它在很多网站都可以下载到，这里推荐一个jquery下载所有版本（实时更新）。
下载完了后是一个压缩包，解压之后是一个js文件，我们把它复制到我们的项目文件夹里就可以使用了。
2、jQuery的引入
然后在html文档里，用<script>标签引入jQuery的文件链接：
<script src="jquery-3.4.1.js"></script>
3、jQuery的使用（$的用法）
例如：
$("#test").html()
这个$符号就是使用jQuery的标志，它是一个基本原则器，因此每次使用前都需要加上它，上述代码的意思是：
获取ID为test的元素内的html代码。其中html()是jQuery里的方法
4、jQuery的基础语法
$(selector).action()
selecto就是选择器方面，action就是我们需要的操作方面（各种方法）
二、各种查找选择器
1、基本选择器（$符号）
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2、层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3、基本选择器（：索引）
$("li:first") $("li:eq(4)") $("li:even") $("li:gt(2)")
4、属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
5、表单选择器
$("[type='text']").css("width","200px"); //直接设置属性
$(":text").css("width","500px"); //用简单方式
6、练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery引入</title>
</head>
<body>
<div class="div1">DIV标签一号</div>
<div class="divv">DIV标签二号
<p class="ppp" name="Zahuw" id="p1">P标签一号</p>
<a href="">A标签</a>
<div class="divv">DIV标签三号
<div class="divv">DIV标签四号</div>
<p name="Luffy" id="p2">P标签二号</p>
<p name="Luffy" id="p3">P标签二号</p>
</div>
</div>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.4.1.js"></script>
<script>
//层级选择器：只让div1和四号div变红
// $(".div1, div .divv .divv").css("color","red"); //后半部分表示div标签中的class为divv里的divv
//子代选择器：只让DIV四号变红
// $(".divv>.divv>.divv").css("color","red");
//基本筛选器：让列表的第三个元素变红（通过索引筛选）
//$("li:eq(2)").css("color","red"); //让列表的第三个元素变红
// $("li:even").css("color","red"); //让所有奇数行变红
// $("li:odd").css("color","red"); //让所有偶数行变红
// $("li:gt(2)").css("color","red"); //从第三个位置之后开始变红
// $("li:lt(2)").css("color","red"); //从第三个位置之前开始变红
//基本筛选器简洁写法
// $("li:eq(2)").css("color","red"); //让列表的第三个元素变红
// $("li").eq(4).css("color","red"); //让列表的第五个元素变红 //这种写法更灵活
// $("li").first().css("color","red"); //第一个变红
// $("li").last().css("color","red"); //最后一个变红
//属性选择器：通过自定义的属性来查找
$("[name='Zahuw']").css("color","red");
//双重属性选择
$("[name='Luffy'][id='p2']").css("color","red");
//表单选择器
$("[type='text']").css("width","200px"); //直接设置属性
$(":text").css("width","500px"); //用简单方式
</script>
</body>
</html>
四、实例之左侧菜单栏
1、测试效果
2、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单栏</title>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
height: 500px;
width: 30%;
background-color: beige;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: yellow;}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">饮料</div>
<div class="con hide">
<div>可乐</div>
<div>红茶</div>
<div>酸奶</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">主食</div>
<div class="con hide">
<div>套饭</div>
<div>披萨</div>
<div>汉堡</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">配菜</div>
<div class="con hide">
<div>鸡腿</div>
<div>鸡排</div>
<div>鸡米花</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function show(self){
$(self).next().removeClass("hide"); //移除hide这个class名，则显示出来
$(self).parent().siblings().children(".con").addClass("hide");
//从选中的标签self中找它的上一级，在它的上一级全部下一级内容中找非self标签（即另外两个标题），
//然后在这些非self标签内找“.con”的标签（即下拉选项），最后给这些下拉选项添加一个hide隐藏效果
}
</script>
</body>
</html>