10个很棒的jQuery代码片段

图片预加载

做网站、成都网站建设,成都做网站公司-创新互联已向上1000家企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。

 
 
 

  
  
  
(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");
 
 
 

在新窗口打开链接 (target=”blank”)

 
 
 

  
  
  
$('a[@rel$='external']').click(function(){ 
  
  
  
     this.target = "_blank"; 
  
  
  
}); 
  
  
  

  
  
  
/* 
  
  
  
   Usage: 
  
  
  
   catswhocode.com
  
  
  
*/
 
 
 

当支持 JavaScript 时为 body 增加 class

 
 
 

  
  
  
/* 该代码只有1行，但是最简单的用来检测浏览器是否支持 JavaScript 的方法，如果支持 JavaScript 就在 body 元素增加一个 hasJS 的 class */
  
  
  
$('body').addClass('hasJS');
 
 
 

平滑滚动页面到某个锚点

 
 
 

  
  
  
$(document).ready(function() { 
  
  
  
    $("a.topLink").click(function() { 
  
  
  
        $("html, body").animate({ 
  
  
  
            scrollTop: $($(this).attr("href")).offset().top + "px"
  
  
  
        }, { 
  
  
  
            duration: 500, 
  
  
  
            easing: "swing"
  
  
  
        }); 
  
  
  
        return false; 
  
  
  
    }); 
  
  
  
});
 
 
 

鼠标滑动时的渐入和渐出

 
 
 

  
  
  
$(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 
  
  
  
    }); 
  
  
  
});
 
 
 

制作等高的列

 
 
 

  
  
  
var max_height = 0; 
  
  
  
$("div.col").each(function(){ 
  
  
  
    if ($(this).height() > max_height) { max_height = $(this).height(); } 
  
  
  
}); 
  
  
  
$("div.col").height(max_height);
 
 
 

在一些老的浏览器上启用 HTML5 的支持

 
 
 

  
  
  
(function(){ 
  
  
  
    if(!/*@cc_on!@*/0) 
  
  
  
        return; 
  
  
  
    var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])} 
  
  
  
})() 
  
  
  

  
  
  
//然后在head中引入该js 
  
  
  

 
 
 

测试浏览器是否支持某些 CSS3 属性

 
 
 

  
  
  
var supports = (function() { 
  
  
  
   var div = document.createElement('div'), 
  
  
  
      vendors = 'Khtml Ms O Moz Webkit'.split(' '), 
  
  
  
      len = vendors.length; 
  
  
  

  
  
  
   return function(prop) { 
  
  
  
      if ( prop in div.style ) return true; 
  
  
  

  
  
  
      prop = prop.replace(/^[a-z]/, function(val) { 
  
  
  
         return val.toUpperCase(); 
  
  
  
      }); 
  
  
  

  
  
  
      while(len--) { 
  
  
  
         if ( vendors[len] + prop in div.style ) { 
  
  
  
            // browser supports box-shadow. Do what you need. 
  
  
  
            // Or use a bang (!) to test if the browser doesn't. 
  
  
  
            return true; 
  
  
  
         } 
  
  
  
      } 
  
  
  
      return false; 
  
  
  
   }; 
  
  
  
})(); 
  
  
  

  
  
  
if ( supports('textShadow') ) { 
  
  
  
   document.documentElement.className += ' textShadow';
 
 
 

获取 URL 中传递的参数

 
 
 

  
  
  
$.urlParam = function(name){ 
  
  
  
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); 
  
  
  
    if (!results) { return 0; } 
  
  
  
    return results[1] || 0; 
  
  
  
}
 
 
 

禁用表单的回车键提交

 
 
 

  
  
  
$("#form").keypress(function(e) { 
  
  
  
  if (e.which == 13) { 
  
  
  
    return false; 
  
  
  
  } 
  
  
  
});
 
 
 

原文：http://www.oschina.net/code/snippet_12_7271

网页标题：10个很棒的jQuery代码片段
本文链接：http://www.stwzsj.com/qtweb/news34/12934.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联