当前访客身份:游客 [ 登录 | 加入开源中国 ]

代码分享

当前位置:
代码分享 » JavaScript  » 网页设计与交互
红薯

10 个很棒的 jQuery 代码片段

红薯 发布于 2011年11月23日 7时, 56评/32423阅
分享到: 
收藏 +0
1
http://www.catswhocode.com/blog/10-awesome-jquery-snippets
标签: jQuery

代码片段(10) [全屏查看所有代码]

1. [代码]图片预加载     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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

2. [代码]在新窗口打开链接 (target=”blank”)     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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

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

3. [代码]当支持 JavaScript 时为 body 增加 class     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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

4. [代码]平滑滚动页面到某个锚点     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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

5. [代码]鼠标滑动时的渐入和渐出     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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

6. [代码]制作等高的列     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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

7. [代码]在一些老的浏览器上启用 HTML5 的支持     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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

8. [代码]测试浏览器是否支持某些 CSS3 属性     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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

9. [代码]获取 URL 中传递的参数     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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

10. [代码]禁用表单的回车键提交     跳至 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [全屏预览]

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


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(56)

  • 1楼:李惟 发表于 2011-11-23 08:22 回复此评论
    (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");

    • 这段代码是将图片添加到一个数组中,而没有添加到DOM中
    • 这段代码只是添加了图片,并没有实现去“加载”,以及判断是否加载完成
    所以得到两个结论:
    1. 这个代码实际没有用
    2. 这个代码谈不上加载图片,最多算是数组添加IMG
  • 2楼:qingtian16265 发表于 2011-11-23 09:06 回复此评论

    引用来自“李惟”的评论

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

    • 这段代码是将图片添加到一个数组中,而没有添加到DOM中
    • 这段代码只是添加了图片,并没有实现去“加载”,以及判断是否加载完成
    所以得到两个结论:
    1. 这个代码实际没有用
    2. 这个代码谈不上加载图片,最多算是数组添加IMG
    有没有真正实现预加载,可以直接将这段代码放到一个页面里,然后访问此页面,看看控制台里的资源里是否已经加载了这些需要的图片就知道了~~~
  • 3楼:无忌 发表于 2011-11-23 09:06 回复此评论

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

    这个不错
  • 4楼:北落 发表于 2011-11-23 09:07 回复此评论
    (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
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    这个才是最牛B的

  • 5楼:寒武纪 发表于 2011-11-23 09:17 回复此评论
    好代码
  • 6楼:谦谦君子 发表于 2011-11-23 09:36 回复此评论

    引用来自“李惟”的评论

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

    • 这段代码是将图片添加到一个数组中,而没有添加到DOM中
    • 这段代码只是添加了图片,并没有实现去“加载”,以及判断是否加载完成
    所以得到两个结论:
    1. 这个代码实际没有用
    2. 这个代码谈不上加载图片,最多算是数组添加IMG
    cacheImage.src = arguments[i];
    执行这句的时候就会去下载图片了啊。。。。
  • 7楼:ousinka 发表于 2011-11-23 09:42 回复此评论
    html5支持,强悍。
  • 8楼:dedenj 发表于 2011-11-23 09:54 回复此评论

    引用来自“李惟”的评论

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

    • 这段代码是将图片添加到一个数组中,而没有添加到DOM中
    • 这段代码只是添加了图片,并没有实现去“加载”,以及判断是否加载完成
    所以得到两个结论:
    1. 这个代码实际没有用
    2. 这个代码谈不上加载图片,最多算是数组添加IMG
    亲测过了,resource里已加载
    (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("g1.gif", "g2.gif");
  • 9楼:静风流云 发表于 2011-11-23 12:33 回复此评论
    红薯老大发帖总能引来这么多男人围观和议论
  • 10楼:小银 发表于 2011-11-23 14:20 回复此评论
    mark一下。。有待吸收
  • 11楼:深爱着你们 发表于 2011-11-23 15:36 回复此评论
    好东西呀,以后多来淘一下    
  • 12楼:aforbe 发表于 2011-11-23 16:40 回复此评论

    引用来自“李惟”的评论

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

    • 这段代码是将图片添加到一个数组中,而没有添加到DOM中
    • 这段代码只是添加了图片,并没有实现去“加载”,以及判断是否加载完成
    所以得到两个结论:
    1. 这个代码实际没有用
    2. 这个代码谈不上加载图片,最多算是数组添加IMG
    - -! 设置src的时候就会去加载,为什么不自己试试呢?
  • 13楼:feng157aaa 发表于 2011-11-23 18:09 回复此评论
    围观中。。。。。。。。。
  • 14楼:mako 发表于 2011-11-23 20:26 回复此评论
    继续围观,不知道预加载那个怎么用
  • 15楼:Erasin 发表于 2011-11-24 08:44 回复此评论
    围观中。。。继续
  • 16楼:Holt_Vong 发表于 2011-11-24 19:00 回复此评论

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

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

    为什么不直接写target?

  • 17楼:javadeveloper 发表于 2011-11-24 21:03 回复此评论
    mark
  • 18楼:javadeveloper 发表于 2011-11-24 21:03 回复此评论
    mark
  • 19楼:xinyidt 发表于 2011-11-25 15:06 回复此评论
    支持一下!虽然没看明白
  • 20楼:答复哈 发表于 2011-11-25 16:27 回复此评论
    mark
开源从代码分享开始 分享代码