jquery入门

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把我们常用的效果和一些重复的操作封装在一起。

手风琴.gif

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选择符

选中被选取的元素

通过判断选中的元素个数，我们可以很方便的做全选效果。

![全选.gif](http://upload-images.jianshu.io/upload_images/912092-0d711c85ec213132.gif?imageMogr2/auto-orient/strip)

#jQuery方法
- hasClass()

选中含有class类名的元素。

- addClass()

给选中的元素添加一个class样式。

- removeClass()

给选中的元素删除一个class样式。

- toggleClass()

切换class样式，没有就添加，有就移除。

- css()

一个参数时获取选中元素的css样式，两个时为设置样式。

以上仅仅是一点点。

#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
})
})
})

![楼层效果.gif](http://upload-images.jianshu.io/upload_images/912092-992b35c084d33010.gif?imageMogr2/auto-orient/strip)