一。jquery简介
jquery是基于javascript类库的框架， 它里面提供了许多javascript类库，和一些css样式表的封装， 使用起来比较方便， 简化了用户与浏览器的交互， 提高了系统的性能和开发效率。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
二。jquery 中标签获取
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- jquery下载地址：http://code.jquery.com/ 在线使用手册：https://www.runoob.com/manual/jquery/-->
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery_test01.js"></script>
</head>
<body>
<div class="box" id="box1">box1
<span>00000</span>
</div>
<div class="box2" id="box2">box2</div>
<a href="http://www.baidu.com">百度</a>
<div class="box3">box3
<ul>
<li>1000000</li>
<li>2000000</li>
<li>3000000</li>
<li name="python">111</li>
<li name="java">222</li>
<li name="c++">333</li>
<li name="log">444</li>
<li name="js">555</li>
<div class="aaa">
<a href="http://www.baidu.com">百度</a>
</div>
</ul>
</div>
</body>
</html>
使用js文档操作jquery：
js文档内容：
//添加"$(function(){})"这个函数中的js代码会等到页面加载完毕之后才会去执行
$(function () {
//jquery 通过id去选择元素
// var box1 = $("#box1");
//获取节点的文本内容
//console.log(box1.text());
//通过属性过滤
// var lis = $(".box3 li[name=python]");
// console.log(lis.text())
//选择父节点、子节点、兄弟节点
//目前标签位置
// var lis = $(".box3 li[name=python]");
//获取该目前标签节点的父节点标签
// console.log(lis.parent())
//获取目前标签节点的子节点标签
// console.log($(".box3").children())
//获取兄弟节点标签
// console.log($(".box3 li[name=python]").siblings());
//获取前一个兄弟节点
// console.log($(".box3 li[name=python]").prev());
//获取他前面所有的兄弟节点
// console.log($(".box3 li[name=python]").prevAll());
//获取他后面一个的兄弟节点
// console.log($(".box3 li[name=python]").next());
//获取他后面所有的兄弟节点
// console.log($(".box3 li[name=python]").nextAll());
//从选择的标签中再选择；与find联用 查找box3下div标签下的a标签的内容
// console.log($(".box3").find($("a")).text());
//选择，过滤选择；查找包含a标签的div
// var aaa = $("div").has("a");
// console.log(aaa)
//选择过滤；通过div标签查找类属性不为box的标签
// console.log($("div").not(".box"))
//选择过滤；通过div标签查找类属性为box的标签
// console.log($("div").filter(".box"))
//选择第4个div元素
// console.log($("div").eq(3).text());
});
三。jqery操控CSS
直接再html写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery操控css</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- js代码，调整了样式-->
<style type="text/css">
.box3{
height: 500px;
300px;
background: aqua;
}
.box4{
height: 500px;
300px;
background: rebeccapurple;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<br>
<div class="box2">box2</div>
<br>
<div class="box3 hide">box3</div>
<br>
<div class="box4">box4</div>
<input id="btn" type="button" value="点击">
<script type="text/javascript">
//修改box1的字体颜色为红色
$(".box1").css("color","red")
//修改box2的字体为28px,宽为100px,高为300px，背景颜色为 浅蓝色
$(".box2").css({
fontSize:"28px",
"100px",
height:"300px",
background:"cyan"
})
//设置box3的展示属性：在点击“点击”按钮时隐藏box3
$("#btn").click(function () {
//addClass新增一个类属性方法
// $(".box3").addClass("hide");
//移除类属性方法,
// $(".box3").removeClass("hide");
//两样式之间做切换:有这个样式就添加，没有这个样式就移除，相当于展示与隐藏密码的样式。
// $(".box3").toggleClass("hide")
//用于隐藏的函数
//快速隐藏
// $(".box4").hide()
//慢慢的消失
// $(".box4").fadeOut()
//慢慢从底部收回去
// $(".box4").slideUp()
//快速的反复隐藏及展示
// $(".box4").toggle()
//慢慢的(从上往下，从下往上)反复隐藏及展示
// $(".box4").slideToggle()
//慢慢的(慢慢的消失)反复隐藏及展示
// $(".box4").fadeToggle()
})
</script>
</body>
</html>
四。jqery,层级操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<style type="text/css">
/*鼠标移动至H3时增加背景颜色*/
.left_menu_list h3:hover{
background: darkorange;
}
.left_menu_list a:hover{
background: aqua;
}
</style>
</head>
<body>
<!--侧边菜单-->
<div class="left_title">
<div class="left_title">
菜单列表
</div>
<div class="left_menu_list">
<ul>
<li>
<h3>接口管理</h3>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
<li>
<h3>接口管理</h3>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
<li>
<h3>接口管理</h3>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
<li>
<h6>接口管理</h6>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
<li>
<h7>接口管理</h7>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--写在html中-->
<script type="text/javascript">
h3s= $(".left_menu_list h3");
console.log(h3s)
//当点击外层菜单标签时，
h3s.click(function () {
//点击h3标签时，隐藏掉下一个兄弟节点
$(this).next().slideToggle();
//点中后设置颜色,没实现
$(this).css({
background:"6BB9FF"
})
})
</script>
</body>
</html>
五。jqery,输入框,提交、新增、删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<!--案例一-->
<form action="" method="post">
账号：<input type="text" name="user" id="user">
<br>
密码：<input type="password" name="pwd" id="pwd">
<input type="button" id="btn">
</form>
<!--案例二,添加新的HTML内容-->
<!--<form action="" method="post">-->
<!-- <input type="button" id="btn" value="添加输入框">-->
<!-- <input type="button" id="del" value="删除输入框">-->
<!-- <br>-->
<!-- <div class="box1">-->
<!-- <div>-->
<!-- 参数：<input type="text" name="user" id="user">-->
<!-- 值：<input type="text" name="pwd" id="pwd">-->
<!-- </div>-->
<!-- </div>-->
<!--</form>-->
<script>
// 案例一，提交账号密码，若以from表单方式直接提交会在入参中附带明文的账号密码，通过添加点击事件的方式获取进行加密提交可以更好的保护入参：
$("#btn").click(function () {
var user= $("#user").val()
var pwd= $("#pwd").val()
console.log(user,pwd)
})
// 案例二,新增，点击“添加输入框”添加一个输入框
// $("#btn").click(function () {
// var aStr = "<div> " +
// " 参数：<input type="text" name="user" id="user"> " +
// " 值：<input type="text" name="pwd" id="pwd"> " +
// " </div>";
// $(".box1").append(aStr)
//
// })
//
// //删除，若输入框为1的时候不删除
// $("#del").click(function () {
// var box1 = $(".box1").children()
// var box1len = $("div").has("input").length
// // console.log(box1len)
// if(box1len == 2){
//
// }else {
// box1.eq(-1).remove()
// }
// })
</script>
</body>
</html>