jQuery Div点亮加载/ Div淡入点击

// The div #fader will fade in on load

<style type="text/javascript" />
$(function(){
	$('#fader').hide();				
	$('#fader').fadeIn()
	});
});
</script>

// The div #fader will fade in when clicked

<style type="text/javascript" />			
$(function(){
	$('#fader').click(function(){
	$('#fader').fadeIn()
	});
});
</script>

// The div a#fader will fade in when clicked. use return false for anchor tags

<style type="text/javascript" />			
$(function(){
	$('a#fader').click(function(){
	$('#fader').fadeIn()
	return false;
	});
});
</script>

jQuery limitChars

$('#message').keyup(function(){
  limitChars('message', 160, 'charlimitinfo');
});


// The Function

function limitChars(textid, limit, infodiv)
{
	var text = $('#'+textid).val(); 
	var textlength = text.length;
	if(textlength > limit)
	{
		$('#' + infodiv).html('You cannot write more then '+limit+' characters!');
		$('#'+textid).val(text.substr(0,limit));
		return false;
	}
	else
	{
		$('#' + infodiv).html(''+ (limit - textlength) +'');
		return true;
	}
}

jQuery 小费时显示输入文字

$('input#ID').keyup(function(){
   $('div-where-the-text-will-show').text($(this).val());
});

jQuery 将“last”类添加到每个第3个图像

//Save the context in a var
	var $main = $("#mainContent");
	//If the container exists
	if($(".ngg-albumoverview").length){
		//Loop through each image, including the index of the object(i)
		$(".ngg-album", $main).each(function(i){
			//Since 0 based add one, for every 3rd object remainder will equal 0
			var remainder = (i + 1) % 3;
			//Add a class of last when the remainder is 0
			if(remainder === 0){
				$(this).addClass("last");
			}
		});
	}

jQuery 切换复选框的标签类

//check first status with jQuery
//not needed if class initially are set

jQuery("#file_aktiv").click(function() {
  if(jQuery(this).is(":checked") === true) 
    jQuery('label[for=file_aktiv]').addClass('file_active');
  else 
    jQuery('label[for=file_aktiv]').addClass('file_active');
});

//then
jQuery("#file_aktiv").click(function() {
  jQuery('label[for=file_aktiv]').switchClass('file_active','file_inactive');
});

//the switchClass function
(function($){var class1,class2,overrideClass=null;$.fn.switchClass=function(){if(arguments.length<2){alert("Illegal usage. switchClass requires at least 2 parameters, containing the class names to toggle.");return this;}
class1=arguments[0];class2=arguments[1];overrideClass=null;if(arguments.length==3)
overrideClass=arguments[2];return this.each(function(){$.fn.switchClass.process($(this));});};$.fn.switchClass.process=function(el)
{if(overrideClass!=null)
{if(overrideClass==class1&&el.hasClass(class2))
{el.removeClass(class2);el.addClass(class1);}
else if(overrideClass==class2&&el.hasClass(class1))
{el.removeClass(class1);el.addClass(class2);}}
else
{if(el.hasClass(class1))
{el.removeClass(class1);el.addClass(class2);}
else if(el.hasClass(class2))
{el.removeClass(class2);el.addClass(class1);}}};})(jQuery);


<!-- HTML -->
<input type="checkbox" checked="checked" value="1" id="file_aktiv" name="file_aktiv"/>
<label for="file_aktiv" class="fb_icon file_active">aktiv</label>
<input type="checkbox" checked="checked" value="1" id="file_public" name="file_public"/>
<label for="file_public" class="fb_icon file_public">öffentlich</label>

jQuery jQuery溢出时间轴效果

$('#timeline').mousedown(function(event){
    $(this).css({
		cursor: 'grabbing',
		cursor: '-moz-grabbing'
	}).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
    return false;
}).mouseup(function(event){
    $(this).css({
		cursor: 'grab',
		cursor: '-moz-grab'
	}).data('down', false);
}).mousemove(function(event){
    if ($(this).data('down') == true) {
        this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
		//this.scrollLeft = $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2; // twice as fast
    }
}).mousewheel(function(event, delta){
    this.scrollLeft -= (delta * 30);
	return false;
}).css({
		overflow: 'hidden',
		cursor: 'grab',
		cursor: '-moz-grab',
	});
});

$(window).mouseout(function(event){
if ($('#timeline').data('down')) {
    try {
        if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
            $('#timeline').data('down', false);
        }
    } 
    catch (e) {
    }
}

jQuery 具有特定属性的目标元素

$('a[target=_blank]').css('background', 'red');

jQuery 函数计时示例(包括jQuery)

$(function(){
	console.info("Start Test");
	var d = new Date();//Get our start time
	console.info(d.getSeconds() + " " + d.getMilliseconds());
	
	//Run our test
	var testBody = "";
	for (var i=0; i<1000; i++){
		testBody += "<div class='testable"+i+"'>";
	}
	$("body").append(testBody);
	for (var j=0; j<1000; j++){
		$(".testable"+j);
	}
	
	var d = new Date();//Get our end time
	console.info(d.getSeconds() + " " + d.getMilliseconds());
	console.info("End Test");
	/**
	 * Console will now log 2 times, the difference between 
	 * them is how long the test took to run
	 */
});

jQuery 在jQuery中识别和定位鼠标位置

$("#someDiv").click(function(e){
    var relativeX = e.pageX - this.offsetLeft;
    var relativeY = e.pageY - this.offsetTop;
});

jQuery jquery属性选择器

$('img[src]')

$('img[src=test.gif]') 

$('img[src^=test]') // starts with test

$('img[src$=gif]') // ends with "gif"

$('img[src*=test]') // contains

$('img[src^=test][src$=gif]') // starts wit "test" ends with "gif"