jQuery 简易写法小结

By on 8-01-2012 in 代码

量变引发质变

//language currency & menu slider
	$(".dlist,.menu li").each(function() {
		var p = $(this),b = $(this).find("div"),t;
		if(b){
			p.hover(function(){
				clearTimeout(t);
				t = setTimeout(function(){
					p.addClass("current");
					b.slideDown(127)
				},172)
			},function(){
				clearTimeout(t);
				t = setTimeout(function(){
					p.removeClass("current");
					b.slideUp(0)
				},127)
			})
		}
	});
//hover
	$(document).ready(function (){
    $('#invitationtab li').mouseover(
  function(){
  $(this).addClass('current').siblings().removeClass('current');
       $('.invitationcon').hide().eq($(this).index()).show();
       }
     );
});
//ajax
		jQuery("#p_tab span").click(function(){
			jQuery(this).addClass('status');
			jQuery(this).siblings(".status").removeClass('status');
			switch(jQuery(this).children().attr("title").toLowerCase()){
				case "information":
					jQuery("#tab_product_detail").css("display", "block");
					jQuery("#tab_size_detail,#tab_measure_detail,#tab_color_detail,#tab_shipping_detail").css("display", "none");
					break;
				case "size":
					jQuery("#tab_product_detail,#tab_measure_detail,#tab_color_detail,#tab_shipping_detail").css("display", "none");
					jQuery("#tab_size_detail").css("display", "block");
/*					jQuery("#tab_size_detail").load("/html/"+jQuery("#product_type").val().replace(/( )/g,'_')+"/size.html?a="+Math.random());
*/					break;
			}
		});
//animate
	jQuery('.view_color_img').each(function(n){
		jQuery(this).css({opacity:1,'background-color':'#fff'})
		jQuery(this).hover(function(){
		jQuery(this).css({opacity:0}).animate({opacity:1},600);
		})
	});
	//category products image flash
	jQuery(".category-products ul li").each(function() {
		var p = jQuery(this), b = jQuery(this).find("img"), t;
		if(b) {
			p.hover(function() {
				clearTimeout(t);
				t = setTimeout(function() {
					b.css({
						opacity : 0.6
					}).animate({
						opacity : 1
					}, 600);
				}, 150)
			}, function() {
				clearTimeout(t);
				t = setTimeout(function() {
					b.css({
						opacity : 1
					});
				}, 150)
			})
		};
	});
	//text animate
	$(".footer-links ul li a").hover(function() {
		$(this).stop().animate({
			left : "10px"
		}, 200);
		$(this).next().stop().animate({
			right : "10px",
			opacity : '1'
		}, 200);
	}, function() {
		$(this).stop().animate({
			left : "0px"
		}, 200);
		$(this).next().stop().animate({
			right : "0px",
			opacity : '0'
		}, 200);
	});
//live
$('.product-thumb-list').live('click', function() {
	if(!jQuery(this).hasClass("status")){
		jQuery(this).addClass('status');
		jQuery(this).siblings(".status").removeClass('status');
 		jQuery("#product-big-img").attr("src", jQuery(this).attr("alt"));
	}
});
//判断一个元素是否存在
if ($("#div img").length > 0){
    // 找到对应id=div并且包含img的元素,然后执行此块代码
}
//checkbox
jQuery(function ($){
	$("#options_2555_2").click(function() {
		var t = $(this)[0].checked;
		$("#select_1444").attr("disabled",t);
		t ? $("#custom_side").show() : $("#custom_side").hide();
	})
});

jQuery 杂项

noConflict

如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 “jQuery”:

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行!");
  });
});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行!");
  });
});

5 Comments

Loading ....
  1. 1

    $('#whyNeedThis').mouseover(function(){
    $('#whyNeedThisCon').show(300);
    }).mouseout(function(){
    $('#whyNeedThisCon').hide(300);
    });

  2. 2

    Could you write about Phsycis so I can pass Science class?

  3. 3

    @Ana Sorry,I’m not good at physics…

  4. 4

    I simply want to tell you that I’m very new to blogging and site-building and definitely savored your page. More than likely I’m planning to bookmark your blog . You surely come with fantastic articles. Regards for sharing with us your webpage.

亲~ 想说点儿什么不?