实用jquery代码片段集合（上）

发布于，归属于jquery教程。 前3个座位已被强势霸占！ 共有431人围观    

加载google的jquery库
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

有利于加快加载速度（已经得到验证）。

修改图片src更新图片
  1. $(imageobj).attr('src', $(imageobj).attr('src') + '?' + Math.random() );

（这是很实用的技巧，曾经有人问明河，为什么他已经修改了图片的src，但图片没变化呢？原因在于缓存，给图片路径后加个随机数参数即可。

加载多张图片，判断加载完成状态
  1. var totalimages  = 10; 
  2. var loadedimages = 0; 
  3. $("<img/>").load(function() { 
  4.      ++loadedimages; 
  5.      if(loadedimages == totalimages){ 
  6.         //全部图片加载完成时..... 
  7.      } 
  8.  });
双击不选中文本
  1. var clearSelection =  function () { 
  2.      if(document.selection && document.selection.empty) { 
  3.          document.selection.empty(); 
  4.      } else if(window.getSelection) { 
  5.          var sel = window.getSelection(); 
  6.          sel.removeAllRanges(); 
  7.      } 
  8.  } 
  9.  
  10. $(element).bind('dblclick',function(event){ 
  11.      clearSelection(); 
  12.  });
对一个列表进行排序
  1. <ul> 
  2.  <li>cloud</li> 
  3.  <li>sun</li> 
  4.  <li>rain</li> 
  5.  <li>snow</li> 
  6. </ul
  1. var items = $('.to_order li').get(); 
  2.  
  3.  items.sort(function(a,b){ 
  4.      var keyA = $(a).text(); 
  5.      var keyB = $(b).text();     
  6.      if (keyA < keyB) return -1; 
  7.      if (keyA > keyB) return 1; 
  8.      return 0; 
  9.  }); 
  10.  var ul = $('.to_order'); 
  11. $.each(items, function(i, li){ 
  12.      ul.append(li); 
  13.  });

（中文无效）

绑定右击事件
  1. $(document).ready(function(){ 
  2.      $(document).bind("contextmenu",function(e){ 
  3.          return false; 
  4.      }); 
  5.  });
扩展jquery的对象选择器
  1. $.extend($.expr[':'], {  
  2.     //选择器名
  3.     moreThanAThousand : function (a){ 
  4.          return parseInt($(a).html()) > 1000; 
  5.     } 
  6.  }); 
  7. $(document).ready(function() { 
  8.      $('td:moreThanAThousand').css('background-color', '#ff0000'); 
  9.  });
检查对象是否存在
  1. if ($("#elementid").length) { 
  2.      //......
  3.  }
取消一个ajax请求
  1. var req = $.ajax({ 
  2.  type:     "POST", 
  3.  url:     "someurl", 
  4.  data:     "id=1", 
  5.  success: function(){ 
  6.  
  7.  } 
  8.  }); 
  9.  //取消ajax请求 
  10.  req.abort()
检查cookies是否可用
  1. $(document).ready(function() { 
  2.      var dt = new Date(); 
  3.      dt.setSeconds(dt.getSeconds() + 60); 
  4.      document.cookie = "cookietest=1; expires=" + dt.toGMTString(); 
  5.      var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; 
  6.      if(!cookiesEnabled){ 
  7.          //cookies不能用........ 
  8.      } 
  9.  });
获取当前元素在元素集内的索引值
  1. $("ul > li").click(function () { 
  2.      var index = $(this).prevAll().length; 
  3.  });

如果你用的是jquery1.4，明河推荐使用以下方法：

  1. $("ul > li").click(function () { 
  2.      var index = $(this).index(); 
  3.  });
让一个元素相对于屏幕居中
  1. jQuery.fn.center = function () { 
  2.      this.css("position","absolute"); 
  3.      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
  4.      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 
  5.      return this; 
  6.  }  
  7. $(element).center();

这个方法非常实用，明河严重推荐收藏

获取当前页面的URL
  1. $(document).ready(function() { 
  2.      var pathname = window.location.pathname; 
  3.  });

原文：http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

3个座位已被强势霸占！

  1. 咕嘟

    确实很实用。。。

  2. 孤夜狂狼

    没事过来转转　然后就收藏了三篇文章～
    博主费心了～ 谢谢啊～

    明河共影回复于 2010年08月02日 8:56

    谢谢支持！

同类