www.99.uuu.cum:jQuery 1.4实用技巧大放送

来源：百度文库 编辑：偶看新闻 时间：2024/04/28 01:39:03

jQuery 1.4给开发者带来了很多值得兴奋的新特性，同时使用jQuery的人也越来越多，为了方便大家对jQuery的使用，下面列出了一些jQuery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片等等。具体如下：

禁止右键点击

        
  1. $(document).ready(function(){         
  2. $(document).bind("contextmenu",function(e){         
  3.    return false;         
  4.   });         
  5. });   

隐藏搜索文本框文字

        
  1. $(document).ready(function() {         
  2. $("input.text1").val("Enter your search text here");         
  3.    textFill($('input.text1'));         
  4. });         
  5. function textFill(input){ //input focus text function         
  6.    var originalvalue = input.val();         
  7.    input.focus( function(){         
  8.      
  9. if( $.trim(input.val()) == originalvalue ){ input.val(''); }         
  10. });         
  11.      
  12. input.blur( function(){         
  13.     if( $.trim(input.val()) == '' ){ input.val(originalvalue); }         
  14. });         
  15. }    

在新窗口中打开链接

        
  1. $(document).ready(function() {         
  2. //Example 1: Every link will open in a new window         
  3. $('a[href^="http://"]').attr("target", "_blank");         
  4. //Example 2: Links with the rel="external" attribute will only open in a new window         
  5. $('a[@rel$='external']').click(function(){         
  6.      this.target = "_blank";         
  7. });         
  8.      
  9. });         
  10. // how to use         
  11. open link 

检测浏览器

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

        
  1. $(document).ready(function() {         
  2. // Target Firefox 2 and above         
  3.    if ($.browser.mozilla && $.browser.version >= "1.8" ){         
  4.     // do something         
  5.      
  6.    }         
  7. // Target Safari         
  8. if( $.browser.safari ){         
  9. // do something         
  10. }         
  11. // Target Chrome         
  12. if( $.browser.chrome){         
  13. // do something         
  14.      
  15. }         
  16. // Target Camino         
  17. if( $.browser.camino){         
  18. // do something         
  19.      
  20. }         
  21. // Target Opera         
  22. if( $.browser.opera){         
  23. // do something         
  24.      
  25. }         
  26. // Target IE6 and below         
  27. if ($.browser.msie && $.browser.version <= 6 ){         
  28. // do something         
  29.      
  30. }         
  31. // Target anything above IE6         
  32. if ($.browser.msie && $.browser.version > 6){         
  33. // do something         
  34. }         
  35. });   

预加载图片

        
  1. $(document).ready(function() {         
  2.      
  3.   jQuery.preloadImages = function()         
  4.   {         
  5.      for(var i = 0; i").attr("src", arguments[i]);        
  6.      
  7.   }        
  8. };        
  9. // how to use        
  10. $.preloadImages("image1.jpg");         
  11. });   

页面样式切换

        
  1. $(document).ready(function() {         
  2.      
  3. $("a.Styleswitcher").click(function() {         
  4.  //swicth the LINK REL attribute with the value in A REL attribute         
  5. $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));         
  6.      
  7.   });         
  8.      
  9. // how to use         
  10. // place this in your header         
  11.      
  12.          
  13. // the links         
  14. Default Theme         
  15. Red Theme         
  16. Blue Theme         
  17. });   
 

列高度相同

如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

        
  1. $(document).ready(function() {         
  2.   function equalHeight(group) {         
  3.   tallest = 0;         
  4.   group.each(function() {         
  5.      
  6.   thisHeight = $(this).height();         
  7.      
  8.   if(thisHeight > tallest) {         
  9.      
  10.      tallest = thisHeight;         
  11.      
  12.   }         
  13.      
  14. });         
  15.      
  16. group.height(tallest);         
  17. }         
  18.  // how to use         
  19.  $(document).ready(function() {         
  20.      
  21.    equalHeight($(".left"));         
  22.      
  23.    equalHeight($(".right"));         
  24.      
  25.   });         
  26.      
  27. });   

