10 個很棒的 jQuery 代碼片段

圖檔預加載

01	( function ($) {

02	var cache = [];

03	// Arguments are image paths relative to the current page.

04	$.preLoadImages = function () {

05	var args_len = arguments.length;

06	for ( var i = args_len; i--;) {

07	var cacheImage = document.createElement( 'img' );

08	cacheImage.src = arguments[i];

09	cache.push(cacheImage);

10

}

11

}

12

13	jQuery.preLoadImages( "image1.gif" , "/path/to/image2.png" );

在新視窗打開連結 (target=”blank”)

1	$( 'a[@rel$=' external ']' ).click( function (){

2	this .target = "_blank" ;

3

});

4

5

當支援 JavaScript 時為 body 增加 class

1

2	$( 'body' ).addClass( 'hasJS' );

平滑滾動頁面到某個錨點

01	$(document).ready( function () {

02	$( "a.topLink" ).click( function () {

03	$( "html, body" ).animate({

04	scrollTop: $($( this ).attr( "href" )).offset().top + "px"

05

}, {

06	duration: 500,

07	easing: "swing"

08

});

09	return false ;

10

});

11

});

滑鼠滑動時的漸入和漸出

1	$(document).ready( function (){

2	$( ".thumbs img" ).fadeTo( "slow" , 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

3

4	$( ".thumbs img" ).hover( function (){

5	$( this ).fadeTo( "slow" , 1.0); // This should set the opacity to 100% on hover

6	}, function (){

7	$( this ).fadeTo( "slow" , 0.6); // This should set the opacity back to 60% on mouseout

8

});

9

});

制作等高的列

1	var max_height = 0;

2	$( "div.col" ).each( function (){

3	if ($( this ).height() > max_height) { max_height = $( this ).height(); }

4

});

5	$( "div.col" ).height(max_height);

在一些老的浏覽器上啟用 HTML5 的支援

01	( function (){

02

if (! 0)

03

return ;

04	var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video" .split( ',' ),i=e.length; while (i--){document.createElement(e[i])}

05

})()

06

07	//然後在head中引入該js

08	<!--[ if lt IE 9]>

09	<script src= "http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>

10	<![endif]-->

測試浏覽器是否支援某些 CSS3 屬性

01	var supports = ( function () {

02	var div = document.createElement( 'div' ),

03	vendors = 'Khtml Ms O Moz Webkit' .split( ' ' ),

04	len = vendors.length;

05

06	return function (prop) {

07	if ( prop in div.style ) return true ;

08

09	prop = prop.replace(/^[a-z]/, function (val) {

10	return val.toUpperCase();

11

});

12

13	while (len--) {

14	if ( vendors[len] + prop in div.style ) {

15	// browser supports box-shadow. Do what you need.

16	// Or use a bang (!) to test if the browser doesn't.

17	return true ;

18

}

19

}

20	return false ;

21

};

22

})();

23

24	if ( supports( 'textShadow' ) ) {

25	document.documentElement.className += ' textShadow' ;

擷取 URL 中傳遞的參數

1	$.urlParam = function (name){

2	var results = new RegExp( '[\\?&]' + name + '=([^&#]*)' ).exec(window.location.href);

3	if (!results) { return 0; }

4	return results[1] || 0;

5

}

禁用表單的Enter鍵送出

1	$( "#form" ).keypress( function (e) {

2	if (e.which == 13) {

3	return false ;

4

}

5

});