说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

可以直接拿来用的15个jQuery代码片段

HTML文档下载 WORD文档下载 PDF文档下载
开发人员利用jQuery代码不仅能给网站带来各种动画、特效,还会提高网站的用户体验。本文总结了开发者经常使用的15个jQuery代码片段,大家可以直接拿来用。

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

本文收集了15段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。

1.预加载图片

(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. 让页面中的每个元素都适合在移动设备上展示

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.图像等比例缩放

$(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.返回页面顶部

// 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打造手风琴式的折叠效果

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

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自动填充选择框

$(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.自动替换丢失的图片

// 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.在鼠标悬停时显示淡入/淡出特效

$(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.清空表单数据

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.预防对表单进行多次提交

$(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.动态添加表单元素

//change event on password1 field to prompt new input$('#password1').change(function() {        //dynamically create new input and insert after password1        $("#password1").append("");});
源码

13.让整个Div可点击

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

var maxHeight = 0;$("div").each(function(){   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }});$("div").height(maxHeight);
源码

15. 在窗口滚动时自动加载内容

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);});
来自: codegeekz

众望所归:智能手机芯片将为服务器所用 没有学位,他通过以下四步进入Google 谈谈Google Polymer以及Web UI框架的未来 保密入髓:前苹果员工揭示公司是如此善于保守秘密 调查显示:软件开发公司出现“人才荒” 三星拟6月20日在伦敦召开新品发布会 推手机新品Galaxy和ATIV 历届中国云计算大会PPT集萃(五):数据安全隐患解析与应对 搞趣网创始人:做不了阳春白雪 就做下里巴人 CMDN Club 28期:创业公司一定不要浪费资源 浅谈Lean UX:我们到底该怎么设计? 张艺谋今日正式加盟乐视 作品专区落户超级电视 WebKit华丽转身:欧朋浏览器8.0新鲜出炉 分析师称应出售Bing?除非微软倒闭,否则不可能卖Bing Go Mobile沙龙第二期:软硬整合与创客精神 专访西电黄宝林:《基于GPU的并行NMF网络聚类算法》获奖背后故事 友友姚宏宇:用C,C++和Java实现自主研发之后,放开心态迎“高朋” 新技术对传统学科的颠覆:系谱网使用大数据寻亲问祖 IDC:2015年全球平板电脑出货量将超PC Web开发者的福利 30段超实用CSS代码 库克出席D11科技大会:苹果公司没有陷入麻烦 千兆的带宽是不够的,最新研究将我们带入400G时代! 告诉你一个事实:移动互联网依然不大 一切才刚刚开始 戴尔的10亿美元云扩建计划到底是什么? iOS vs. Android,应用设计该如何对症下药? 扁平化设计五大原则 16种折磨开发者的方式 2013年度中国优秀开源项目征集活动正式启动 技术趋势:产品设计向“钱”看 服务器领域:旧时代已过 新时代正在降临 速度与金钱的碰撞:F1赛车将搭上大数据的东风 中国&#183;北京第一届开源大会Hadoop专场侧记:Hadoop已经成为大数据分析平台的标配 急。关于ppc和sybase的问题 请问编一个WINDOWS画笔 谁有c434009A主板的驱动程序。 请问在windows下如何实现像数据库一样的读、写锁? 为啥我在InstallShield中调用DLL中的函数总是出错呢? 如何能在HTML控件显示区域显示“....(指定的文件名)不存在”? 请问如何把TIF格式转换成JPG或GIF的格式?? 代理不能定时执行,请指教,谢谢。 怎样与外部数据库建立联合查询? 如何接受来自vbscript的字符数据列表 怎么在Gtk+的gnomemessagebox显示中文? (在线等待,急!)在vc中怎么使用datagrid控件 我使用的是odbc访问数据库 好急的问题,有关于SMS的接收字符处理问题,想了好几天没有结果 那位兄弟手头上有ASP.NET高级编程的电子书? DataGrid 控件问题,帮帮我把,朋友! automount? 一个比较难的问题! 关于datagrid的问题 在线等待 在cmd编辑器中用java运行已编译的文件运行不成功怎样解决 各位帮我解决一下这个问题!!!谢谢 关于ResourceManager的疑惑? 两台机器无法访问? 大家有没有听说过zebudom.js这个javascript的API?请问哪里可以下载它? 模块的连接 如何用php开发一个在线语音聊天室? 请问:有谁能提供Microsoft Project 2002简体中文专业版下载地址????急用!!!!!! 《The C++ Programming Language》有没有中译版? 请高手帮我看看: session的范围 硬件加、解密卡合作 请问那里能下到C或者C++的编译环境? 我的网页做好了,在我自己的机子上显示的很好看,在别的机子上有的显示的和在我的机子上显示的一样,很不错,但在有些机子上显示就变形了 怎样在文件中查找指定的字串? 为什么这两个查询都不能运行呢? 请教有关比对数据库的思路 运行结果出错!!!!!!!!!! google主页的问题(在线) (在线等待,急!)对话框中画图,超过了对话框大小,但是滚动条不能用 jbuilder7+jboss的配置问题? 求教:用UML做分析设计工具、用JAVA开发的一个办公管理系统的详细时间节点计划书。 數據庫數據顯示問題///急,在線等!!!!!個位幫幫忙? 讨论一下,eregi和strpos 为什么这两个查询都不能运行呢? 集成多文件夹操作窗口的软件有吗?有的请发QQ;6138215 怎么获得checkbox组中被选中的部分? sybase表中有没有自动编号的字段啊? 问一个很菜的问题?(在线等……) DOMINO的B/S开发:如何自动更新一页面中的多分类新闻标题AS WWW。WXRB。COM 如何用一根电话线让两台电脑同时上网 急!!“SQLserver不存在或访问被拒绝”怎末回事? 吃一垫,真能长一智吗 如右图,某小区规划在长32米,宽20米的矩形场地如图,某小区规划在长32米,宽20米的举行场地ABCD上修建三条同样宽的小路,使其中两条与AD平行,一条与AB平行,其余部分种草,若使草坪的面积为566M 英语翻译I'm sorry I didn't send you a card till now cauze it took me quite a few days to figure out what you wrote in your self introduction.anyway,i hope you like this card,it's about a famous mountain in Hunan province.and I WONDER If you could 吃一埑,长一智.的教育意义是什么? 谁认识这树?就是结这个果子的树 “三面红旗会甘肃”有何历史意义? “古城遵义”在党的历史上发生过什么重大事件?其意义是什么? 吃一垫,长一智. 谁认识这是什么树树枝和树杆都是弯弯曲曲的再传一张 邀请别人的用语(英语) “三下乡”社会实践是哪一年开始的 作为教师你感到最大的压力是什么? 写一个神话故事主要内容,要简介 英语翻译要写在简历里的 务必要准确 英语翻译再求帮忙写一篇以这个为题目的英文演讲稿,二百单词左右 邀请别人的英语用语(急!) 台风暴跳如雷,像头疯狂的巨兽,呼呼地向着城市扑去,用了什么修辞手法?急 我要名人求学的例子,或有关于求学的名言.急, 什么是《琵琶行》全诗的主旨,更是诗人与琵琶女感情的共鸣. 他暴跳如雷,像___________.(比喻句) 是吃一堑,长一智,还是吃一蜇,长一智呢?麻烦知道的回答一下. 求教,我语文不好, 台风为什么暴跳如雷?急, 英语翻译Courage is the ladder on which all the other virtues mount.还有这句Despite all the life danger,with one selfless act from one common person,someone is saved,A hero is made. 请问猪能上树吗? 《故乡的桂花雨》的主题是什么? culture smart or science intelligent原创文章!明天就要用! 英语翻译HINWEISE ZUR FESTSTELLUNGSPRüFUNG:Die Feststellungsprüfung erfolgt nach folgenden Kriterien:1.künstlerische Gestaltungsf?higkeit2.Realisierungsf?higkeit in den gew?hlten künstlerischen Medien3.künstlerische Konzeption und Intensit?tD 我能行 主题班会的回答内容,尽量多.(中学生) 真情树 读后感 请问有人知道幼儿园中班舞蹈课课教案要怎么写哟?有点急,打心底麻烦各位蓄 什么样的女人最讨人喜欢拜托各位了 3Q 斯大林信基督吗?俄国人不都是信天主教么,但他(斯大林)是共产主义者,是不是无神论?请懂的回答 参加辩论赛,需要的条件. 鸽子蛋书面语叫什么? 有人看过如果树知道么,有什么感想 拜托看下幼儿园中班舞蹈课课教案要怎么写哟?我想知道到,打心底麻烦给位朋友了锈 "蛰"这个字用拼音怎么打? 我相信有神 但我却不信奉神 这算是有神论还是无神论我相信神是因为我觉得神只是比一般人强的人或生物,所以我也不信奉神 英语翻译谁知道有什么德语翻译工具可以翻译整页或整篇文章的 ,一段一段的也可以.急用 1.快车和慢车同时从A\B两地相向而行,3小时向隅后两车按原速继续前进,快车形式2小时到达B地,这时慢车距离A地还有110千米.求A\B两地相距多少千米?2.有一块铜与锌的合金,其中铜与锌的比是2:3, culture smart or science intelligent?用这个作演讲题目,着重说哪方面比较新颖啊?演讲内容是必须在culture smart和science intelligent两者中选一个来讲,还是可以说他们都很重要,相互依靠之类的? 英语翻译演出加油、中文4个字?德语这么长?能不能请1L的翻译下你写的? .....(要用比例等式来计算...):只选最好的答案..1.师徒两人合做了84个零件,师傅5分钟做一个,徒弟9分钟做一个,要求在相同的时间完成,每人应该分配到多少个零件?2.走同一段路,小玲要12分,小丽 请高手帮忙解析culture smart or science intelligent这个是2009年CCTV杯的题目 我拿去问来自美国的外教 她说这个题目有错误 她从来没见过culture smart的说法 从这个短语的结构到较为深层的含义 尽可 我都迷茫了, 上上月书面语怎么说 电机互锁的问题6台电机设M1-M6要求依次从M6到M1 互锁 (M6工作才能使M5工作 , M5工作才能使M4工作.)高手帮我弄个电路图啊 谢谢降序使用辅助常开触点即可实现。。。 这个我也不会啊 选辩论题目,应遵守什么样的标准? 吃一欠长一智什么意思? cultural smart or science intelligent 孝代表的意思 吃一寸 长一智什么意思 杭金衢高速公路义乌出口有几个,分别是…能说清楚具体位置最好,就是杭金衢高速公路义乌下来后会经过什么路… 孝字有什么象征吗?西递敬爱堂中为朱熹所书.形态. 请教下仿一本男孩子必读的书写钢铁是怎样炼成的读后感J我想知道到,我在此先谢谢大伙了7dX ,某小区规划在长32米,宽20米的矩形场地上修建三条同样宽的3条小路,使其中两条与AB平行,另一条与AD平行,要使小路的宽为2m,那么剩余的耕地面积为多少平方米 有什么词可以来表示孝善美的 人为什么要吃一垫才会长一智?不是有句古话;"吃一垫.长一智"人为什么要吃一次亏才会长一智呢?###不吃亏就长不了智了吗?$$$有时的一次亏会让你损失很多!我就以这为例:我在盛大以保中被骗 某小区规划在长4米,宽26的矩形场地上修建三条等宽的小路,其中两条与宽平行,一条与长平行,其余种草,草地面积为144平方米,求小路的宽 有谁能告诉我孝鼓节奏?用符号表示出来,最好能文字说明一下孝鼓就是村中有老人去世,晚上唱丧歌打的鼓 美研发新型间谍机 可一小时内到达全球穆尔西庭审前夕 埃及发生枪击案致2名伊朗最高领袖称美国是微笑的敌人 对核震惊! 镜头揭秘世界各地女人的惊天差叙利亚等国民众观测日偏食天文奇观【高曼德拉生平电影首映 前妻称反映其“苦印度女婴家传怪病 身体多毛酷似狼孩【尼日利亚教堂发生踩踏事件 造成至少2宁波高校增设班级心理委员 为同学送上男童假装落水致救人者瘫痪 愧疚28年苏格兰首席部长访华 推动双方经贸合作德政府代表:日本对东亚紧张局势负有责浙江部分行政区划调整 绍兴县上虞市撤深圳二套房贷首付提至7成 杭州二套房杭州二套房贷政策未变 年内调整的可能地铁2号线沈塘桥站开始管线迁改 部分2999元长滩游2999元沙巴游 东李云迪明年1月杭州巡演 粉丝已经开始欧盟规范产地国标签 德国制造或变中国美机场枪手行凶细节被曝光 短信透出厌英国15岁少年欲滑雪闯南极(图)我省计划5年培养1.25万名全科型乡中高考期间滨湖启动“静音模式”瑶海社区“四步走”顺利完成低保年审瑶海8个老旧小区 将焕新颜爱心送考火热进行中中、高考试卷保密室 需3把钥匙同时打合肥要建设一支强有力的 哲学社会科学打造一批高水平特色智库轻信网络“代发论文”掉进陷阱被骗52西园街道尝试 ppp专项文化养老安徽 中东欧合作机遇与展望对话会昨举本周日有两场相亲会 单身千万别错过!一、六、八中特长生专业考核通过率达6中东欧六国总领事来肥推介安徽将建50个房车营地和露营地我省到2020年基本建成旅游强省涉传人员随身带“警官证”“金项链”搭建专业信息平台让医患双方有据可查煤气深锁面馆夫妻 众经营户合力撬门河滨社区计生协会开展为民服务活动高考冲刺阶段成绩下滑
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