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

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

开发者不容错过的12款开源JavaScript库 搭载FusionCube,HANA内存计算助力实时运营 叫板Google,VMware15亿美元收购AirWatch强势布局物联网 2014年IT企业招聘调查报告:外资企业招聘规模偏大、技术人员比重高 小机器人Ozobot:Maybe,我也有禅意 Google 4亿美元收购人工智能初创公司DeepMind 加入初创企业前,自问四个问题 King.com维权 上演“贼喊捉贼” 淘宝:HBase Bulkload bug修复及patch提交 Google的“机器人情结”:两次合计36亿美元的人工智能收购 挑战谷歌、抢占新兴市场,百度进军泰国、巴西和埃及市场 《近匠》第8期:Unity——不再仅仅是游戏引擎 Colours:移动应用的开源“美颜相机” 微信红包活动:用户疯狂中的腾讯“阴谋” 预测2014年最热门的IT职位及年薪 智能手机有隐私?Facebook可阅读Android用户的短信内容 苹果2014年Q1财报:iPhone、iPad 销量创纪录 3D打印:鞋垫也玩私人订制 与Google Glass抗衡,三星将推Galaxy Glass 进军移动?任天堂欲推iOS、Android版超级玛丽 回顾2013:云计算的夏天 微软最终加入OCP阵营,开源其云服务器设计 Docker:集装箱式“运输”在软件上的实现 《近匠》第09期:ShareSDK——专注社交分享工具 苹果车载iOS系统iOS in the Car界面被曝光 支撑过万亿音乐事件的数据分析系统 Facebook运维内幕曝光:一人管理2万台服务器 《近匠》第10期:友盟——开发服务平台化 LinkedIn耗资1.2亿收购数据驱动招聘服务公司Bright 谷歌推视频会议硬件产品Chromebox 基于Chrome OS 文件上传组件导致Apache DoS安全漏洞 有没有人装过MINIX啊 为什么我在查询分析器里执行时,没有时间限制,而在控制台里用同样的代码建一个试图或写在存储过程里都会超时呢········· 中秋快乐!!!!!!!!!大家进来看看,小弟有些问题。 网站运行一会儿IIS自动不运行了 什么是SCSI卡设备呢?有何作用? 未来的软件架构和技术 哪里有VB好界面下啊,谢谢 推荐给希望了解应用程序开发全过程的“初学者”一本书!!!!!!!!! 过节了!谨以些分献给坚守在灌水第一线的朋友们~~(一) 未来的软件架构和技术 zalyer接帖 过节了!谨以些分献给坚守在灌水第一线的朋友们~~(二) 数据库保存图片的问题 js赋值后提交,怎么在servlet中value 为空?? SendMessage参数问题, 过节了!谨以些分献给坚守在灌水第一线的朋友们~(三) 未来的软件架构和技术 ▁▂▃▄▅学ASP一个月了,现在学SQL SERVER,散分100,只为交友!▅▄▃▂▁ 大家好 ! 中秋快乐 顺便提个问题 ? 在线等....顶也给分拉...Explorer执行了非法操作该窗口即将关闭? 过节了!谨以些分献给坚守在灌水第一线的朋友们~(四) 过节了!谨以些分献给坚守在灌水第一线的朋友们~(五) excel中数据透视表? 了解:今年高程考试有没有新增内容,因为去年就新增了CMM、C++、OA办公自动化软件开发等知识,事先也没有通知各位考生。 绝对好文---------------人力资源“总奸”的自白-------ZT 中秋检举 一个恶意网站! 用PHP上传文件到LINUX服务器,结果文件用FTP软件删不掉 有做网格控件经验的请进 请教一个数据库的小问题 各位高手帮帮我! 高手来帮忙!!! 菜鸟提问:怎样从HBITMAP获得BMP的尺寸?(SDK) 请帮忙。 请问一个关于photoshop的问题,多谢指教100分 vb excel 关于MFC多文档在何处放置自已的初始化文档的代码? 今年又是一个人过中秋,终于想找个GF了! 电影画面倒置是怎么回事? 如何将pbyte指向的byte数据传递给byte数组或char等 送分 为中秋节还工作在自己岗位上的朋友散分! 送分 cgi---這裡有多少個寫法?? 送分 gcc编译好的程序怎么运行阿? 关于多文档的问题:如何固定视窗大小? 替换字符串 初学VC的困惑——什么是标准C?? 一个小数,如何确定小数点的位数? 菜单乱码,求救! 怎样调用delphi编的DLL中的函数 长方形的长缩短4厘米,就成一个正方形,正方形的面积比原来长方形的面积少36平方厘米,原来长方形的宽是多少?具体怎么计算呢? 英语翻译同上.视频地址:http://tieba.baidu.com/hilary%20duff/shipin/play/7f19e03447bdb6ff4c2c25b5thanks so much@@@@@ 把二次函数y=-x²的图像沿轴向左平移3个单位后,再向上平移2个单位,得到的图像解析式是? 把二次函数y=-x^2的图象沿x轴想左平移3个单位后,再向上平移2个单位,得到的图象的解析式是A.y=-x^2+6x-7 B.y=-x^2+6-11 C.y=-x^2-6x-7 D.y=-x^2-6x-11 古诗: 随风直到夜郎西的前一句是什么 二次函数y=xx+bx+c的图像沿x轴向左平移2个单位,再沿y轴向上平移3个单位,得到函数y=xx-2x+1则b与c分别等于A 6,4 B-8,4 C -6 D-8,-14 sore 为什么一只鸟被打了好几枪还在天上飞? 木质防火门门框连接件间的间距是多少?以及转角处的距离?哪个规范上面能查到?请知道的朋友快回答噢. 请列出10个左右结构相同的字 试分析人的行为过程?激励有何作用? 德国锁定美情报部门窃听站位置 位于使印度一客车爆炸起火44人死 司机清洁法国多名知识分子请愿维护嫖妓权 被称1990至2010年北半球平均气温或全球发展中国家每年新增200万名15研究:男性关注女性身材多于面部长相(伊拉克向美国请求军事援助 对抗“基地巴黎举办巧克力展 巧克力时装秀当揭幕9成入驻开城韩企难以正常运转 客户丢温州中院首倡“低碳诉讼” 接收电子版黄坤明辞去杭州市人大常委会主任职务家乡的鱼游到了北京坚决遏制车展低俗之风男子患癌花光积蓄后起抢劫念头 好友帮不停车给补贴,市民做给政府看足协杯颁奖典礼定在南京举行 国足主帅李鸿阶:融入“一带一路” 福州要打造费德勒确认出战戴维斯杯决赛 首战法国建国后哪位中共高层去世毛泽东曾亲自登物业男与多名业主妻子有染 凌晨与人妻昆明某校高一学生课堂猝死 家属堵了学研究人员发现:傣味包烧常用的柊叶和粽逆天魔镜无敌铁军魔导圣传重生的淡青春血荐轩辕灵珠逆玄天穹宇古武重临回到明朝办报纸威势滔天龙珠之布欧开明禅寺旅游鹰嘴岩旅游东方文化园旅游世纪广场旅游三台梦迹旅游蝴蝶谷旅游黎村苗寨旅游红叶谷旅游石泉老街旅游水磨镇旅游大政殿旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