26 個 jQuery提示

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.

1. 禁用右鍵點擊（Disable right-click）

$(document).ready(function(){    $(document).bind("contextmenu",function(e){        return false;    });});

2. 禁用搜尋文字框（Disappearing search field text）

$(document).ready(function() {$("input.text1").val("Enter your search text here");   textFill($('input.text1'));});function textFill(input){ //input focus text function var originalvalue = input.val(); input.focus( function(){  if( $.trim(input.val()) == originalvalue ){ input.val(''); } }); input.blur( function(){  if( $.trim(input.val()) == '' ){ input.val(originalvalue); } });}

3. 新視窗開啟連結（Opening links in a new window）

$(document).ready(function() {   //Example 1: Every link will open in a new window   $('a[href^="http://"]').attr("target", "_blank");   //Example 2: Links with the rel="external" attribute will only open in a new window   $('a[@rel$='external']').click(function(){      this.target = "_blank";   });});// how to use<a href="http://www.opensourcehunter.com" rel="external">open link</a>

4. 檢測瀏覽器（Detect browser）

$(document).ready(function() {// Target Firefox 2 and aboveif ($.browser.mozilla && $.browser.version >= "1.8" ){// do something}// Target Safariif( $.browser.safari ){// do something}// Target Chromeif( $.browser.chrome){// do something}// Target Caminoif( $.browser.camino){// do something}// Target Operaif( $.browser.opera){// do something}// Target IE6 and belowif ($.browser.msie && $.browser.version <= 6 ){// do something}// Target anything above IE6if ($.browser.msie && $.browser.version > 6){// do something}});

5. 預先載入圖片（Preloading images）

$(document).ready(function() {jQuery.preloadImages = function(){  for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]);  }}// how to use$.preloadImages("image1.jpg");});</arguments.length;>

6. 樣式篩選（CSS Style switcher）

$(document).ready(function() {$("a.Styleswitcher").click(function() {//swicth the LINK REL attribute with the value in A REL attribute$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));});// how to use// place this in your header<link rel="stylesheet" href="default.css" type="text/css">// the links<a href="#" class="Styleswitcher" rel="default.css">Default Theme</a><a href="#" class="Styleswitcher" rel="red.css">Red Theme</a><a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>});

7. 列高度相同（Columns of equal height）

$(document).ready(function() {function equalHeight(group) {    tallest = 0;    group.each(function() {        thisHeight = $(this).height();        if(thisHeight > tallest) {            tallest = thisHeight;        }    });    group.height(tallest);}// how to use$(document).ready(function() {    equalHeight($(".left"));    equalHeight($(".right"));});});

8. 字型大小調整（Font resizing）

$(document).ready(function() {  // Reset the font size(back to default)  var originalFontSize = $('html').css('font-size');    $(".resetFont").click(function(){    $('html').css('font-size', originalFontSize);  });  // Increase the font size(bigger font0  $(".increaseFont").click(function(){    var currentFontSize = $('html').css('font-size');    var currentFontSizeNum = parseFloat(currentFontSize, 10);    var newFontSize = currentFontSizeNum*1.2;    $('html').css('font-size', newFontSize);    return false;  });  // Decrease the font size(smaller font)  $(".decreaseFont").click(function(){    var currentFontSize = $('html').css('font-size');    var currentFontSizeNum = parseFloat(currentFontSize, 10);    var newFontSize = currentFontSizeNum*0.8;    $('html').css('font-size', newFontSize);    return false;  });});

9. 返回頁面頂部（Smooth(animated) page scroll）

$(document).ready(function() {$('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {   var $target = $(this.hash);   $target = $target.length && $target   || $('[name=' + this.hash.slice(1) +']');   if ($target.length) {  var targetOffset = $target.offset().top;  $('html,body')  .animate({scrollTop: targetOffset}, 900);    return false;   }  }  });// how to use// place this where you want to scroll to<a name="top"></a>// the link<a href="#top">go to top</a>});

11. 擷取滑鼠的xy座標（Get the mouse cursor x and y axis）

$(document).ready(function() {   $().mousemove(function(e){     //display the x and y axis values inside the div with the id XY    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);  });// how to use<div id="XY"></div>});

12. 驗證元素是否為空白（Verify if an Element is empty）

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

13. 替換元素（Replace a element）

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

14. 消極式載入（jQuery timer callback functions）

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

15. 移除單詞（Remove a word）

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

16. 驗證元素是否存在（Verify that an element exists in jQuery）

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

17. 使整個DIV可點擊（Make the entire DIV clickable）

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

18. id和class切換（Switch between classes or id’s when resizing the window）

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

19. 複製對象（Clone a object）

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

20. 使元素置中螢幕（Center an element on the screen）

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

21. 自訂選取器（Write our own selector）

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

22. 統計元素個數（Count a element）

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

23. 自訂Bullets（Use Your Own Bullets）

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

24. 引用google分發的jQuery（Let Google host jQuery for you）

//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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> // Example 2:(the best and fastest way)<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

25. 禁用jQuery動畫（Disable jQuery animations）

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

26. 防止不相容衝突（No conflict-mode）

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

jquery 速查表：

參考推薦：
jQuery
jQuery UI
14 days of jQuery
Learning jQuery
Cheatsheet jQuery 1.1.3
Improve your jQuery – 25 excellent tips