动态控制页面字体大小

        
  1. $(document).ready(function() {         
  2.      
  3.   // Reset the font size(back to default)         
  4.   var originalFontSize = $('html').css('font-size');         
  5.      
  6.   $(".resetFont").click(function(){         
  7.   $('html').css('font-size', originalFontSize);         
  8.      
  9. });         
  10.      
  11.   // Increase the font size(bigger font0         
  12.   $(".increaseFont").click(function(){         
  13.      
  14. var currentFontSize = $('html').css('font-size');         
  15. var currentFontSizeNum = parseFloat(currentFontSize, 10);         
  16. var newFontSize = currentFontSizeNum*1.2;         
  17.      
  18. $('html').css('font-size', newFontSize);         
  19.      
  20.    return false;         
  21.      
  22. });         
  23.      
  24. // Decrease the font size(smaller font)         
  25. $(".decreaseFont").click(function(){         
  26.      
  27. var currentFontSize = $('html').css('font-size');         
  28. var currentFontSizeNum = parseFloat(currentFontSize, 10);         
  29. var newFontSize = currentFontSizeNum*0.8;         
  30.      
  31. $('html').css('font-size', newFontSize);         
  32.   return false;         
  33.   });         
  34. });   

返回页面顶部功能

        
  1. $(document).ready(function() {         
  2. $('a[href*=#]').click(function() {         
  3.    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')         
  4.    && location.hostname == this.hostname) {         
  5.    var $target = $(this.hash);         
  6. $target = $target.length && $target         
  7.   || $('[name=' + this.hash.slice(1) +']');         
  8.   if ($target.length) {         
  9.      
  10. var targetOffset = $target.offset().top;         
  11.      
  12. $('html,body')         
  13.   .animate({scrollTop: targetOffset}, 900);         
  14.   return false;         
  15. }         
  16.      
  17. }         
  18. });         
  19.      
  20. // how to use         
  21. // place this where you want to scroll to         
  22.      
  23.        
  24.         
  25. // the link         
  26. go to top         
  27. });   

