前端神器之jquery
jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery的口号和愿望 Write Less, Do More（写得少，做得多）
1、http://jquery.com/ 官方网站 2、https://code.jquery.com/ 版本下载
jquery的特点：
1.jQuery 是一个 JavaScript 库。
2.jQuery 极大地简化了 JavaScript 编程。
3.jQuery 很容易学习。
查找元素
1.选择器
基本选择器
$("div").css("color","red")
$("*").css("color","red")
$("#p1").css("color","red")
$(".outer").css("color","red")
$(".inner,p,div").css("color","red")
层级选择器
$(".outer p").css("color","red")
$(".outer>p").css("color","red")
$(".outer+p").css("color","red")
$(".outer~p").css("color","red")
基本筛选器
$("li:first").css("color","red")
$("li:eq(0)").css("color","red") //序号
$("li:gt(2)").css("color","red") //大于
$("li:even").css("color","red") //偶数
$("li:lt(2)").css("color","red") //小于
属性选择器
$("[alex='sb'][id='p1']").css("color","red")
表单选择器
$("[type='text']").css("width","200px")
$(":text").css("width","400px")
2.筛选器
筛选器
$("li").eq(2).css("color","red");
$("li").first().css("color","red");
$("li").last().css("color","red");
查找筛选器
$(".outer").children("p").css("color","red");
$(".outer").find("p").css("color","red");
$("li").eq(2).next().css("color","red");
$("li").eq(2).nextAll().css("color","red");
$("li").eq(2).nextUntil("#end").css("color","red");
$("li").eq(4).prev().css("color","red");
$("li").eq(4).prevAll().css("color","red");
$("li").eq(4).prevUntil("li:eq(0)").css("color","red");
console.log($(".outer .inner p").parent().html())
$(".outer .inner p").parents().css("color","red");
$(".outer .inner p").parentsUntil("body").css("color","red");
实例：模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1800px;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.5;
}
.model{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="show(this)">show</button>kjdksnakdnaskldsdkldladksladdkaldadkal
</div>
<div class="shade hide"></div>
<div class="model hide">
<button onclick="cancel(this)">cancel</button>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
function show(self) {
$(self).parent().siblings().removeClass('hide');
}
function cancel(self) {
// $(self).parent().addClass('hide');
// $(self).parent().prev().addClass('hide');
// $(self).parent().parent().children('.model,.shade').addClass('hide');
$(self).parent().prev().addClass('hide').next().addClass('hide');
}
</script>
</body>
</html>
实例：层次菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.1.js"></script>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
float: left;
background-color: #a47e3c;
width: 30%;
height: 500px;
}
.content div{
float: left;
height: 500px;
background-color: #0077cc;
width: 70%;
display: none;
}
.item .title{
background-color: #4cae4c;
line-height: 40px;
}
.hide{
display: none;
}
.content .active{
display: block;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con current">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con next hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con next1 hide">
<div>333</div>
<div>333