jQuery 1.4實用技巧有哪些

這篇文章主要介紹了jQuery 1.4實用技巧有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

禁止右鍵點擊

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

隱藏搜索文本框文字

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

在新窗口中打開鏈接

$(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>

檢測瀏覽器

注: 在版本jQuery 1.4中，$.support 替換掉了$.browser 變量。

$(document).ready(function() {     // Target Firefox 2 and above        if ($.browser.mozilla && $.browser.version >= "1.8" ){         // do something         }     // Target Safari     if( $.browser.safari ){     // do something     }     // Target Chrome     if( $.browser.chrome){     // do something      }     // Target Camino     if( $.browser.camino){     // do something      }     // Target Opera     if( $.browser.opera){     // do something      }     // Target IE6 and below     if ($.browser.msie && $.browser.version <= 6 ){     // do something      }     // Target anything above IE6     if ($.browser.msie && $.browser.version > 6){     // do something     }     });

預加載圖片

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

頁面樣式切換

$(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 href="default.css" type=text/css rel=stylesheet>     // the links     <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>     <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>     <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>     });

列高度相同

如果使用了兩個CSS列，使用此種方式可以是兩列的高度相同。

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

動態控制頁面字體大小

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

返回頁面頂部功能

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

獲得鼠標指針XY值

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

驗證元素是否為空

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

替換元素

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

jQuery延時加載功能

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

移除單詞功能

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

驗證元素是否存在于jQuery對象集合中

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

使整個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>     });     ID與Class之間轉換當改變Window大小時，在ID與Class之間切換   $(document).ready(function() {         function checkWindowSize() {        if ( $(window).width() > 1200 ) {           $('body').addClass('large');         }        else {            $('body').removeClass('large');              }      }     $(window).resize(checkWindowSize);     });

克隆對象

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

使元素居屏幕中間位置

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

寫自己的選擇器

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

統計元素個數

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

使用自己的Bullets

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

引用Google主機上的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 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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>

禁用jQuery（動畫）效果

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

與其他JavaScript類庫沖突解決方案

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery 1.4實用技巧有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!