摘要：開發人員利用jQuery代碼不僅能給網站帶來各種動畫、特效，還會提高網站的用戶體驗。本文總結了開發者經常使用的15個jQuery代碼片段，大家可以直接拿來用。
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. linkThe 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);}); |