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

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

jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用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. link
The 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);
}); 

本文收集的这15段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦。

时间: 2015-09-21

jquery实用代码片段集合

加载google的jquery库 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 有利于加快加载速度(已经得到验证). 修改图片src更新图片 $(imageobj).attr('src', $(imageobj).attr('src') + '?' + Math.ra

12个超实用的JQuery代码片段

本文收集了12段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦.下面就让我们一起来享受jQuery代码的魅力之处吧. 1. 导航菜单背景切换效果 在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景.这种效果实现的方式有很多种,下面是使用JQuery实现的一种方式: <ul id='nav'> <li>导航一</li> <li>导航二</li> <li>导航三&l

非常实用的12个jquery代码片段

jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了12段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦.下面就让我们一起来享受jQuery代码的魅力之处吧. 1. 导航菜单背景切换效果 在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景.这种效果实现的方式有很多种,下面是使用JQuery实现的一种方

一些实用的jQuery代码片段收集

下边这些jQuery片段只是很少的一部分,如果您在学习过程中也遇到过一些常用的jQuery代码,欢迎分享.下边就让我们看看这些有代码片段. 1.jQuery得到用户IP: 复制代码 代码如下: $.getJSON("http://jsonip.appspot.com?callback=?", function (data) { alert("Your ip: " + data.ip); }); 2.jQuery查看图片的宽度和高度: 复制代码 代码如下: var t

web前端开发JQuery常用实例代码片段(50个)

本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下

分享12个实用的jQuery代码片段

jQuery是一款优秀的JavaScript库,它在WEB开发者和网页设计师中非常出名,帮助网页设计师开发出很多有创意和漂亮的WEB页面. 本文主要分享了12个有用的jQuery技巧,具体内容如下 下面是我收集的一些小技巧,这些技巧将帮助你提高你网站布局和应用的创意性以及功能性. 一.在新窗口打开链接 用这个代码,你点击超文本链接时会在新窗口中打开,为用户带来更好的体验: $(document).ready(function() { //select all anchor tags that h

常用的几个JQuery代码片段

1. 导航菜单背景切换效果 在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景.这种效果实现的方式有很多种,下面是使用JQuery实现的一种方式: //注意:代码需要修饰完善 $('#nav').click(function(e) { // 要知道siblings的使用 $(e.target).addClass('on').siblings('.on').removeClass('on'); }); 2.反序访问JQuery对象里的元素 在某些场景下,我们可能需要反序访问

程序员必知35个jQuery 代码片段

jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果.本文将为你介绍一些jquery实用的技巧,希望可以帮助你更加高效地使用jQuery. 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });

18个非常棒的jQuery代码片段

1.jQuery实现的内链接平滑滚动 不需要使用太复杂的插件,只要使用下载这段代码即可实现基于内部链接的平滑滚动 $('a[href^="#"]').bind('click.smoothscroll',function (e) { e.preventDefault(); var anchor = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().t

JavaScript和JQuery实用代码片段(一)

(一)怎样用JQuery刷新一幅图片? 说明:我们都知道,当我们在请求一个资源(比如网页,图片等)的时候,如果该资源被缓存到浏览器了,那么请求返回的就是缓存的副本,不是我们希望获取的资源(该资源内容已经被更新了),此时最普遍的一个办法就是在请求的页面后面或者图片的src后面加上一个查询字符串"ran=" + Math.random(),这样就会请求到最新版本的资源啦! 代码: 复制代码 代码如下: $(imageObj).attr('src',$(imageObj).attr('src

【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)

本文实例总结了jQuery实用代码片段.分享给大家供大家参考,具体如下: //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { //保存当前文本框的值 var vdefault = this.value; $(this).focus(function () { if (this.value == vdefault) { this.value = "&q

分享javascript、jquery实用代码段

本文实例为大家简单分享javascript.jquery实用demo,供大家参考,具体内容如下 javascript判断H5页面离开 function onbeforeunloadFn(){ console.log('离开页面'); //...code } function showOnbeforeunload(flags){ if(flags){ document.body.onbeforeunload = onbeforeunloadFn; }else{ document.body.onbe

10个C#程序员经常用到的实用代码片段

1 读取操作系统和CLR的版本 OperatingSystem os = System.Environment.OSVersion; Console.WriteLine("Platform: {0}", os.Platform); Console.WriteLine("Service Pack: {0}", os.ServicePack); Console.WriteLine("Version: {0}", os.Version); Consol

必须收藏的php实用代码片段

在编写代码的时候有个神奇的工具总是好的!下面这里收集了 40+ PHP 代码片段,可以帮助你开发PHP 项目. 之前已经为大家分享了<必须收藏的23个php实用代码片段>. 这些PHP 片段对于PHP 初学者也非常有帮助,非常容易学习,让我们开始学习吧- 24. 从 PHP 数据创建 CSV 文件 function generateCsv($data, $delimiter = ',', $enclosure = '"') { $handle = fopen('php://temp'

php实用代码片段整理

本文整理归纳了php实用代码片段.分享给大家供大家参考,具体如下: 一 从网页中提取关键词 $meta = get_meta_tags('http://www.jb51.net/'); $keywords = $meta['keywords']; // Split keywords $keywords = explode(',', $keywords ); // Trim them $keywords = array_map( 'trim', $keywords ); // Remove emp

必须收藏的23个php实用代码片段

在编写代码的时候有个神奇的工具总是好的!下面这里收集了 40+ PHP 代码片段,可以帮助你开发 PHP 项目. 这些 PHP 片段对于 PHP 初学者也非常有帮助,非常容易学习,让我们开始学习吧- 1. 发送 SMS 在开发 Web 或者移动应用的时候,经常会遇到需要发送 SMS 给用户,或者因为登录原因,或者是为了发送信息.下面的 PHP 代码就实现了发送 SMS 的功能. 为了使用任何的语言发送 SMS,需要一个 SMS gateway.大部分的 SMS 会提供一个 API,这里是使用 M

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON with Padding.由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源.如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应

JavaScript的漂亮的代码片段

动态构建正则表达式 复制代码 代码如下: new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) ) 来自sizzle,动态构建正则时,这样做避免了字符转义. 更灵活和巧妙的数字补零 复制代码 代码如下: function prefixInteger(num, length) {    return (num / Math.pow(10, length)).toFixed(length).substr