jq案例思路分析

一、选项卡
1、先给需要的所有的按钮添加一个事件
2、获取当前按钮的index,使用var idx = $(this).index();
3、给当前的按钮添加一个class类，而其余的兄弟节点去除class类$(this).addClass('active').siblings().removeClass('active');
4、把与index对应的div显示出来$('#div2>div').eq(idx).show().siblings().hide();

二、简易日历
1、先给需要的所有的按钮添加一个事件$('#table>ul>li').mouseenter
2、获取当前按钮的index,使用var idx = $(this).index();
3、给当前的点击的添加css，使背景颜色为蓝色，其他的把css设置成白色$(this).css(‘backgroundColor’,’blue’).siblings().css(‘backgroundColor’,’white’);`
4、把之前用字符串连接的部分放到html()方法中

$('#div1').html('<h2>'+(idx+1)+'月</h2><p>'+oText[idx] +'</p>');

三、全选全不选反选
1、给不同的按钮添加事件$('button').eq(0).click，使用eq()方法和下标来实现

2、使用prop()方法来设置布尔值的属性
如果使用prop()函数操作表单元素的checked、selected、disabled等属性，如果该元素被选中(或禁用)，则返回true，否则(意即HTML中没有该属性)返回false。
prop(propertyName,[value])方法的使用：如果参数只有propertyName，则表示返回属性propertyName的值，如果两个参数，就是给propertyName设置值
3、对于全选$('#check1 input').prop('checked',true);
全不选$('#check1 input').prop('checked',false);
4、对于反选，其中有一个：checked
四、轮播
1、其中不用设置一个很长的ul，而是把所有的图片都固定到一个位置，最开始只有第一张是block，其余的都是none,然后使用jq让其淡入淡出
2、给右箭头添加点击事件，使用一个变量count来记录点击的次数，当count的值等于图片个数，即li的length时，让count=0；让每一个对应count的li淡入出来，其余的淡出。
3、对于左箭头，需要判断的是当count=-1的时候，让count变为里li.length-1;
五、固定导航栏
1、给window滚动事件$(window).scroll(function(){})
2、当滚动的高度大于导航栏上部的高度时，给导航栏设置一个固定定位。
3、与此同时，要给下面的部分设置一个margin-top,因为当导航栏设置固定定位时，会脱离文档流，如果不设置，在滚动的时候，下面的会突然少 一部分。
4、当回滚的时候，只需要在else中把固定定位移除，并且使margi-top变回原来的高度。
六、小火箭滚动案例
1、小火箭图片是固定定位，当滚动大于1000时显示，可以使用淡入淡出，其中在if判断值大于1000时，1000不用加px.因为scrollTop()返回的是一个值。
2、在滚动事件外面给小火箭注册事件，其中，不能用window设置scrollTop的值为0,因为在js中window没有scrollTop属性，window有的是pageYoffset属性，而且该属性是只读属性。但是在jq中window可以获得scrollTop,因为他有scrollTop()方法,$(window).scroll()是scroll事件。鉴于兼容性的问题，所以给html或者body添加scrollTop，并设置他的值。因为IE6\7\8获取scrollTop时使用的是document.documentElement.scrollTop谷歌使用的是document.body.scrollTop
七、音乐滚动条
长按时，会出现bug，因为对于keydown事件，如果一直按着会触发多次。
所以使用节流阀，即是定义一个变量,在keydown时进行判断，为true时执行keydown里面的代码，并且在里面把flag改为false，在弹起时，把flag再改为true。
八、五角星案例
1、 给li注册鼠标经过事件，让自己和前面所有的兄弟prevAll()都变成实心，并且使后面的所有兄弟nextAll()变为空心
2、给li注册点击事件，给被点击的li做一个标记，可以加一个class，因为可能点击多次，所以需要给自己加class的同时，使其他的兄弟移除class。
3、给ul注册移出事件，此时需要让所有的li都变成空心，再做一件事件，找到current，让current和current前面的变成实心就行。

$('.comment>li').on('mouseenter', function() {
//这里不能继续链式编程
                    $(this).text(wjx_s).prevAll().text(wjx_s);
                    $(this).nextAll().text(wjx_k);
                });

解释：如果鼠标放入的是第三个li，$(this).text(wjx_s)得到的是一个jq对象，其中之包含一个dom对象，即是第三个li，$(this).text(wjx_s).prevAll()此时得到的也是jq对象，但是包含两个dom对象，即是两个li，第一个对象是原本的第二个li和第二个对象是原本的第一个li，此时在继续执行nextAll(),首先第一个对象会得到后面3个li，然后第二个对象会得到后面四个，所以最终是得到后面的四个li，而我们只需要最后两个li，所以这里不能进行链式编程。