jQuery里提供了許多創建交互式網站的方法，在開發Web項目時，開發人員應該好好利用jQuery代碼，它們不僅能給網站帶來各種動畫、特效，還會提高網站的用戶體驗。

本文收集了15段非常實用的jQuery代碼片段，你可以直接復制黏貼到代碼里，但請開發者注意了，要理解代碼再使用哦。下面就讓我們一起來享受jQuery代碼的魅力之處吧。

1.預加載圖片

Js代碼

(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. 讓頁面中的每個元素都適合在移動設備上展示

Js代碼

var?scr?=?document.createElement('script');??

scr.setAttribute('src',?'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');??

document.body.appendChild(scr);??

scr.onload?=?function(){??

????$('div').attr('class',?'').attr('id',?'').css({??

????????'margin'?:?0,??

????????'padding'?:?0,??

????????'width':?'100%',??

????????'clear':'both'??

????});??

};??

?源碼

?

3.圖像等比例縮放

Js代碼

$(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.返回頁面頂部

Js代碼

//?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打造手風琴式的折疊效果

Js代碼

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的圖片展示方式

Js代碼

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自動填充選擇框

Js代碼

$(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.自動替換丟失的圖片

Js代碼

//?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.在鼠標懸停時顯示淡入/淡出特效

Js代碼

$(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.清空表單數據 Js代碼

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.預防對表單進行多次提交

Js代碼

$(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.動態添加表單元素

Js代碼

//change?event?on?password1?field?to?prompt?new?input??

$('#password1').change(function()?{??

??????????

//dynamically?create?new?input?and?insert?after?password1??

????????$("#password1").append("");??

});??

?源碼

13.讓整個Div可點擊

Js代碼

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元素

Js代碼

var?maxHeight?=?0;??

$("div").each(function(){??

???if?($(this).height()?>?maxHeight)?{?maxHeight?=?$(this).height();?}??

});??

$("div").height(maxHeight);??

?源碼

15. 在窗口滾動時自動加載內容

Js代碼

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);??

});?

轉載于:https://www.cnblogs.com/RedRoshan/p/3569164.html

總結

以上是生活随笔為你收集整理的可以直接拿来用的15个jQuery代码片段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。