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("class="lazy" data-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 class="lazy" data-src="http://www.google.com/jsapi"></SCRIPT>     <SCRIPT type=text/javascript>       google.load("jquery", "1.2.6");       google.setOnLoadCallback(function() {    // do something    });    </SCRIPT><SCRIPT class="lazy" data-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 class="lazy" data-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实用技巧有哪些”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!