一、寫在前面
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>