jQuery是一个使用最广泛的javascript的函数库，在页面中使用<script>标签引入js文件即可使用。
<script type="text/javascript" src="xxxx/min.js">
jQuery在线手册：https://www.runoob.com/manual/jquery
jquery用法思想：选择某个网页元素，然后对他进行操作。
一。jQuery选择器
$代表jquery
id选择器 $('#id属性值'）
class选择器 $('.class属性值'）
标签选择器 $('标签名'）
层级选择器 $('.box3 ul li'）
属性选择器 $('input[name="user"]'）
二。jQuery操作样式
$(function(){$('.box3').css({background:"pink"})})
2.1 修改元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<!--外部引入js文件-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
// class属性
$('.box3').css({background:"pink"});
// id属性
$('#box1').css({background:'cyan',fontSize:'40px'});
// 标签选择器，选择集可以直接设置样式
// prev() ： 选择该节点前面一个兄弟节点+链式调用
$('li').css({background:'red'}).prev().css({background:'green'});
// prevAll(): 选择该节点前面的所有兄弟节点
$("#li2").css({background:'red'}).prevAll().css({background:'black'});
// nex(): 选择该节点后面一个兄弟节点
// nextAll(): 选择该节点后面所有的兄弟节点
// siblings(): 选择该节点的所有兄弟节点
$("#li2").siblings().css({background:'black'});
// parent(): 父节点
$("li2").parent().css({background:'black'});
// children(): 子节点
$("#li2").children().css({background:'black'});
// 选择过滤：has()-->包含某个节点
$('div').has('input').css({background:'blue'});
// 选择过滤：not()-->排除某个节点
$('div').not('input').css({background:'yellow'});
// 索引定位：eq(下标)
$('li').eq(1).css({background:'yellow'}); // 找到li标签，并设置第2个li标签样式
})
</script>
</head>
<body>
<div id="box1">box1</div>
<div id="box2" onclick="tk()">box2</div>
<div id="box3" class="box3">
<input type="text">
<ul>
<li>标签1</li>
<li id="li2">标签2</li>
<li>标签3</li>
</ul>
</div>
<div id="box4">box4</div>
</body>
</html>
2.2 添加或移除class属性
// 添加class属性 $('#box3').addClass('hide')
// 移除class属性 $('#box3').removeClass('hide')
// 重复切换样式 $('#box3').toggleClass('hide')
三。绑定click事件
给元素绑定click事件，可以用如下方法：
$('#box3').click(function(){
// 内部的 this 指的原始对象自己
// 使用jQuery 对象用 $(this)
})
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="./css/index.css" type="text/css">
<link rel="stylesheet" href="./css/reset.css" type="text/css">
<style>
.body{
background:#fff;
}
</style>
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--使用jquery-->
$(function(){
// 选择节点时触发的js操作
// 功能：点击+号时能弹出悬浮框
$('#add').click(function(){
// 上面add节点触发后需要做的事情
$('.add_window').addClass('show');
});
// 功能：弹出悬浮框后，点击'取消'和'确认'按钮，隐藏悬浮框
$('#no').click(function(){
// 触发后将悬浮框再removeClass掉
$('add_window').removeClass('show');
})
$('#yes').click(function(){
// 触发后将悬浮框再removeClass掉
$('add_window').removeClass('show');
})
// 利用toggleClass()隐藏并展开左侧菜单栏
// 反复点击<h3>标签，能够反复打开与关闭其对应子菜单
$('h3').click(function(){
$(this).next().toggleClass('show');
})
})
</script>
</head>
<body class="body">
<!--顶部区域-->
<div class="top_menu" >
<div class="title">自动化测试平台</div>
<div class="menu_list">
<ul>
<a href="跳转的url"><li>首页</li></a>
<a href=""><li>接口列表</li></a>
<a href=""><li>用例列表</li></a>
<a href=""><li>套件列表</li></a>
<a href=""><li>测试报告</li></a>
</ul>
</div>
<a href=""><div class="user_logout">用户注销</div></a>
</div>
<!--左边区域-->
<div class="left_menu">
<div class="project_manage">项目管理</div>
<div class="left_menu_list">
<ul>
<li>
<h3>接口管理</h3>
<ul class="hide"> <!--默认先隐藏掉,点击再展开-->
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
<li>
<h3>用例管理</h3>
<ul class="hide"> <!--默认先隐藏掉,点击再展开-->
<li><a href="">添加用例</a></li>
<li><a href="">用例列表</a></li>
</ul>
</li>
<li>
<h3>测试计划</h3>
<ul class="hide"> <!--默认先隐藏掉,点击再展开-->
<li><a href="">添加计划</a></li>
<li><a href="">计划管理</a></li>
</ul>
</li>
<li>
<h3>报告管理</h3>
<ul class="hide"> <!--默认先隐藏掉,点击再展开-->
<li><a href="">添加报告</a></li>
<li><a href="">报告管理</a></li>
</ul>
</li>
<li>
<h3>套件管理</h3>
<ul class="hide"> <!--默认先隐藏掉,点击再展开-->
<li><a href="">添加套件</a></li>
<li><a href="">套件管理</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--右边内容区域-->
<div class="content">
<div class="project_info">
<div class="pro_info_top">项目A</div>
<p>接口数量：15</p>
<p>用例数量：90</p>
<div><a href=" ">删除</a></div>
</div>
<div class="project_info">
<div class="pro_info_top">项目B</div>
<p>接口数量：10</p>
<p>用例数量：98</p>
<div><a href=" ">删除</a></div>
</div>
<div class="project_info">
<div class="pro_info_top">项目C</div>
<p>接口数量：6</p>
<p>用例数量：66</p>
<div><a href=" ">删除</a></div>
</div>
<div class="project_info">
<div class="pro_info_top">项目D</div>
<p>接口数量：5</p>
<p>用例数量：30</p>
<div><a href=" ">删除</a></div>
</div>
<div class="project_info">
<div class="pro_info_top">项目E</div>
<p>接口数量：5</p>
<p>用例数量：54</p>
<div><a href=" ">删除</a></div>
</div>
<div class="project_info">
<div class="pro_info_top">项目F</div>
<p>接口数量：9</p>
<p>用例数量：90</p>
<div><a href=" ">删除</a></div>
</div>
<div class="project_info">
<div class="pro_info_top">项目G</div>
<p>接口数量：7</p>
<p>用例数量：65</p>
<div><a href=" ">删除</a></div>
</div>
<div class="project_info" id="add"> <!--增加自定义的add属性，通过jquery动态修改add属性-->
<img src="./images/加号图标.png" alt="">
</div>
<!-- 增加悬浮表单-->
<div class="add_window hide"> <!--增加自定义的hide属性，初始时时隐藏状态-->
<div class="add_project">新增项目</div>
<div>
<form action="">
<div class="alter_input">
<label for="pro_name">项 目 名 称：</label>
<input type="text" id="pro_name">
</div>
<div class="alter_input">
<label for="pro_addr">项 目 地 址：</label>
<input type="text" id="pro_addr">
</div>
<div class="alter_input">
<label for="tester">测 试 人 员：</label>
<input type="text" id="tester">
</div>
<div class="pro_desc">
<label for="pro_desc2">项 目 描 述：</label>
<br>
<textarea name="" id="pro_desc2" cols="60" rows="8"></textarea>
</div>
<div class="confirm">
<input type="submit" value="取消" id="no">
<input type="submit" value="确认" id="yes">
</div>
</form>
</div>
</div>
</div>
</body>
</html>效果：
