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");
});

})