jQuery是在全世界都非常流行的javascript代码库，以一款快速、简洁的js框架。它的宗旨就是"write less,do more"；写的少，做的多。
例子
$(function() {//手风琴效果
$('#main li').hover(function(){
$(this).stop(true).animate({
'width':'400px'
}).siblings().stop(true).animate({
'width':'160px'
});
},function(){
$(this).stop(true).animate({
'width':'200px'
}).siblings().stop(true).animate({
'width':'200px'
});
})
});
这是用jQuery写的代码，仅仅十行不到，就可以写出一个简单的手风琴效果。这是用原生js无法做到，但不是说原生js就没用了，只是jQuery把我们常用的效果和一些重复的操作封装在一起。
jQuery选择器
-
css选择符
在jQuery中，它给我们提供了强大的DOM元素查找方式。
$('#main li')//这里我们用了ID选择器和后代选择器，找到了#mian的子元素li
当然，并不只有以上这种方式，它允许我们直接使用css的所有选择器来找到你所要的元素。
-
自定义选择符
jQuery独有的自定义选择符，进一步增强已经十分强大的css选择符。它的语法与css的伪类选择符非常相似。
- 例如，我们要找一堆li元素中的第二个元素，可以这样：
$('li:eq(1)')//在js中索引都是从0开始。
- 如果用css选择符的方式，就是这样：
$('li:nth-child(2)')//同样能选择到第二个li。因为使用的是css的方式，所以是从1开始。
- :even选择符
选择元素中的奇数元素，因为在js中是0开头，虽然翻译为偶数，但实际上选择的是奇数元素。```
- :odd选择符
同理，这个选择的是偶数元素
- :contain选择符
$('p:contain(abc)')//选中所有包含文本abc的元素，区分大小写。
- ####表单选择符
- :input选择符
选中所有的input元素
- :button选择符
选中按钮元素
- :checked选择符
选中被选取的元素
通过判断选中的元素个数，我们可以很方便的做全选效果。
#jQuery方法
- hasClass()
选中含有class类名的元素。
- addClass()
给选中的元素添加一个class样式。
- removeClass()
给选中的元素删除一个class样式。
- toggleClass()
切换class样式，没有就添加，有就移除。
- css()
一个参数时获取选中元素的css样式，两个时为设置样式。
<small>以上仅仅是一点点。</small>
#jQuery连缀
大部分jQuery方法都能返回jQuery对象，所以我们可以连续使用多个方式。
$(this).addClass('active').siblings().removeClass('active');
//在每个方法后再继续添加方法.
以下是完整的事例：
$(function(){
//1.楼梯什么时候显示，scroll--->scrollTop
$(window).on('scroll',function(){
var $scroll=$(this).scrollTop()
if($scroll>800){
$('#loutinav').show();
}else{
$('#loutinav').hide();
}
$('.louti').each(function(index){
var $loutitop=$('.louti').eq(index).offset().top-400;
//console.log(loutitop)
if($loutitop<$scroll){
$('#loutinav li').eq(index).addClass('active').siblings().removeClass('active');
//return false;
}
})
})
$('#loutinav li').not('.last').on('click',function(){
//除了类名为last的li添加点击事件。
$(this).addClass('active')
//给点击的li添加一个class，
.siblings()//其它所有的兄弟元素
.removeClass('active');//移除class；
var $loutitop=$('.louti').eq($(this).index()).offset().top;
$('body,html').stop(true).animate({
scrollTop:$loutitop
})
})
$('.last').on('click',function(){
$('body,html').stop(true).animate({
scrollTop:0
})
})
})
