写在前面：学习任何一个库或者框架，不能盲目的学习，而是要首先了解这个库或者这个框架是干什么的，库和框架基于不同的目的提供给大家灵活使用，而不是以一概全，所有的项目都是用一样的东西。
很早就学习过一遍jQuery，但是对于我这样的小白来说，很多东西都未尽未透。而jQuery作为js最广泛流行的库，决定逞还在放暑假对jQuery进行一次复习和梳理。
1.jQuery的作用
首先对于jQuery来说，jQuery有如下的功能：
1.HTML元素的操作
2.CSS元素的操作
3.HTML的事件函数（譬如：对HTML元素的onclick事件）
4.Js的特效和动画
5.Ajax
6.Uitilities
2.jQuery的优势
知道了jQuery的使用场景，那么面对纷繁复杂的js前端库中，jQuery的优势又在哪里呢
1.jQuery提供了大量的扩展和插件
2.jQuery兼容几乎所有的浏览器
3.jQuery大大简化了js本身的语法，比如选取html对象的语句就缩减很短了
3.jQuery的基本语法
$(selector).action();
$:表示美元符号来定义jQuery，告诉你，从这里开始就是jQuery的语法了。
selector：选择器，用来选择HTML元素。这句话就是js的document.getElementById();这样的语句。
action：要执行的动作
4.文件就绪事件
$(document).ready(function(){
//jQuery代码
});
形如这样的形式就是文件就绪事件。它的作用是防止文档在加载完之前，就执行jQuery的代码。比如我们在写js的时候会用到window.onload，来使整个页面加载完在执行js的代码。
$(function(){
//jQuery代码
});
这是上面的简写版。
5.jQuery的选择器
jQuery的选择器是基于Css的选择器，也就是在selector的位置，你可以像使用CSS的选择器一样，方便的使用jQuery的选择器。
比如，以id作为选择：
$('#id').hide();
这里就是找到id为id的元素并将它隐藏（hide()）.
6.jQuery的事件
什么是事件呢，就是执行的动作，比如点击一个按钮，按下你的键盘都叫事件。
jQuery常见的事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery事件的语法：
$('#id').click(function(){
$('id').hide();
});
比如上面这段代码就是，当点击id为id的元素的时候，id就会隐藏。
7.jQuery的效果
jQuery支持的常见效果有：出现，隐藏，淡入，淡出，滑动，动画等。
1.出现和隐藏
基本语法：
hide(speed,callback); show(speed,callback);
两个可选参数分别是速度(可以是fast，slow或者具体的毫秒),callback（表示执行完hide或者show后要执行的函数）。
实 例：
$('p').click(function(){
$('p').hide();
});
使用toggle()方法简化操作：有时候我们设置按钮可以来回切换两种出现和隐藏状态，那么就可以使用toggle。
$('p').click(function(){
$('p').toggle();
});
2.淡入和淡出
淡入和淡出的基本语法形式和参数都和上面的一样，我们直接来看实例：
$('p').click(function(){
$('p').fadeIn(); //使用slow或者fast描述的时候需要加上""
});
同理fadeToggle是实现fadeIn和fadeOut的两种形式的切换。
$('p').click(function(){
$('p').fadeToggle();
});
此外还有一个多的fadeTo()方法，该方法的作用是将颜色变淡，如果你的元素需要设置颜色的话。
它的基本语法中多了一个opacity，值的范围在0-1之间，表示透明度。
$('p').click(function(){
$('p').fadeTo("fast"0.7);
});
PS:在这里，speed是必选，必须要设置时长。
3.滑动
jQuery的滑动同上面的一样，因为是总结这里就不再赘述了。
4.动画
首先来看动画的基本语法;
$(selector).animate({params},speed,callback);
其中必选的params是提供相对于本来元素，要改变的css样式。speed和callback与之前一样是可选选项。
实 例：
$(‘div’).animate({left:'300px'});
以上代码的含义是，div标签的HTMl元素的位置相对于原来的位置，变换300px。（PS：这里需要对position进行设置）。params的部分采用的是键值对的方式书写。
实 例-同一个对象同时执行多个动画（比如：同时改变宽高，透明度和位置），只需要用"，"隔开
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
'150px'
});
PS：jQuery的动画几乎可以操纵css的所有属性，但是在书写的时候，必须使用骆驼标记法。比如在css中的margin-left，在jQuery中就是marginLeft。
实 例：动画中的计算
$("div").animate({
left:'250px',
height:'+=150px',
'+=150px'
});
实 例：使用动画的队列功能。如果想要实现动画按顺序执行，那么jQuery还提供了队列的功能。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({'100px',opacity:'0.8'},"slow");
});
8.添加元素
使用append()和prepend()方法可以从后和前添加元素
$("p").append("Some appended text.");
使用append或者prepend可以追加多个元素
$(document).ready(function(){
var a = 1;
var b = 2;
var c = 3;
var d = 4;
$('p').append(a,b).prepend(c,d);
});
使用after或者before可以从前后添加多个元素
$(document).ready(function(){
$('img').before('hi').after('bye');
});
也可以追加多个元素
function afterText()
{
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
9.jQuery的遍历
1.向上遍历
1.parent()：返回被选元素的直接父元素
<style>
div{
100px;
height:100px;
border:1px solid lightgrey;
}
p{
50px;
height:50px;
border:1px solid lightgrey;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$('p').parent().css("border","1px solid red");
});
</script>
</head>
<body>
<div>
<p></p>
</div>
</body>
2.parents():遍历所有的父元素，包括根元素
<style>
.div1{
200px;
height:200px;
border:1px solid lightgrey;
}
.div2{
100px;
height:100px;
border:1px solid lightgrey;
}
p{
50px;
height:50px;
border:1px solid lightgrey;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$('p').parents().css("border","1px solid red");
});
</script>
</head>
<body>
<div class='div1'>
<div class='div2'>
<p></p>
</div>
</div>
</body>
可以在parents()中设置参数，该参数可以过滤想要的祖先元素。
<style>
.div1{
200px;
height:200px;
border:1px solid lightgrey;
}
.div2{
100px;
height:100px;
border:1px solid lightgrey;
}
p{
50px;
height:50px;
border:1px solid lightgrey;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$('p').parents('ul').css("border","1px solid red");
});
</script>
</head>
<body>
<div class='div1'>
<div class='div2'>
<ul>
<p></p>
</ul>
</div>
</div>
</body>
3.parentsUntil()这个方法是返回两者之间的父元素
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors"> body (曾曾祖父元素)
<div style="500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
</body>
2.向下遍历
children():返回的是直接子元素。
<style>
.div1,.div2,.p1{
border:1px solid lightgrey;
}
.div1{
100px;
height:100px;
margin: auto;
}
.div2{
50px;
height:50px;
margin:auto;
}
.p1{
25px;
height:25px;
margin:auto;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$('.div1').children().css("border-color","red");
});
</script>
</head>
<body>
<div class="div1">
<div class="div2">
<p class="p1">
</p>
</div>
</div>
</body>
PS：同样可以用过滤器进行设置。
2.find()：该方法可以返回所过滤的元素。如果过滤元素是"*"，则返回所有的子元素。
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="500px;">div (当前元素)
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
</div>
</body>
3.水平遍历
siblings():返回所有的同胞元素。可以使用选择器。
next():下一个同胞元素，只返回一个。
nextAll():所有跟随的同胞元素。
nextUtil():返回介于两者之间的同胞元素。
prev(),prevAll(),prevUtil()：用法和上边一样，但是是向前遍历同胞元素.
4.过滤器
first():返回第一个被选元素。last()则是返回最后一个。
<script>
$(document).ready(function(){
$("div").first().css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
这是第一个div
</div>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
eq():由于first和last只能返回开头和结束，那么eq就可以弥补这个问题，可以选择中间的某项。
<script>
$(document).ready(function(){
$("p").eq(2).css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>W3Cschool教程 (index 0).</p>
<p>http://www.w3cschool.cn (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
filter（）：该方法可以自定义过滤的方法，并且返回过滤器中的元素。not():方法与filter相反，返回不是某个（些）自定义标准的元素
<script>
$(document).ready(function(){
$("p").filter("p").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>W3Cschool教程 (index 0).</p>
<p class="url">http://www.w3cschool.cn (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>