言情小说君子以泽,穿越小说排行榜,完美世界有声小说全集

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

jQuery1.4實(shí)用技巧大放送

jQuery 1.4給開發(fā)者帶來了很多值得興奮的新特性，同時(shí)使用jQuery的人也越來越多，為了方便大家對jQuery的使用，下面列出了一些jQuery使用技巧。比如有禁止右鍵點(diǎn)擊、隱藏搜索文本框文字、在新窗口中打開鏈接、檢測瀏覽器、預(yù)加載圖片等等。具體如下：

成都創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為昂仁企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作，昂仁網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

禁止右鍵點(diǎn)擊

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

檢測瀏覽器

注: 在版本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     
  
  
  }     
  
  
  });

預(yù)加載圖片

 
 
 
  
  
  $(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     
  
  
   
  
  
       
  
  
  // the links     
  
  
  Default Theme     
  
  
  Red Theme     
  
  
  Blue Theme     
  
  
  });

#p#

列高度相同

如果使用了兩個(gè)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"));     
  
  
   
  
  
    });     
  
  
   
  
  
  });

動態(tài)控制頁面字體大小

 
 
 
  
  
  $(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     
  
  
   
  
  
     
  
  
      
  
  
  // the link     
  
  
  go to top     
  
  
  });

獲得鼠標(biāo)指針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

});

驗(yàn)證元素是否為空

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

替換元素

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

#p#

jQuery延時(shí)加載功能

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

移除單詞功能

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

驗(yàn)證元素是否存在于jQuery對象集合中

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

使整個(gè)DIV可點(diǎn)擊

 
 
 
  
  
  $(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     
  
  
   
  
  
  home
     
  
  
  });    
  
  
   
  
  
  ID與Class之間轉(zhuǎn)換當(dāng)改變Window大小時(shí)，在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

});

使元素居屏幕中間位置

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

統(tǒng)計(jì)元素個(gè)數(shù)

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

使用自己的Bullets

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

引用Google主機(jī)上的jQuery類庫

 
 
 
  
  
  //Example 1     
  
  
       
  
  
      
  
  
     google.load("jquery", "1.2.6");    
  
  
     google.setOnLoadCallback(function() {    
  
  
  // do something    
  
  
  });    
  
  
       
  
  
   
  
  
  // Example 2:(the best and fastest way)

禁用jQuery（動畫）效果

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

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

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

【編輯推薦】

一些應(yīng)該熟記于心的jQuery函數(shù)和技巧
Django創(chuàng)始人：從技術(shù)工藝上考量jQuery
jQuery四大天王：核心函數(shù)詳解

當(dāng)前文章：jQuery1.4實(shí)用技巧大放送
網(wǎng)頁地址：http://fisionsoft.com.cn/article/cdiphgg.html

新聞中心

其他資訊