Jqueryの锋利的jquery练习

$(function(){

    $("div.SubCategoryBox li:gt(7):not(:last)").hide();
    $("div.SubCategoryBox ul li").filter(":contains('佳能'),:contains('索尼'),:contains('三星')").addClass("promoted");
    $("div.showmore span").click(function(){
        if($("div.SubCategoryBox li:gt(7):not(:last)").is(":visible")){
            $("div.SubCategoryBox li:gt(7):not(:last)").hide();
            $("div.showmore span").text("显示全部品牌");
        }else{
            $("div.SubCategoryBox li:gt(7):not(:last)").show();
            $("div.showmore span").text("精简显示");
        }
        return false;
    });

    var $li1 = $("<li title='香蕉'>香蕉</li>");
    var $li2 = $("<li title='雪梨'>雪梨</li>");

    $("div.three ul").append($li1);
    $("div.three ul").append($li2);

    $("div.four ul li img").mousedown(function(e){
        $(this).clone(true).appendTo($("div.clone ul li"));
    })

//    $("<strong>repalace with fruit</strong>").replaceAll("div.three p");

    $("div.three p").attr("title","fruit title-attr");

    $("a.tooltip").hover(function(){
        var x = 10;
        var y = 20;
        this.myTitle = this.title;
        this.title = "";
        var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
        $("body").append(tooltip);
        $("a.tooltip").mousemove(function(e){
            $("#tooltip").css({"top":(e.pageY + y)+"px","left":(e.pageX + x)+"px"}).show("fast");
        })
    },function(){
         this.title = this.myTitle;
        $("#tooltip").remove();
    })

    $("a.tooltipimg").hover(function(){
        var x = 10;
        var y = 20;
        this.myTitle = this.title;
        this.title = "";
        var tooltipimg = "<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'/></div>";
        $("body").append(tooltipimg);
        $("a.tooltipimg").mousemove(function(e){
            $("#tooltip").css({"top":(e.pageY + x)+"px","left":(e.pageX + y)+"px"}).show("fast");
        })
    },function(){
         this.title = this.myTitle;
        $("#tooltip").remove();
    })

    $(":inupt").focus(function(){
        $(this).addClass("focus");
    }).blur(function(){
        $(this).removeClass("focus");
    })

    $(".bigger").click(function(){
        alert($("#comment").width());
    })
})

$(function(){

    $(".bigger").click(function(){
        var $comment = $("#comment");
        if($comment.height() < 500){
            if(!$comment.is(":animated")){
                $comment.animate({height : "+=50"} , 500);
            }
        }
    })
    $(".smaller").click(function(){
        var $comment = $("#comment");
        if($comment.height() > 50){
            $comment.height($comment.height() - 50);
        }
    })
    var $comment = $('#comment');
    $('.up').click(function(){
       if(!$comment.is(":animated")){
           $comment.animate({ scrollTop  : "-=50" } , 400);
        }
    })
    $('.down').click(function(){
       if(!$comment.is(":animated")){
            $comment.animate({ scrollTop  : "+=50" } , 400);
        }
    });

    $("#CheckedAll").click(function(){
        if(this.checked){
            $("[name=items]:checkbox").attr("checked",true);
        }else{
            $("[name=items]:checkbox").attr("checked",false);
        }
    })
    $("#CheckedNo").click(function(){
        $("[name=items]:checkbox").attr("checked",false);
    })
    $("#CheckedRev").click(function(){
        $("[name=items]:checkbox").each(function(){
            this.checked = !this.checked;
        })
    })
    $("[name=items]:checkbox").click(function(){
        var flag = true;
        $("[name=items]:checkbox").each(function(){
            if(!this.checked){
                flag = false;
            }
        })
        $("#CheckedAll").attr("checked",flag);
    })

    $("#add").click(function(){
        $options = $("#select1 option:selected");
        $options.appendTo("#select2");
    })

    /**
     *
     */
   /* var page = 4;
    var i = 1;
    $("span.next").click(function(){
        var $parent = $(this).parents("div.v_show");
        var $v_show = $parent.find("div.v_content_list");
        var $v_content = $parent.find("div.v_content");
        var v_width = $v_content.width();
        var len = $v_show.find("li").lengh;
        var pageCnt = Math.ceil(len/i);

        if(!$v_show.is(":animated")){
            if(page == pageCnt){
                $v_show.animate({ left : '0px'}, "slow");
                page = 1;
            }else{
                $v_show.animate({ left : '-='+v_width }, "slow");
                page++;
            }
        }
        $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    })

     $("span.prev").click(function(){
        var $parent = $(this).parents("div.v_show");
        var $v_show = $parent.find("div.v_content_list");
        var $v_content = $parent.find("div.v_content");
        var v_width = $v_content.width();
        var len = $v_show.find("li").lengh;
        var pageCnt = Math.ceil(len/i);

        if(!$v_show.is(":animated")){
            alert("v_width: "+v_width+"  page: "+page);
            if(page == 1){
                $v_show.animate({ left : '-='+v_width*(page_count-1)+'0px'}, "slow");
                page = pageCnt;
            }else{
                $v_show.animate({ left : '+='+v_width }, "slow");
                page--;
            }
        }
        $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    })*/

    var page = 1;
    var i = 4; //每版放4个图片
    //向后 按钮
    $("span.next").click(function(){    //绑定click事件
         var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
         var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
         var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
         var v_width = $v_content.width() ;
         var len = $v_show.find("li").length;
         var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
         if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
              if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
                $v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
                page = 1;
                }else{
                $v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面
                page++;
             }
         }
         $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
   });
    //往前 按钮
    $("span.prev").click(function(){
         var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
         var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
         var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
         var v_width = $v_content.width();
         var len = $v_show.find("li").length;
         var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
         if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
              if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
                $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
                page = page_count;
            }else{
                $v_show.animate({ left : '+='+v_width }, "slow");
                page--;
            }
        }
        $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    });

})