10 个很棒的 jQuery 代码片段

最新推荐文章于 2025-12-05 08:37:05 发布

转载最新推荐文章于 2025-12-05 08:37:05 发布 · 364 阅读

文章标签：

#jquery #function #javascript #datagrid #browser #浏览器

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了前端开发中的图片预加载优化方法，通过自定义函数实现批量加载指定路径的图片，同时提供了在新窗口打开外部链接的功能，并在支持JavaScript的环境下为body元素增加hasJS类以检测浏览器特性。此外，还展示了平滑滚动至页面特定锚点、元素渐入渐出效果以及列元素高度统一的方法。文章最后讨论了在老浏览器上启用HTML5支持和测试CSS3属性的方法。

图片预加载

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 

13jQuery.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});

制作等高的列

1var 
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 属性

01var 
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 

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