每個程序員都會的 35 個 jQuery 小技巧(3)

21. 驗證元素是否為空

This will allow you to check if an element is empty. 
 
$(document).ready(function() { 
  if ($('#id').html()) { 
   // do something 
   } 
}); 

22. 替換元素

$(document).ready(function() { 
   $('#id').replaceWith(' 
<DIV>I have been replaced</DIV> 
 
'); 
}); 

23. jQuery延時加載功能

$(document).ready(function() { 
   window.setTimeout(function() { 
     // do something 
   }, 1000); 
}); 

24. 移除單詞功能

$(document).ready(function() { 
   var el = $('#id'); 
   el.html(el.html().replace(/word/ig, "")); 
}); 

25. 驗證元素是否存在于jquery對象集合中

$(document).ready(function() { 
   if ($('#id').length) { 
  // do something 
  } 
}); 

26. 使整個DIV可點擊

$(document).ready(function() { 
    $("div").click(function(){ 
      //get the url from href attribute and launch the url 
      window.location=$(this).find("a").attr("href"); return false; 
    }); 
// how to use 
<DIV><A href="index.html">home</A></DIV> 
 
}); 

27. ID與Class之間轉(zhuǎn)換

當(dāng)改變Window大小時，在ID與Class之間切換

$(document).ready(function() { 
   function checkWindowSize() { 
    if ( $(window).width() > 1200 ) { 
        $('body').addClass('large'); 
    } 
    else { 
        $('body').removeClass('large'); 
    } 
   } 
$(window).resize(checkWindowSize); 
}); 

28. 克隆對象

$(document).ready(function() { 
   var cloned = $('#id').clone(); 
// how to use 
<DIV id=id></DIV> 
 
}); 

29. 使元素居屏幕中間位置

$(document).ready(function() { 
  jQuery.fn.center = function () { 
      this.css("position","absolute"); 
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 
      return this; 
  } 
  $("#id").center(); 
}); 

30. 寫自己的選擇器

$(document).ready(function() { 
   $.extend($.expr[':'], { 
       moreThen1000px: function(a) { 
           return $(a).width() > 1000; 
      } 
   }); 
  $('.box:moreThen1000px').click(function() { 
      // creating a simple js alert box 
      alert('The element that you have clicked is over 1000 pixels wide'); 
  }); 
}); 

31. 統(tǒng)計元素個數(shù)

$(document).ready(function() { 
   $("p").size(); 
}); 

32. 使用自己的 Bullets

$(document).ready(function() { 
   $("ul").addClass("Replaced"); 
   $("ul > li").prepend("? "); 
// how to use 
ul.Replaced { list-style : none; } 
}); 

33. 引用Google主機(jī)上的Jquery類庫

//Example 1 
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT> 
<SCRIPT type=text/javascript> 
google.load("jquery", "1.2.6"); 
google.setOnLoadCallback(function() { 
    // do something 
}); 
</SCRIPT><SCRIPT type=text/javascript src="http://ajax./ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT> 
 
// Example 2:(the best and fastest way) 
<SCRIPT type=text/javascript src="http://ajax./ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT> 

34. 禁用Jquery（動畫）效果

$(document).ready(function() { 
    jQuery.fx.off = true; 
}); 

35. 與其他Javascript類庫沖突解決方案

$(document).ready(function() { 
   var $jq = jQuery.noConflict(); 
   $jq('#id').show(); 
}); 

【編輯推薦】