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

可以直接拿来用的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

人才短缺不能只靠等 看分析人士给硅谷的3个方案 九个相当有吸引力的WebGL演示 巨人网络朱永明谈运营:游戏就是社会的缩影 Dragon Forged创始人:不想当空军的开发者,不是好程序员 创业者应该怎样走出idea迷宫? TIOBE 2013年8月编程语言排行榜:Java领衔称霸 Gartner新报告:为改善风险管理,云服务合同需要更透明 没有银弹:探讨 Java 8 新增特性的优缺点 SDCC 2013议题更新 Pinterest架构实践、推荐系统、微信应用... 拥有82944个处理器的超级计算机 40分钟才能模拟一秒人脑活动 剑指IE10 最新测试版Chrome增加更多触摸屏功能 理性对待“云”——冲向“云”之前你需考虑的事 为Ruby On Rails开发者准备的5款IDE 一位开发人员的生日愿望清单 当“硅”已走到尽头,我们又该用什么去维系摩尔定律? 高端大气上档次 8位iOS顶级女程序媛 谁都可以做开发者:微软推出Windows Phone Web工具 Mozilla正式发布Firefox 23 新增混合内容拦截 网络监控功能 14条建议,使你的IT职业生涯更上一层楼 依托微信的电商产品实践——SDCC 2013讲师潘凡专访 IBM将向Google、英伟达等授权Power架构技术 人脑研究将推动下一代网络革命?从大爆炸到大收缩 H3C携手F5将“空转”数据中心变为“分布式数据中心” W3C小组发布Web存储API推荐标准 开发者必备的6款源码搜索引擎 闪亮登场:开发者制作图形图表所需的11款JS工具包 来自两位技术大牛的博弈:HBase或将制霸NoSQL? 应用改变世界 2013英特尔®创新应用大赛火热开启 看13位CEO、创始人和高管如何提高工作效率 对首次购买智能手机用户而言,苹果吸引力并不大 Amazon Appstore面向Web应用开放 开发者可添加应用内付费功能 我上午53,下午58.该不会下马吧????/我相知道什么时候才能知道是否已经Pass,什么时候下证? 有关DELPHI6中使用SKINENGINE??? C++ Builder中多国语言的问题 在哪下载到Exchange 2000 Server Resource Kit? 快捷方式损坏怎样修复? bluesky069(菜鸟一族)你帮助我把那个PBL放到蛛蛛的信箱好不好呢?让大家都可以下在的! 请问哪里有w32dsm.exe的教程??? 潘译<>印刷错误百出,令人不忍卒读... LISTBOX的问题?请高手帮忙!!高分向送! 帮我想想这个主键该怎么建SQL SERVER7 如何将控件,恢复init()到初始状态 急救:装有SCO UNIX的硬盘克隆后不能启动系统,怎么办? 如何在FTP的目录下再新建目录?我初学网络编程, 怎样设置ScrollView中的ScrollBar不可见? 有关comboBox问题??????急!急!!! 有那位朋友对ADO控件调用T-SQL的链接服务器或存储过程的命令有所了解,或知道怎样取链接服务器的相关信息 真诚的向大家请教一个问题!!先谢谢了 redhat linux7.2安装完成后,怎么没有工具栏 已知manager是employee的子类,那么这么写Employee epy=new Manager()为什么合法? 第五次提出这个问题:如何通过DELPHI调用SQL SERVER 过程向SQL SERVER 存入图象。 为什么我在新闻聚焦中发表不了评论? 在VB里怎样用ADO存贮Access的Memo型字段? 誰有在PB下用powersock做的聊天程序? SQL的好书是什么呀?难道就没有人有体会? vb怎样格式化硬盘?? 做个《曹操传》之类的游戏需要多少投资? 关于sfc(系统文件扫描)的问题 高分求解,大虾请进 买了java程序员大本营的请进!!!! 请大家陈说学msce的前途 如何使用ProgressBar casting在java中是什么意思啊? querymode 查询器不稳定吧? 各位兄弟姐妹,在长沙拿3K是个什么水平,和沿海比怎么样,还需不需要跳槽? 想知道用程序免费发手机短信吗? 请问各位软友哪里有介绍C++Builder控件属性,方法和事件的资料。 高分相赠!!!求解我爱背单词2001共享版注册码!!! 我的XP不能上网了,添加163连接最后总说无法更新通讯簿,不能成功 如何添加纪录? 想学如何用程序发手机短信吗? 请问过滤条件filter怎么用?? 使用微软SQL Server的Select时,怎么写才能检索从N条-M条的记录(也就是说直接检索,而不是全部检索后取其中的一部分.) 如何通过程序得到系统的所有热键。谢您了。 关于CSICO防火墙515-R的问题?急 想知道在程序中如何发手机短消息吗? 求助在VC中怎样用串口控件MSComm1??(我在VB和DELPHI中用过,但不知道在VC中怎样用) 怎么给char months[12][4]赋值...... 哪里有xml spy的中文参考书 安装VisualAge for Java 出错(很急呀!!!) 求救:bcb中char与AnsiString的相互问题?? 请看:用程序发送手机消息. java中怎样绘制正弦函数图象?原题:在文本框中输入函数y=sin(ax)中a的值,点击draw按钮画出函数图形.求大虾指点. 400米95铝电缆电压降有多少啊 井底之蛙,所见甚小.和一叶障目,不见泰山.所包含的物理知识? 正弦函数高一数学 三角函数五点作图法横坐标点问题比如2sin(2x+π/3)横坐标点怎么确定?(⊙_⊙ 电路图 电流与电压的计算!在电路中R1与R2是并联,且与灯L是串联,R1=30欧R2=60欧RL=40欧U=12求:1、经过电阻R1的电流及R1两端的电压?2、经过灯L的电流及L两端电压?具体公式算法帮忙列出来, 一道高一数学题 有关正弦函数图象如图为f(x)=Asin(wx+y) (0,根3)(2π/3,0)w>0,0 三角函数五点 作图y=sin(x+∏/6)五点是什么啊?怎样得出来的?是y=sin(x+π/6) 具体的求点方法~ 这个电路的电压和电流怎么算 一台发电机,输出的功率为8000KW,所用的输电线的电阻是15欧,当发电机的输电电压为100KV时.求导线上的电流,输电线上的损失的电压与电功率. 锰矿与锰铁有什么区别 混连的电路的电压:某个点上的电压 总电压 电流:某个点上的电流 总电流怎么算 咱们就从这个图算就行 拜托了 1500千瓦功率,距离500米,电压380伏,需要用多大的五芯电缆? 硅锰和锰铁的区别在元素组成和含量上有无不一样? 怎么计算出一些复杂的电路图的各点电压和电流?(有图)象这个复杂电路图应该怎么计算出各点的电压电流?要结合什么定律?分析电路的工作原理是不是都应该这样?我是学电子的现在还是一 中国哪里盛产硅铁,锰铁回答的地方可以两者都盛产也可以单独盛产某一种(具体到某个省) 锰铁粉的含量怎么检测 井底之蛙是出自什么成语 哪里可以出口锰铁我想出口大量锰铁,请问哪里可以办? 硅铁、锰铁、废料铁混合而成的材料好还是硬质合金好?具体有那些区别? 带“蛙”字的成语(井底之蛙除外) 锰铁是什么样的 400平方 电缆,380电压下能承受多大的电流,距离230米 如图12所示漫画描述的是“一叶障目”这个成语,这个成语说明了一个什么物理原理? 270平方电缆可以承受1000安培的直流电流吗 什么是65锰铁? 五点法作图 第二小问 应该怎么取?是取括号里的为0,pi/2,pi…还是x高一数学三角函数 五点法作图 第二小问 应该怎么取?是取括号里的为0,pi/2,pi…还是x可是那个0,pi是什么的范围! 高炉喷煤热滞后现象是怎么回事? 三角函数图像中的五点作图法如果是y=sin(2x+6/π)的那五个点怎么求,要详细过程 铸造中用的 覆膜砂、硅铁、锰铁、蠕化剂、球化剂、硅钙、甲基硅油等 对人体的伤害?我早铸造厂上班,请问铸造厂中使用的覆膜砂、硅铁、锰铁、蠕化剂、球化剂、硅钙、甲基硅油等对人体 单片机delay函数延迟时间计算,delay(80);为什么是600us左右?函数定义void delay(unsigned int t){while(t--);}主函数中delay(80);为什么是600us左右? 三角函数f(x)=Sin(2x+2分之根号3)的五点法作图怎么求点 生铁,硅铁,锰铁的溶点是多少? 120平方毫米铜电缆承受多少安电流 三角函数画图的问题我知道sinA的图要用五点法来画,但是如果变成 2sin(A+2)之类的就不会画了,不知道要怎么列表,可以告诉我这类题要怎么列表画图吗? 铸造用锰铁如何检验 高炉上料为什么是不连续的 放了一批矿或者焦炭总要隔断时间才上? 70平方规格的铝芯电线/缆 电流电压 钢水35号请问锰铁硅铁的加入时间 怎么根据功率查电线规格 65锰铁的65是什么含义就是高碳锰铁65# 和高碳锰铁75#的数字表示什么意思? 165个千瓦多少电流(A)电压380 ..最好有画图说明,某海岛上一个观察哨A在上午11时测得一轮船在海岛北偏东60度的C处,12时20分测得轮船在海岛北偏西60度的B处,十二时四十分轮船到达海岛正西方五千米的E港口,如果轮船始终 氮化锰铁是什么最好讲一下氮化锰铁研究现状. 在380伏电压的线路中,它的电流每千瓦有多少A. 已知f(1+cosx)=cos^2 x,求作函数f(x)的简图 三角函数 五点法 求φ 直流电压80伏100千瓦等于多少个电流 高炉冶炼主要技术经济指标有哪些 三角函数五点法怎样确定那五点? 一个160千瓦的电机380的电压怎么计算电流呢对吗有消耗的吗 3. 高炉冶炼希望高效能,低消耗,产品质量好,请简要总结高炉强化冶炼有哪些手段,采用这些手段的科学依据 电缆压降具体计算,3*95+1*50电缆,传输1000米,电流按150A算,或者是3*70+1*35电缆,末端带一个160的变压器,变压器主要是解决压降问题,问变压器应该怎么选择,变压器后带一个75KW电机,4个5.5KW电机,变压 灰铁250 多加锰铁能否解决缩松 强度低 硬度低 高炉冶炼铬铁的方法 一台200KW的电机 同样的负荷 用660V和1140V的电压电机线圈通过的电流一样大吗.电缆是400米 70平方毫米的我认为660和1140电机线圈通过的电流是同样大 可是为什么用660是电机温度有点高 用1140是 锰铁中所含的碳对终点钢水中的碳含量的影响是多少比如说 “高碳锰铁”中的碳含量为 7% .这个 7%中的7对钢水中的碳含量的影响是多少?如果冶炼 0.41% 含锰量为 1.5%的合金,1000千克中可产生 4. 高一数学正弦函数的图像与性质 寻一种的橡胶绝缘电缆线!电缆线能过的电压220V,电流150A!多股单芯的电缆线!隔离变压器变出来的是220V,再加个电阻箱,调一下电阻,150A不就出来了!要安全可靠,还得不能用硬线!麻烦! 用物理光学解释井底之蛙最好有图
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn