本文收集了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 for ( var i var cacheImage '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' : 'padding' : '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 ).each( function () var maxWidth var maxHeight var ratio var width this ).width(); var height this ).height(); if (width ratio = maxWidth / width; $( this ).css( "width" , $( this ).css( "height" , height = height * ratio; } var width this ).width(); var height this ).height(); if (height ratio = maxHeight / height; $( this ).css( "height" , $( this ).css( "width" , 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 |
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) ).hide(); $container.find( 'li:first' ).addClass( 'active' ); $container.on( 'click' , 'li , 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 ).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" , 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 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 ).fadeTo( "slow" , // This sets the opacity of the thumbs to fade down to 60% when the page loads $( ".thumbs ).hover( function (){ $( this ).fadeTo( "slow" , // This should set the opacity to 100% on hover }, function (){ $( this ).fadeTo( "slow" , // 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' , function () { var type this .type; var tag this .tagName.toLowerCase(); // // it's ok to reset the value attr of text inputs, // password inputs, and textareas if (type ' || type == ' password ' textarea ') this.value = ""; // checkboxes and radios need to have their checked state cleared // but should *not* have their ' value ' else if (type == ' checkbox ' radio ') this.checked = false; // select elements need to have their ' selectedIndex ' // (this works for both single and multiple select elements) else if (tag == ' select') this .selectedIndex }); }; |
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" , true }); $( 'input[type=submit], , 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 (){ this ).find( "a" ).attr( "href" ); return false ; |
14.平衡高度或Div元素
1
2
3
4
5
|
var maxHeight = 0; $( "div" ).each( function (){ if ($( this ).height() 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); }); |