发表过的一篇《10个超级有用的PHP代码片段果断收藏》 吗？本文笔者将继续为你奉上15个超级有用的jQuery代码片段。

jQuery里提供了许多创建交互式网站的方法，在开发网项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。

下面就让我们一起来享受jQuery代码的魅力之处吧。

1.预加载图片

（函数($){ var cache=[]；//参数是相对于当前页面的图像路径。$.preLoadImages=function(){ var args _ len=arguments。长度；for(var I=args _ len；我-；){ var cache image=document。创建元素(' img ')；cacheImage.src=参数[一]；缓存。推送(缓存图像)；} } jquery。预加载图像('图像1。gif '，'/路径/到/图像2。png ')；2.让页面中的每个元素都适合在移动设备上展示

var SCR=文档。创建元素(“脚本”)；scr.setAttribute('src '，' https://Ajax。谷歌API。com/Ajax/libs/jquery/1。5 .2/jquery。量滴js’)；文件。尸体。阑尾切除术；scr.onload=function(){ $('div ').attr('class '，' ').attr('id '，' ').css({ 'margin' : 0，' padding' : 0，' width': '100% '，' clear ' : ' both ' })；};3.图像等比例缩放

$(窗口)。bind('load '，function(){//IMAGE RESIZE $(' # product _ cat _ list img ').每个（函数(){ var MaxWidth=120 var MaxHeight=120 var比率=0;var width=$(this).宽度();var height=$(this).高度();if(width maxWidth){ ratio=maxWidth/width；$(这个)。css('width '，MaxWidth)；$(这个)。css(“”高，高*比);身高=身高*比例；} var width=$(this).宽度();var height=$(this).高度();if(height maxHeight){ ratio=maxHeight/height；$(这个)。css('height '，MaxHeight)；$(这个)。css('width '，width * ratio)；宽度=宽度*比率；} });//$('#contentpage img ').show()；//IMage RESIZE })；4.返回页面顶部

//返回顶部$(文档)。ready(function(){ $(')).顶部').单击(函数(){ $(文档)).scrollTo(0，500)；});});//创建用类定义的链接Top a href=' # ' class=' Top '返回到Top/a 5 .使用jQuery打造手风琴式的折叠效果

var accordion={ init : function(){ var $ container=$(' # accordion ')；$集装箱。find(' li: not(: first)).细节')。hide()；$container.find('li:first ').添加CLaSS(' active ')；$container.on('click '，'阿利，函数(e){ e . prevent default()；var $this=$(this).父母("李");if($这个。具有类(' active '){ if($(').细节')。是(' :可见'){ $ this。查找(' .细节')。向上滑动()；} else { $this.find(' .细节')。向下滑动()；} } else { $ container。找到李。活跃的.细节')。向上滑动()；$container.find('li ').移除CLaSS(' active ')；这个。add CLaSS(' active ')；$this.find(.细节')。向下滑动()；} });} };6.通过预加载图片廊中的上一幅下一幅图片来模仿脸谱网的图片展示方式

var next image='/images/some-image。jpg '；$(文档)。ready(函数(){ window。settimeout(function(){ var img=$(' ')).attr('src '，nextimage).load(function(){//all done })；}, 100);});7.使用jQuery和埃阿斯自动填充选择框

$(function(){ $('select#ctlJob ')).change(function(){ $).getJSON('/select.php '，{id: $(this)).val()，ajax: 'true'}，function(j){ var options=' '；for(var I=0；我。长度；I){ options=' j[I].选项显示" "；} $("选择# ctlPerson ").html(选项);}) }) }) 8.自动替换丢失的图片

//安全片段$('img ').错误(function () { $(this)).解除绑定("错误")。attr('src '，' missing _ image。gif ')；});//持久Snipper $('img ').错误(function () { $(this)).attr('src '，' missing _ image。gif ')；});9.在鼠标悬停时显示淡入/淡出特效

$(文档)。ready(function(){ $(')).拇指img ').“fadeTo(”慢',0.6);//这会将页面加载$()时拇指的不透明度设置为淡化到60%。拇指img ').悬停(function(){ $(this)).“fadeTo(”慢',1.0);//这应该将悬停时的不透明度设置为100% },函数(){ $(这个).“fadeTo(”慢',0.6);//这应该会将mouseout }上的不透明度设置回60%);});10.清空表单数据

函数clearForm(表单){ //迭代在$(':input '，表单)中传递的表单/元素的所有输入。每个（函数(){ var type=this.typevar标记=这个。标记名。tolowercase()；//规范化大小写/如果(type==' text ' | | type=' password ' | | tag==' text area ')这。值=' '，则可以重置文本输入、//密码输入和文本区域的值attr/复选框和单选按钮需要清除它们的选中状态//,但不应*更改它们的"值"否则如果(type=="checkbox"| | type=="radio ")这。选中=假；//选择元素需要将它们的'选择索引'属性设置为-1 /(这适用于单个和多个挑选元素)否则如果（标记=='选择')这个。selectedIndex=-1；});};11.预防对表单进行多次提交

$(文档)。ready(function(){ $(“form”)).submit(function(){ if(jquery的类型。数据(这，“disabledOnSubmit”)=“undefined”){ jquery。数据(这个，‘disabledOnSubmit’，{ submit ed : true })；$('输入[类型=提交]，输入[type=button]'，这个)。每个（函数(){ $(此)).attr('disabled '，' disabled ')；});返回真；} else { return false } })；});12.动态添加表单元素

//更改密码1字段上的事件以提示新输入$("#密码1 ").change(function(){//动态创建新输入并插入password1 $('#password1 ')之后。追加("");});

13.让整个差异可点击

等等等等。链接jQuery的以下几行将使整个差异可点击： $()。my BOx’).单击(function(){ window。位置=$(这个)).查找(' a ').attr(' href ')；返回false })；14.平衡高度或差异元素

var MaxHeight=0；$(“div”).每个（函数(){ if ($(this)).height()MaxHeight){ MaxHeight=$(this).高度();} });$(“div”).高度(MaxHeight)；15.在窗口滚动时自动加载内容

var loading=false$(窗口)。滚动(函数(){ if($(窗口)).scrollTop() $(窗口)。高度())250)=$(文档)。height()){ if(loading==false){ loading=true；$('#loadingbar ').css('display '，' block ')；$.get('load.php？start=' $('#loaded_max ').val()，函数（已加载){ $(“正文”).追加（已加载);$('#loaded_max ').val(parseInt($('#loaded_max ')).val())50)；$('#loadingbar ').css('display '，' none ')；loading=false })；} } });$(文档)。ready(function(){ $(“# loaded _ max”)).val(50)；});本文收集的这15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。