10个很棒的JQuery代码片段_itx运行jquery代码的工具-优快云博客

1，图片预加载

function($){

var cache=[ ];

$.preLoadImages=function(){

var args_len=arguments.length;

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

var cacheIamge=document.createElement('img');

cacheImage.src=arguments[i];

cache.push(cacheImage);

}

JQuery.preLoadImage("image1.gif",''/path/to/image2.png');

}

2. [代码]在新窗口打开链接 (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*/

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

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

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

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

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

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

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

6. [代码]制作等高的列

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

7. [代码]在一些老的浏览器上启用 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]-->

8. [代码]测试浏览器是否支持某些 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';

9. [代码]获取 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}

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

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

2  if
(e.which == 13) {

3    return
false;

4  }

5});