10个实用的jquey代码小片段-优快云博客

本文汇总了一系列实用的jQuery技巧，包括图片预加载、平滑滚动、等高列布局等，帮助开发者提高网页交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[代码] 图片预加载

01
(function($)
 {

02
  var cache
 = [];

03
  //
 Arguments are image paths relative to the current page.

04
  $.preLoadImages
 = function()
 {

05
    var args_len
 = arguments.length;

06
    for (var i
 = args_len; i--;) {

07
      var cacheImage
 = document.createElement('img');

08
      cacheImage.src
 = arguments[i];

09
      cache.push(cacheImage);

10
    }

11
  }

12
 
13
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

[代码] 在新窗口打开链接 (target=”blank”)

1
$('a[@rel$='external']').click(function(){

2
     this.target
 = "_blank";

3
});

4
 
5
/*

6
   Usage:

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

8
*/

[代码] 当支持 JavaScript 时为 body 增加 class

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



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

[代码] 平滑滚动页面到某个锚点

01
$(document).ready(function()
 {

02
    $("a.topLink").click(function()
 {

03
        $("html,
 body").animate({

04
            scrollTop:
 $($(this).attr("href")).offset().top
 + "px"

05
        },
 {

06
            duration:
 500,

07
            easing: "swing"

08
        });

09
        return false;

10
    });

11
});

[代码] 鼠标滑动时的渐入和渐出

1
$(document).ready(function(){

2
    $(".thumbs
 img").fadeTo("slow",
 0.6); //
 This sets the opacity of the thumbs to fade down to 60% when the page loads

3
 
4
    $(".thumbs
 img").hover(function(){

5
        $(this).fadeTo("slow",
 1.0); //
 This should set the opacity to 100% on hover

6
    },function(){

7
        $(this).fadeTo("slow",
 0.6); //
 This should set the opacity back to 60% on mouseout

8
    });

9
});

[代码] 制作等高的列

1
var max_height
 = 0;

2
$("div.col").each(function(){

3
    if ($(this).height()
 > max_height) { max_height = $(this).height();
 }

4
});

5
$("div.col").height(max_height);

[代码] 在一些老的浏览器上启用 HTML5 的支持

01
(function(){

02
    if(!/*@cc_on!@*/0)

03
        return;

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

05
})()

06
 
07
//然后在head中引入该js

08
<!--[if lt
 IE 9]>

09
<script
 src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

10
<![endif]-->

[代码] 测试浏览器是否支持某些 CSS3 属性

01
var supports
 = (function()
 {

02
   var div
 = document.createElement('div'),

03
      vendors
 = 'Khtml
 Ms O Moz Webkit'.split('
 '),

04
      len
 = vendors.length;

05
 
06
   return function(prop)
 {

07
      if (
 prop in div.style
 ) return true;

08
 
09
      prop
 = prop.replace(/^[a-z]/, function(val)
 {

10
         return val.toUpperCase();

11
      });

12
 
13
      while(len--)
 {

14
         if (
 vendors[len] + prop in div.style
 ) {

15
            //
 browser supports box-shadow. Do what you need.

16
            //
 Or use a bang (!) to test if the browser doesn't.

17
            return true;

18
         }

19
      }

20
      return false;

21
   };

22
})();

23
 
24
if (
 supports('textShadow')
 ) {

25
   document.documentElement.className
 += '
 textShadow';

[代码] 获取 URL 中传递的参数

1
$.urlParam
 = function(name){

2
    var results
 = new RegExp('[\\?&]' +
 name + '=([^&#]*)').exec(window.location.href);

3
    if (!results)
 { return 0;
 }

4
    return results[1]
 || 0;

5
}

[代码] 禁用表单的回车键提交

1
$("#form").keypress(function(e)
 {

2
  if (e.which
 == 13) {

3
    return false;

4
  }

5
});