一、筛选器
$('元素') 选中所有 $('元素：first') 选中第一个 $('元素：last') 选中最后一个 $('元素：odd') 选中奇数
$('元素：even') 选中偶数 $('元素：lt(3)') 下标小于3的 $('元素：gt(3)') 下标大于3的 $('元素：eq(3)') 下标是3的
注意：eq可以单独提炼为方法 $（‘p’：eq(3)） 和 $（‘p’）.eq(3) 是一样的，提炼出来的好处是可以用变量
二、引号问题
在jquery中，$（this）、$（document）、$（window）不加引号，其余加引号
三、选择问题
jquery选择器选择的是所有符合条件的元素，而不是一个
四、元素动画
jquery中的animate会对同一元素的动画进行排队 jquery中的animate会对不同元素的动画同时执行
五、jquery中的事件
jquery中的事件没有on 原生的onmouseover变为mouseenter 原生的onmouseout变为mouseleave
box.onclick = function（）{......} 变为 $（‘box’）.click（function(){......}）
六、index（）方法的使用
返回这个元素在亲兄弟中的排名，无视选择器怎么选择
<div class="box">
<p>1</p>
<span>2</span>
<p class='three'>3</p>
<b>4</b>
<h1>5</h1>
</div>
<div class="box2">
<p>1</p>
<p>2</p>
</div>
<script src='../js/jquery-1.12.3.min.js'></script>
<script type="text/javascript">
console.log($('p:eq(2)').index()); //输出0
</script>
七、each（）方法表示遍历节点
写在function内部，$（this）表示正在遍历的元素
<div class="box">
<p>1</p>
<span>2</span>
<p>3</p>
<b>4</b>
<h1>5</h1>
<p>6</p>
</div>
<div class="box2">
<p>7</p>
<p>8</p>
</div>
<script src='../js/jquery-1.12.3.min.js'></script>
<script type="text/javascript">
$('p:odd').each(function(i){
$(this).css('background','red'); //3 7变红
})
</script>
八、size方法和length属性
返回jquery对象中元素的个数 $（‘元素’）.length $（‘元素’）.size()；
九、get()方法
与eq()方法基本一致 eq返回jquery对象 get方法返回原生js对象
$（‘p’）.eq(0).html（‘......’）；
$（‘p’）.get(0).innerHTML（‘......’）；
$（‘p’）[0].innerHTML（‘......’）；
十、动画相关方法
1、show（） 显示、hide（）隐藏、toggle（）切换
<button>show()</button>
<button>hide()</button>
<button>toggle()</button>
<button>show(1000)</button>
<button>hide(1000)</button>
<button>toggle(1000)</button>
<button>模拟show</button>
<div class="box" style='width:150px;height:300px;background:red;display:none'></div>
<script src = '../js/jquery-1.12.3.min.js'></script>
<script>
$('button').eq(0).click(function(){
$('.box').show();
})
$('button').eq(1).click(function(){
$('.box').hide();
})
$('button').eq(2).click(function(){
$('.box').toggle();
})
$('button').eq(3).click(function(){
$('.box').show(1000,function(){
console.log('show完毕')
});
})
$('button').eq(4).click(function(){
$('.box').hide(1000,function(){
console.log('hide完毕')
});
})
$('button').eq(5).click(function(){
$('.box').toggle(1000,function(){
console.log('toggle完毕')
});
})
$('button').eq(6).click(function(){
$('.box').css('display','block');
var w = $('.box').css('width');
var h = $('.box').css('height');
$('.box').css({
'width':0,
'height':0,
'opcity':0
});
$('.box').animate({'width':w,'height':h,'opcity':1},1000,function(){
console.log('模拟完毕')
})
})
</script>
2、slideDown（）下滑展开、slideUp（）上滑收回、slideToggle（）切换
<button>slidedown()</button>
<button>slideup()</button>
<button>slideToggle()</button>
<button>slidedown(1000)</button>
<button>slideup(1000)</button>
<button>slideToggle(1000)</button>
<button>模拟slidedown</button>
<div class="box" style='width:150px;height:300px;background:red;display:none'></div>
<script src = '../js/jquery-1.12.3.min.js'></script>
<script>
$('button').eq(0).click(function(){
$('.box').slideDown();
})
$('button').eq(1).click(function(){
$('.box').slideUp();
})
$('button').eq(2).click(function(){
$('.box').slideToggle();
})
$('button').eq(3).click(function(){
$('.box').slideDown(1000,function(){
console.log('slidedown完毕')
});
})
$('button').eq(4).click(function(){
$('.box').slideUp(1000,function(){
console.log('slideUp完毕')
});
})
$('button').eq(5).click(function(){
$('.box').slideToggle(1000,function(){
console.log('slideToggle完毕')
});
})
$('button').eq(6).click(function(){
$('.box').css('display','block');
var h = $('.box').css('height');
$('.box').css({
'height':0,
'opcity':0
});
$('.box').animate({'height':h,'opcity':1},1000,function(){
console.log('模拟完毕')
})
})
</script>
3、fadeIn（）淡入、fadeOut（）淡出、fadeTo（）淡到某个数值、fadeToggle（）切换
fadeTo的参数为（time，透明度，回调函数）
举例轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding:0;
}
.box{
height: 300px;
width:560px;
border:1px solid pink;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
}
.m_unit{
width:5000px;
height:300px;
position: absolute;
left:0;
top:0;
}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
list-style: none;
position: absolute;
left:0;
top:0;
display: none;
}
.m_unit ul li.current{
display: block;
}
.btn{
overflow: hidden;
}
.btn span{
width:55px;
height:55px;
position: absolute;
top:50%;
margin-top: -28px;
}
.btn .left{
background: url('image/btnL.png');
left:0;
}
.btn .right{
background: url('image/btnR.png');
right:0;
}
.circle ul{
position: absolute;
bottom:10px;
right:0;
}
.circle ul li{
float: left;
list-style: none;
width:20px;
height:20px;
border-radius: 50%;
background: orange;
margin-right: 10px;
}
.circle ul li.current{
background:red;
}
</style>
<body>
<div class="box" id="box">
<div class="m_unit" id='m_unit'>
<ul id='imgUl'>
<li class='current'><a href="javascript:;"></a><img src='image/0.jpg'></li>
<li><a href="javascript:;"></a><img src='image/1.jpg'></li>
<li><a href="javascript:;"></a><img src='image/2.jpg'></li>
<li><a href="javascript:;"></a><img src='image/3.jpg'></li>
<li><a href="javascript:;"></a><img src='image/4.jpg'></li>
</ul>
</div>
<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>
<div class='circle' id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src='../js/jquery-1.12.3.min.js'></script>
<script>
var $imgLis = $('#imgUl li');
var $circleLis = $('#circle ul li');
var timer = setInterval(function (){
rightHandler();
}, 1500);
$('#box').mouseenter(function(){
clearInterval(timer);
})
$('#box').mouseleave(function(){
timer = setInterval(function (){
rightHandler();
}, 2000);
})
var idx = 0;
$('#rightBtn').click(rightHandler);
function rightHandler(){
if($('#imgUl li').is(':animated')) return;
$imgLis.eq(idx).fadeOut(1000);
idx++;
if(idx == $imgLis.length){
idx = 0;
}
$imgLis.eq(idx).fadeIn(1000);
changeCircle();
}
$('#leftBtn').click(function(){
if($('#imgUl li').is(':animated')) return;
$imgLis.eq(idx).fadeOut(1000);
idx--;
if(idx < 0){
idx = $imgLis.length-1;
}
$imgLis.eq(idx).fadeIn(1000);
changeCircle();
})
$circleLis.each(function(i){
$(this).click(function(){
$imgLis.eq(idx).fadeOut(1000);
idx = i;
$imgLis.eq(idx).fadeIn(1000);
changeCircle();
})
})
function changeCircle(){
var n = idx;
$circleLis.eq(n).css('background','red').siblings().css('background','orange');
}
</script>
</body>
</html>
4、stop（）
取值为布尔值，第一个值表示是否清除后面的，第二个值表示是否瞬间完成当前的
stop可以用来防止动画的积累
5、finish（） 瞬间完成所有动画队列
6、delay（）延迟 可以使用连续打点 必须放在运动与句之前
$('元素').delay（延迟时间）.animate（{}，1000）
7、is（‘：animated’） is方法表示身份探测 返回true false