获得鼠标指针XY值

        
  1.    $(document).ready(function() {         
  2.    $().mousemove(function(e){         
  3.      //display the x and y axis values inside the div with the id XY         
  4.    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);         
  5.      
  6. });         
  7.      
  8. // how to use         
  9.  
     
  • });   

    • 验证元素是否为空

          
    1.   $(document).ready(function() {         
    2.     if ($('#id').html()) {         
    3.     // do something         
    4.   }         
    5. });   

    替换元素

    1. $(document).ready(function() {     
    2. $('#id').replaceWith('    
    3.   
      I have been replaced
          
    4.   );     
    5. });   
    jQuery延时加载功能
          
    1. $(document).ready(function() {         
    2.      
    3.     window.setTimeout(function() {         
    4.      
    5.     // do something         
    6.      
    7.      }, 1000);         
    8.      
    9. });   
    移除单词功能
          
    1. $(document).ready(function() {         
    2.      
    3.    var el = $('#id');         
    4.      
    5.    el.html(el.html().replace(/word/ig, ""));         
    6.      
    7. });   
    验证元素是否存在于jQuery对象集合中
          
    1. $(document).ready(function() {         
    2.      
    3.    if ($('#id').length) {         
    4.      
    5.    // do something         
    6.      
    7. }         
    8. });   
    使整个DIV可点击
          
    1. $(document).ready(function() {         
    2.      
    3.   $("div").click(function(){         
    4.      
    5.   //get the url from href attribute and launch the url         
    6.      
    7.      window.location=$(this).find("a").attr("href"); return false;         
    8.      
    9. });         
    10.      
    11. // how to use         
    12.      
    13. home
               
    14. });        
    15.      
    16. ID与Class之间转换当改变Window大小时，在ID与Class之间切换      
    17.      
    18. $(document).ready(function() {         
    19.      
    20.    function checkWindowSize() {         
    21.    if ( $(window).width() > 1200 ) {         
    22.      
    23.      $('body').addClass('large');         
    24.      
    25.    }         
    26.    else {         
    27.      
    28.       $('body').removeClass('large');         
    29.      
    30.         }         
    31.      
    32. }         
    33. $(window).resize(checkWindowSize);         
    34. });   
    克隆对象
          
    1. $(document).ready(function() {         
    2.      
    3.   var cloned = $('#id').clone();         
    4.      
    5.   // how to use         
    6.  
         
  • });   

    • 使元素居屏幕中间位置

          
    1. $(document).ready(function() {         
    2.      
    3.   jQuery.fn.center = function () {         
    4.      
    5.   this.css("position","absolute");         
    6.      
    7.   this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");         
    8.      
    9.   this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");         
    10.      
    11.      return this;         
    12.      
    13. }         
    14.      
    15. $("#id").center();         
    16.      
    17. });   

    写自己的选择器

          
    1. $(document).ready(function() {         
    2.      
    3.    $.extend($.expr[':'], {         
    4.      
    5.      moreThen1000px: function(a) {         
    6.      
    7.    return $(a).width() > 1000;         
    8.      
    9.   }         
    10.      
    11. });         
    12. $('.box:moreThen1000px').click(function() {         
    13.      
    14.   // creating a simple js alert box         
    15.      
    16.     alert('The element that you have clicked is over 1000 pixels wide');         
    17.      
    18.   });         
    19.      
    20. });   

    统计元素个数

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

    使用自己的Bullets

          
    1. $(document).ready(function() {         
    2.   $("ul").addClass("Replaced");         
    3.   $("ul > li").prepend("? ");         
    4.   // how to use         
    5.   ul.Replaced { list-style : none; }         
    6.      
    7. });   

    引用Google主机上的jQuery类库

          
    1. //Example 1         
    2.          
    3.         
    4.    google.load("jquery", "1.2.6");        
    5.    google.setOnLoadCallback(function() {        
    6. // do something        
    7. });        
    8.          
    9.      
    10. // Example 2:(the best and fastest way)         
    11.   

    禁用jQuery（动画）效果

          
    1. $(document).ready(function() {         
    2.      
    3.    jQuery.fx.off = true;         
    4.      
    5. });   

    与其他JavaScript类库冲突解决方案

          
    1. $(document).ready(function() {         
    2.      
    3.   var $jq = jQuery.noConflict();         
    4.      
    5.   $jq('#id').show();         
    6.      
    7. });  
    大放送！！！ QQ绝密技巧大放送 劲舞1.7WG大放送~~ 瑞星2005序列号+ID大放送 狂抢：13级QQ大放送啊！ 大家知道哪个频道有电视剧周末大放送? 《傲世OL》游戏推出新手礼品卡，大放送！！ cs实用技巧 字幕放送 Q币大放送，答对以下题目的鉴赏Q币5个！！ 请问2006年1月《蓝天下的挚爱——爱心全天大放送》 1000元左右的数码像机(高分问题,出血大放送,快来啊) 销售的实用技巧 英语听力应试实用技巧 中考历史答题实用技巧 语文阅读答题实用技巧 中考政治答题实用技巧 PowerPoint幻灯片实用技巧 怎样才能和娱乐936胡霞联系上，她的《歌坛大放送》得“我是DJ”怎样才能参加？ 谁知道哪有凤凰卫视,周末大放送<普京在克里姆林宫的日子>BT种子 限量GMAIL邮箱放送! 拼音加加的实用技巧 去菜市场买菜有什么实用技巧？ 百万宠物大放送 圣诞大礼等你拿的活动,我砸了蛋,但是没破,有没有成功?