jQuery裏提供了許多創建交互式網站的方法,在開發Web項目時,開發人員應該好好利用jQuery代碼,它們不僅能給網站帶來各種動畫、特效,還會提高網站的用戶體驗。
本文收集了15段非常實用的jQuery代碼片段,你可以直接複製黏貼到代碼裏,但請開發者注意了,要理解代碼再使用哦。下面就讓我們一起來享受jQuery代碼的魅力之處吧。
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); }); |
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); }); |