10段实用的jQuery代码片段

 2011-12-01  

jQuery的到来给Javascript带来了新的活力，让人们可以更加方便快捷的使用javascript创建更加优秀的网页效果。这篇文章我们整理了十段非常实用的jQuery代码段，希望能给您的工作带来些方便。

图片预加载

在用户请求图片之前，提前将图片加载完成可以让网页交互更加友好，节省了用户的时间。所以我们可以提前加载好图片，待用户请求时将他们显示出来，下面的代码就实现了预加载：

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

→ 源码:?http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

将链接目的设置为”blank”

下面这段代码通过设置?rel="external"来启用新窗口打开。

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

/*
   Usage:
   <a href="http://www.catswhocode.com" rel="external">catswhocode.com</a>
*/

→ 源码:?http://snipplr.com/view/315/-jquery–target-blank-links/

如果浏览器支持javascript则给<body>添加个class

$('body').addClass('hasJS');

→ 源码:?http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets/

平滑的移动到某个锚点

jQuery因其能够帮助开发者轻松的实现优秀视觉效果而著称。一个简单但是非常好的效果就的平滑移动到锚点。下面的这段代码就实现了当一个有?topLink class的锚点被点击时页面平滑移动的效果。

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

→ 源码:?http://snipplr.com/view.php?codeview&id=26739

鼠标经过时淡入/淡出

另一个非常酷、同时也是客户端非常流行的效果是鼠标经过时的淡入/淡出效果。下面的效果就实现了鼠标经过时透明度渐变到100%，离开时渐变到60%

$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6);
    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0);
    },function(){
        $(this).fadeTo("slow", 0.6);
    });
});

→ 源码:?http://snipplr.com/view/18606/

让所有列高端相同

当开发一个以列为基础的网站是，经常需要让所有的列有同样的高度，这样显得会比较整齐舒服。下面的这段代码就计算出最高的列的高度，然后将所有列的高度设置成一致。

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

→ 源码:?http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

Enable HTML5 markup on older browsers让老版本的浏览器也支持HTML5

HTML是未来客户端的发展方向。然而不幸的是还有很多老版本的浏览器不支持他的新标签（比如：header、section）。下面这段代码将解决这个问题。

(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])}})()

最好的解决方案是将这段代码房贷一个js文件里然后嵌入到head标签里面。使用方法如下：

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

→ 源码:?http://remysharp.com/2009/01/07/html5-enabling-script/

测试浏览器是否支持某个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';}

→ 源码:?http://snipplr.com/view/44079

获得URL参数

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

→ 源码:?http://snipplr.com/view/26662

让回车在form表单里面失效。

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

→ 源码:?http://snipplr.com/view/10943/disable-enter-via-jquery/

0

收藏 收入专辑