jQuery联动日历（二）

还是先来看下效果图

功能说明：

　　1.当前日期TD为蓝色,文字为白色

　　2.当前日期的,后十天TD为浅蓝色

　　3.排除以上两个功能的所有其它日期TD为灰色，文字为灰色

功能分析：

　　1.找到当前日期的TD改变其颜色就OK

　　2.这里要注间的就是，因为这一个月和下一个月，之间会有空白的TD，也就是没有日期数的TD，所以不能直接在当前日期，后加十天。而是要先把这些空白的TD，从所有日期TD中过滤出去，然后把有日期的TD，变成一个新的数组，在这个数组中，都是有日期的TD了。再可以对当前日期的后十天，改变颜色了

　　3.有了前两个，我们可以获取到改变颜色了TD的开始索引和结束索引，那么再通过这两个索引，就可以把其它的TD改变成灰色了。

//改变颜色
    function changeColor(){
        var cdate = new Date();
        //获得当前的日期
        var nowd = cdate.getDate();
        //当前日期的索引
        var nowIndex = 0;
        //改变当前日期的颜色；
        nowDate.find("td").each(function(index, element) {
            //如果是当前日期，就是这个TD的索引，存入变量
            if($(this).text() == nowd){
                  $(this).css({"color":"#fff","background-color":"#06C"})
            }
        });
        /*改变后十天的颜色
        *这里要注间的就是，因为这一个月和下一个月，之间会有空白的TD，也就是没有日期数的TD，所以不能直接在当前日期，后加十天。
        *而是要先把这些空白的TD，从所有日期TD中过滤出去，然后把有日期的TD，变成一个新的数组，在这个数组中，都是有日期的TD了。
        *再可以对当前日期的后十天，改变颜色了
        */
        nowDate.find("td").
        add(nextDate.find("td")).
        //第一次过滤，把所有空白，不含有日期的TD都过滤掉
        filter(function(index) {
            return $(this).text() != "";
        }).
        //获得当前日期的TD索引值并存到变量中.这个索引，是过滤了空白TD之后数组中的索引。
        each(function(index, element) {
              if($(this).css("color")=="rgb(255, 255, 255)"){
                    nowIndex = index;
            }
        }).
        //获得并改变后十天的TD的颜色
        slice(nowIndex+1,nowIndex+11).
        css({"background-color":"#D7DBF9"}).
        end()
        //获得并改变除开，当前和后十天之外的，所有TD的颜色
        .slice(0,nowIndex)
        .css({"background-color":"#f0f0f0","color":"#c3c3c3"}).
        end().
        slice(nowIndex+11).css({"background-color":"#f0f0f0","color":"#c3c3c3"});
    }

总结：在遇到这种不连续数据处理的时候，可以考虑过滤出不需要的数据，把有用的数据变成一个连续的整体，再对其做处理。生活当中处理事情，也是如是。

比如我们的硬盘清理的时候，好像也是把不连续的煸区，整理成连续的，可以加快读取速度!

DEMO下载