1.預加載圖片
1
2
3
4
5
6
7
8
9
10
11
12
|
( function ($)
{ var
cache = []; //
Arguments are image paths relative to the current page. $.preLoadImages
= function ()
{ var
args_len = arguments.length; for
( var
i = args_len; i--;) { var
cacheImage = document.createElement( 'img' ); cacheImage.src
= arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages( "image1.gif" ,
"/path/to/image2.png" ); |
2. 讓頁面中的每個元素都適合在移動設備上展示
1
2
3
4
5
6
7
8
9
10
11
|
var
scr = document.createElement( 'script' ); document.body.appendChild(scr); scr.onload
= function (){ $( 'div' ).attr( 'class' ,
'' ).attr( 'id' ,
'' ).css({ 'margin'
: 0, 'padding'
: 0, 'width' :
'100%' , 'clear' : 'both' }); }; |
3.圖像等比例縮放
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
$(window).bind( "load" ,
function ()
{ //
IMAGE RESIZE $( '#product_cat_list
img' ).each( function ()
{ var
maxWidth = 120; var
maxHeight = 120; var
ratio = 0; var
width = $( this ).width(); var
height = $( this ).height(); if (width
> maxWidth){ ratio
= maxWidth / width; $( this ).css( "width" ,
maxWidth); $( this ).css( "height" ,
height * ratio); height
= height * ratio; } var
width = $( this ).width(); var
height = $( this ).height(); if (height
> maxHeight){ ratio
= maxHeight / height; $( this ).css( "height" ,
maxHeight); $( this ).css( "width" ,
width * ratio); width
= width * ratio; } }); //$("#contentpage
img").show(); //
IMAGE RESIZE }); |
4.返回頁面頂部
1
2
3
4
5
6
7
8
|
//
Back To Top $(document).ready( function (){
$( '.top' ).click( function ()
{ $(document).scrollTo(0,500);
}); });
//Create
a link defined with the class .top <a
href= "#"
class= "top" >Back
To Top</a> |
5.使用jQuery打造手風琴式的摺疊效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var
accordion = { init:
function (){ var
$container = $( '#accordion' ); $container.find( 'li:not(:first)
.details' ).hide(); $container.find( 'li:first' ).addClass( 'active' ); $container.on( 'click' , 'li
a' , function (e){ e.preventDefault(); var
$ this
= $( this ).parents( 'li' ); if ($ this .hasClass( 'active' )){ if ($( '.details' ).is( ':visible' ))
{ $ this .find( '.details' ).slideUp(); }
else
{ $ this .find( '.details' ).slideDown(); } }
else
{ $container.find( 'li.active
.details' ).slideUp(); $container.find( 'li' ).removeClass( 'active' ); $ this .addClass( 'active' ); $ this .find( '.details' ).slideDown(); } }); } }; |
6.通過預加載圖片廊中的上一幅下一幅圖片來模仿Facebook的圖片展示方式
1
2
3
4
5
6
7
8
|
var
nextimage = "/images/some-image.jpg" ; $(document).ready( function (){ window.setTimeout( function (){ var
img = $( "" ).attr( "src" ,
nextimage).load( function (){ //all
done }); },
100); }); |
7.使用jQuery和Ajax自動填充選擇框
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$( function (){ $( "select#ctlJob" ).change( function (){ $.getJSON( "/select.php" ,{id:
$( this ).val(),
ajax: 'true' },
function (j){ var
options = '' ; for
( var
i = 0; i < j.length; i++) { options
+= ' '
+ j[i].optionDisplay + ' ' ; } $( "select#ctlPerson" ).html(options); }) }) }) |
8.自動替換丟失的圖片
1
2
3
4
5
6
7
8
|
//
Safe Snippet $( "img" ).error( function
() { $( this ).unbind( "error" ).attr( "src" ,
"missing_image.gif" ); }); //
Persistent Snipper $( "img" ).error( function
() { $( this ).attr( "src" ,
"missing_image.gif" ); }); |
9.在鼠標懸停時顯示淡入/淡出特效
1
2
3
4
5
6
7
8
|
$(document).ready( function (){ $( ".thumbs
img" ).fadeTo( "slow" ,
0.6); //
This sets the opacity of the thumbs to fade down to 60% when the page loads $( ".thumbs
img" ).hover( function (){ $( this ).fadeTo( "slow" ,
1.0); //
This should set the opacity to 100% on hover }, function (){ $( this ).fadeTo( "slow" ,
0.6); //
This should set the opacity back to 60% on mouseout }); }); |
10.清空表單數據
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function
clearForm(form) { //
iterate over all of the inputs for the form //
element that was passed in $( ':input' ,
form).each( function ()
{ var
type = this .type; var
tag = this .tagName.toLowerCase();
//
normalize case //
it's ok to reset the value attr of text inputs, //
password inputs, and textareas if
(type == 'text '
|| type == ' password '
|| tag == ' textarea ') this.value
= ""; //
checkboxes and radios need to have their checked state cleared //
but should *not* have their ' value '
changed else
if (type == ' checkbox '
|| type == ' radio ') this.checked
= false; //
select elements need to have their ' selectedIndex '
property set to -1 //
(this works for both single and multiple select elements) else
if (tag == ' select') this .selectedIndex
= -1; }); }; |
11.預防對錶單進行多次提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(document).ready( function ()
{ $( 'form' ).submit( function ()
{ if ( typeof
jQuery.data( this ,
"disabledOnSubmit" )
== 'undefined' )
{ jQuery.data( this ,
"disabledOnSubmit" ,
{ submited: true
}); $( 'input[type=submit],
input[type=button]' ,
this ).each( function ()
{ $( this ).attr( "disabled" ,
"disabled" ); }); return
true ; } else { return
false ; } }); }); |
12.動態添加表單元素
1
2
3
4
5
|
//change
event on password1 field to prompt new input $( '#password1' ).change( function ()
{ //dynamically
create new input and insert after password1 $( "#password1" ).append( "" ); }); |
13.讓整個Div可點擊
1
2
|
blah
blah blah. link The
following lines of jQuery will make the entire div clickable: $( ".myBox" ).click( function (){
window.location=$( this ).find( "a" ).attr( "href" );
return
false ;
}); |
14.平衡高度或Div元素
1
2
3
4
5
|
var
maxHeight = 0; $( "div" ).each( function (){ if
($( this ).height()
> maxHeight) { maxHeight = $( this ).height();
} }); $( "div" ).height(maxHeight); |
15. 在窗口滾動時自動加載內容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var
loading = false ; $(window).scroll( function (){ if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if (loading
== false ){ loading
= true ; $( '#loadingbar' ).css( "display" , "block" ); $.get( "load.php?start=" +$( '#loaded_max' ).val(),
function (loaded){ $( 'body' ).append(loaded); $( '#loaded_max' ).val(parseInt($( '#loaded_max' ).val())+50); $( '#loadingbar' ).css( "display" , "none" ); loading
= false ; }); } } }); $(document).ready( function ()
{ $( '#loaded_max' ).val(50); }); |