偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

jQuery 1.4實用技巧大放送

作者：靈動生活
開發(fā) 開發(fā)工具 前端
文章介紹了使用jQuery 1.4版本的26個小技巧，比如有禁止右鍵點擊、隱藏搜索文本框文字、在新窗口中打開鏈接、檢測瀏覽器、預加載圖片、頁面樣式切換、所有列等高等等，希望對您有所幫助。

jQuery 1.4給開發(fā)者帶來了很多值得興奮的新特性，同時使用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. <A href="http://www.opensourcehunter.com" rel=external>open link</A> 

檢測瀏覽器

注: 在版本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. <LINK href="default.css" type=text/css rel=stylesheet>     
  13. // the links     
  14. <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>     
  15. <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>     
  16. <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>     
  17. });   

#p#

列高度相同

如果使用了兩個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. });   

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

  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. <A name=top></A>   
  24.     
  25. // the link     
  26. <A href="#top">go to top</A>     
  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.  
  10. <DIV id=XY></DIV>     
  11. });   

驗證元素是否為空

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

替換元素

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

#p#

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. <DIV><A href="index.html">home</A></DIV>     
  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.  
  7. <DIV idid=id></DIV>     
  8. });   

使元素居屏幕中間位置

  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. });   

統(tǒng)計元素個數(shù)

  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. <SCRIPT src="http://www.google.com/jsapi"></SCRIPT>     
  3. <SCRIPT type=text/javascript>    
  4.    google.load("jquery", "1.2.6");    
  5.    google.setOnLoadCallback(function() {    
  6. // do something    
  7. });    
  8. </SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>     
  9.  
  10. // Example 2:(the best and fastest way)     
  11. <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>  

禁用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. });  


【編輯推薦】

  1. 一些應該熟記于心的jQuery函數(shù)和技巧
  2. Django創(chuàng)始人：從技術工藝上考量jQuery
  3. jQuery四大天王：核心函數(shù)詳解 
責任編輯：王曉東 來源： 博客園
jQuery
相關推薦

2020-10-29 10:43:24

網(wǎng)絡安全支付寶電子錢包

2010-07-22 10:28:59

Web開發(fā)IDE

2018-10-25 12:01:37

機房搬遷要點

2012-05-10 10:55:03

CSS

2020-12-28 15:08:27

開發(fā)C 語言編程

2014-01-10 14:08:57

WLAN速度優(yōu)化

2017-11-01 15:50:38

數(shù)據(jù)庫MySQL 8.0新特性

2011-11-24 09:13:16

CSS

2016-11-11 19:51:35

2009-02-02 14:25:45

軟件 芮祥麟 SAP

2021-05-11 10:30:34

數(shù)字化

2012-01-09 16:43:13

點心通訊錄

2009-03-25 16:54:10

Linux軟件免費

2019-09-24 09:29:26

Python數(shù)據(jù)接口

2014-08-25 14:40:22

百加域名

2009-09-04 10:27:28

Linux實用技巧linux操作系統(tǒng)linux

2022-03-23 09:18:10

Git技巧Linux

2016-10-20 16:19:51

云主機
點贊
收藏

51CTO技術棧公眾號