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

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

求安全化危机!Uber研发生物识别技术、聘请前亚马逊运营 JavaScript社区开发者调查:服务端JS盛行 AngularJS使用者最多 去中心化、去中介化,微信商业化路径清晰了吗? 微信企业号认证简化了,你造吗? 专访瀚思安信联合创始人:大数据技术助力企业实现主动智能防御 挑选IBM Bluemix作为云平台的10大理由 10年技术积累成就极光压缩引擎,欧朋流量宝5.0面世 【图文实录】12月19日CTO俱乐部走进杭州 mlpack:可伸缩C++机器学习库 本地项目托管将死?类GitHub站点永存! 2014年讨论最多的编程语言:JavaScript称霸 移动Web应用UI框架大比拼:Ionic vs. Famo.us vs. F7 vs. OnsenUI 面包旅行CTO薛亮:做旅游与社交有机结合的先行者 盘点开发者最喜爱的Swift技巧 2017年,开发者还能从移动广告中收获什么? 《近匠》茄子快传,让设备更好地连接 面向移动应用程序的DevOps五大挑战和十个最佳实践 Ruby 2.2.0发布,支持回收Symbol类型对象 听UnitedStack、IBM、HP专家如何谈“OpenStack 存储”技术 专访POWER 8编程挑战赛选手孙冬冬:从C语言到人工智能、深度学习的技术演变 盘点2014:十家最酷的大数据创业公司 盘点2014:最受关注的十大云服务创业公司 基于Kubernetes构建Docker集群管理详解 漫画:编程语言学习曲线 彩云天气: 328万元大奖背后的故事 iOS开发的22个奇谲巧技 谁是最受欢迎IT企业?技术、薪酬、发展空间、创新能力大评比 Jolt Awards 2015最佳编程工具奖榜单揭晓,Cloud9 IDE众望所归! 展望2015:数据中心行业的十大预测 亚信CTO金亚东:传统企业向产业互联网转型的两条路径 微信评论功能开启将成净土还是地狱 高手来帮忙啊~ 看看java的魅力 如何通过自制程序的编辑框向现有一般应用程序编辑框传送内容? 窗口执行顺序问题,请多帮助,谢谢 如何自动取得server的日期和时间 怎样让文件指针指到文件末尾,必须skipline一行一行跳吗? 我想在菜单前添加图标,使用Bitmap属性但是为何只能载入*.bmp文件而不能使用*.ico文件,我只有*.ico的图标,请问该如何解决。 有新建一个文本文件并给其命名的函数吗,怎么用 我还真不懂呀? 这个COLTYPE是怎么用的呀?你说它怎么得到表中字段的类型呀? 有关存储器(ram,rom)的编址问题。以及32位或更多位芯片的问题。 一些汇编问题。想来问bcb的兄弟{bcb里好象有不少汇编高手} 救命:在安装了sco openserver之后,系统不能启动,先前安装的win98和win2k也不能。 请问如何进行URL译码??? 请问怎样截取一个string中的一段? 请问delphi做的exe最小可以到多少?怎么做? 我想请问一下WINGATE的具体怎样在WIN2000服务器版中进行设置。 ASP的同志们,能不能留一下QQ号码? 请问何处有破解ACCESS2000的程序或源代码呢? 请问要在TEdit.text组件文本串中找出当前光标在第几个字符上怎么办?谢谢! 请问关于dbImage控件的使用方法? 关于HDC及双缓冲的问题? xxxbird(*说你行,你就行,不行也行*),来领“我遇到几个怪问题。。。。。。”中的分 为什么ASP没法向SQL Server中写入数据?代码什么地方错了 大家帮忙找一下,找到我给50分 exe 捆绑机怎么做? 大家谈谈JSP的设计模式怎末了?我有个题目,设计好的大大有奖! 浏览器下的那个进度条是怎么弄出来的? C中的typedef struct和C++中的 struct有何区别? C中的typedef struct和C++中的 struct有 什么区别?谢谢 lastlove(本栏位广告招商中,欢迎投放!),jjdelphi(我真的不懂),jinesc(杂牌军)-(人民军队为人民) 开利息了 一个网页的原代码可以保存到字符串里吗? 有没有各种C++编译器都支持的字符串类型或字符串类? <@> 关于 ProcessMessages 一个想不如大家想,请各位帮忙想个主页的名字吧。 女友23岁,她会选择前途还是爱情?-----一个VB程序员的痛苦 如何实现应用程序与动态库通信??? ----myxfang----偶来贷款了!!!--- myxfang(大富翁银行~业务员~~),都给你了,我可把赌注都压到你身上了 我存钱,没人受理吗?银行业务员在哪? CMainFrame主框架是用来干什么的? myxfang(大富翁银行~业务员~~),我已经结账了,到哪里去取贷款? 怎么释放它? ----myxfang---我给手续费了,我的贷款呢??http://www.csdn.net/expert/topic/203/203903.shtm--- myxfang(大富翁银行~业务员~~),来拿我的骚扰费~ 老师!! 这个动态查询为何总出错? 大富翁银行生意兴隆!恭喜恭喜…… ~~~~myxfang给我们上了生动的一课~~~~ 我被黑了,谁来帮我? myxfang(大富翁银行~业务员~~),我存钱 各们老大,我下了一堆的PDF格式的电子书,用Acrobat reader打开的时候总是说有错,而且全部如此,无一例外,请问是不是我的acrobat reader有问题 myxfang(大富翁银行~业务员~~),我再存钱 圆的周长是25.12厘米,求圆的面积 求阴影部分的面积 单位:厘米 圆的周长是25.12厘米 如右图所示,圆的周长是6.28厘米,圆的面积和长方形的面积相等.阴影部分的面积是多少平方厘米?周长? 一个小圆的半径是6厘米,一个大圆的直径是8厘米,大圆和小圆的面积比是: 下图圆的周长是12.56厘米,圆和长方形面积相等,求长方形的场图是这样的:一个圆的4分之1是长方形的一部分 圆的周长、面积的计算公式?圆柱体、圆椎体的体积计算公式? 小圆的半径是3厘米,大圆的直径是8厘米,大圆和小圆的面积的最简整数比是( 一个圆与一个长方形面积相等,圆的周长是18.84厘米,长方形长10厘米,宽多少厘米? 圆的周长和面积计算公式. 在周长是48厘米的正方形内画一个圆,这个圆的周长是多少厘米,面积是多少平方厘米? 一个圆与一个长方形面积相等已知圆的周长是18.84厘米长方形的长是6厘米 长方形的宽是多少 圆的周长和面积的计算公式分别是什么? 在周长是12厘米的正方形内画一个最大的圆,圆的周长是多少厘米? 一个圆儿的面积与一个长方形的面积相等,圆的周长是18.84厘米,长方形的长是六厘米,宽是多少? 圆的周长面积的公式是什么? 如下图,圆的周长是50.24厘米,圆的面积与长方形的面积相等,求阴影部分的面积. 一个圆与一个长方形的面积相等,圆周长是18.84厘米,长方形长6厘米,宽是多少厘米? 关于圆的周长及面积的公式 图中圆的周长是25.12cm,BC=10cm 阴影部分的面积是( ) 见右下图,圆的周长是18.84厘米,圆与长方形的面积相等.长方形的长和宽各是多少? 圆的周长公式和面积公式一定要有周长和面积公式,一样不能少哈~要把字母换成字 图中圆的周长是25.12cm,圆的面积正好等于长方形oabc的面积的2倍.求阴影部分的面积 一个圆与一个长方形的面积相等.圆的周长是37.68厘米.长方形的宽是9厘米,长是多少? 图中圆的周长是18.84厘米,圆面积与长方形面积相等,求图中阴影部分的面积.(要简洁) 如图,圆的面积与长方体的面积相等,圆的周长是25.12cm,求阴影部分的周长 一个圆的周长是37.68厘米,面积是多少 圆的周长是18.84cm,求阴影部分的面积.必采! 图中的4个圆的周长都是37.68厘米,求阴影部分的面积. 一个圆环的外圆周长是50.24厘米,内圆的周长是37.68厘米,这个圆环的面积是多少平方米? 已知三个等圆的周长是18.84cm,求阴影部分的面积. 如图长方形与圆的面积相等,圆的周长是37.68CM,求阴影部分的面积是多少.π取3.14 长方形的面积与圆的面积相等(如图),已知圆的周长是37.68平方分米,长方形的宽是多少分米?如图 如图,已知圆的周长是18.84cm,且两条直径互相垂直,求阴影部分面积. 如图,圆的周长是31.4厘米,求阴影部分面积.阴影部分面积是那梯形.那梯形的下底是8. 一个圆和一个长方形的面积相等,圆的周长是37.68cm,长方形的宽是9cm,长是多少 下图中圆的周长是20厘米,如果圆的面积和长方形的面积相等,计算涂色部分的周长? 图中四个等圆的周长都是50.24cm,求阴影部分的面积?(6cm不是本题的条件) 下图中长方形和圆的面积相等,圆的周长是25.12厘米,阴影部分的面积是多少平方厘米?周长呢 如图,长方形的面积与圆的面积相等,圆的周长是20厘米,英语部分的周长是多少 已知下图中圆的周长是12.56厘米,求阴影部分的面积. 下图中长方形和圆的面积相等,圆的周长是25.12厘米,阴影部分的面积是多少平方厘米? 一个圆的直径是10厘米,他的面积是()平方厘米?已知圆的周长是18.84厘米,它的面积是()平方厘米?一个铁桶底面是圆形,底面直径是8分米,它的周长(),他的占地面积()?一个圆环的外直径 ` 已知下图三角形的面积是16.28平方厘米.圆的周长都是12.56厘米,求阴影部分的面积?已知下图三角形的` 已知下图三角形的面积是16.28平方厘米.圆的周长都是12.56厘米,求阴影部分的面积? 已知下 右图中圆的周长是二十五点一二厘米,圆的面积正好等于长方形OABC面积的二倍,求阴影部分的面积. ( ):5=0.6=( )分之6=( )÷120=( )% 一个圆的周长是18.84厘米,这个圆的面积是( )平方厘米( ):5=0.6=( )分之6=( )÷120=( )%一个圆的周长是18.84厘米,这个圆的面积是( )平方厘米.把圆分成若干等 下图中,圆的周长是12.56厘米,圆的周长等于长方形的长,求阴影部分的面积 长方形和圆的周长相等,圆周长是31.4厘米,长方形的宽和长的比是1:4,长方形的面积比圆的面积少多少?过程详细 清楚^这个符号能不能用语言来表达一下,本人不太清楚 请看清楚【问题补充 一个圆的周长是18.84分米,这个圆的面积是( ). 两个圆的周长之和是94.2厘米,已知大圆半径与小圆半径的比是4∶1.这两个圆的面积各是多少平方厘米? 如图,三个等圆的周长都是12.56,那么阴影部分的面积是多少平方厘米 有一个圆与长方形的面积相等,圆的周长是12.56厘米,长方形的长是4厘米,宽是多少厘米? 一个圆的周长是94.2厘米,半径增加1厘米,这个圆的面积增加了多少平方厘米? 已知三个圆的周长都是12.56分米,并且圆心都是三角形的顶点,请你求出阴影部分的面积 圆的周长是25.12厘米,圆的面积正好和长方形的面积相等,长方形的长是多少厘米 甲,乙两个圆的周长比是2比3,其中一个圆的面积是12平方厘米,另一个圆的面积可能是多少,也可能是多少? 三角形面积是16.28平方厘米,圆的周长12.56厘米,求阴影部分面积 右图中圆的周长是18.84cm,圆的面积与长方形的面积正好相等则图中阴影部分的面积是多少平方厘米 甲乙两圆的周长比是3:4,其中一个圆的面积是15平方厘米,另一个圆的面积可能是( ),也可能是( ) 圆的周长是25.12厘米,求正方形内阴影部分面积 右图中圆的周长是18.84厘米,圆的面积与长方形的面积正好相等,则图中阴影部分的面积是多少平方厘米?阴影部分的周长是多少厘米?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn