һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 ǰ̨ű

25 jQuery ʹüɣjQuery tips, tricks & solutions

[]
12268 happy175 2014-1-14 17:43:07
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
ǰʱ䷢ jquery 1.4 汾ʹҲԽԽ࣬Ϊ˷Ҷ jQuery ʹãгһЩ jQuery ʹüɡнҼı֡´дӡԤȼͼƬҳʽли߶ȡҳС ҳ涥ȡ X Y ᡢ֤ԪǷΪա滻ԪءjQuery ʱءɾʡ֤ԪǷ jQuery 󼯺Сʹ DIV ԵID CLASS֮л¡ʹԪĻСдԼѡͳԪظʹԼ Bullets Google ϵ jQuery ⡢ jQuery Ķ JavaScript ⡣

ʹü£


1. Ҽ

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



2. ı

  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.         if ($.trim(input.val()) == originalvalue) {
  9.             input.val('');
  10.         }
  11.     });
  12.     input.blur(function() {
  13.         if ($.trim(input.val()) == '') {
  14.             input.val(originalvalue);
  15.         }
  16.     });
  17. }
ƴ



3. ´д

  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. // how to use
  10. <a href="http://www.websjy.com" rel="external"> open link </a>
ƴ



4.

  1. $(document).ready(function() {
  2.     // Target Firefox 2 and above
  3.     if ($.browser.mozilla && $.browser.version >= "1.8") {
  4.         // do something
  5.     }

  6.     // Target Safari
  7.     if ($.browser.safari) {
  8.         // do something
  9.     }

  10.     // Target Chrome
  11.     if ($.browser.chrome) {
  12.         // do something
  13.     }

  14.     // Target Camino
  15.     if ($.browser.camino) {
  16.         // do something
  17.     }

  18.     // Target Opera
  19.     if ($.browser.opera) {
  20.         // do something
  21.     }

  22.     // Target IE6 and below
  23.     if ($.browser.msie && $.browser.version <= 6) {
  24.         // do something
  25.     }

  26.     // Target anything above IE6
  27.     if ($.browser.msie && $.browser.version > 6) {
  28.         // do something
  29.     }
  30. });
ƴ



5. ԤȼͼƬ

  1. $(document).ready(function() {
  2.     jQuery.preloadImages = function() {
  3.         for (var i = 0; i < arguments.length; i++) = "" { = ""jquery( = "" > <img > ").attr("src ", arguments[i]);
  4.     }
  5. }
  6. // how to use
  7. $.preloadImages("image1.jpg");
  8. });
ƴ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
 ¥| happy175 2014-1-14 17:45:25
| ʾȫ¥
2F
6. ҳʽл

  1. $(document).ready(function() {
  2.     $("a.Styleswitcher").click(function() {
  3.         //swicth the LINK REL attribute with the value in A REL attribute
  4.         $('link[rel=stylesheet]').attr('href', $(this).attr('rel'));
  5.     });
  6.     // how to use
  7.     // place this in your header
  8.     <link type="text/css" href="default.css" rel="stylesheet" />
  9.     // the links
  10.     <a href="#" class="Styleswitcher" rel="default.css"> Default Theme </a>
  11.     <a href="#" class="Styleswitcher" rel="red.css"> Red Theme </a>
  12.     <a href="#" class="Styleswitcher" rel="blue.css"> Blue Theme </a>
  13. });
ƴ



7. и߶

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



8. ҳС

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



9. ҳ涥

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



10. ȡ X Y

  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.     // how to use
  7.     <div id="XY"> </div>
  8. });
ƴ



Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2014-1-14 17:47:20
| ʾȫ¥
3F
11. ֤ԪǷΪ

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



12. 滻Ԫ

  1. $(document).ready(function() {
  2.     $('#id').replaceWith('
  3.         
  4. I have been replaced

  5.     ');
  6. });
ƴ



13. jQuery ʱ

  1. $(document).ready(function() {
  2.     window.setTimeout(function() {
  3.         // do something
  4.     },
  5.     1000);
  6. });
ƴ



14. ɾ

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



15. ֤ԪǷ jQuery 󼯺

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



Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2014-1-14 17:51:00
| ʾȫ¥
4F
16. ʹ DIV Ե

  1. $(document).ready(function() {
  2.     $("div").click(function() {
  3.         //get the url from href attribute and launch the url
  4.         window.location = $(this).find("a").attr("href");
  5.         return false;
  6.     });
  7.     // how to use
  8.     <div><a href="index.html"> home </a></div>
  9. });
ƴ



17. ID CLASS֮л

  1. $(document).ready(function() {
  2.     function checkWindowSize() {
  3.         if ($(window).width() > 1200) {
  4.             $('body').addClass('large');
  5.         } else {
  6.             $('body').removeClass('large');
  7.         }
  8.     }
  9.     $(window).resize(checkWindowSize);
  10. });
ƴ



18. ¡

  1. $(document).ready(function() {
  2.     var cloned = $('#id').clone();
  3.     // how to use
  4.     <div id="id"> </div>
  5. });
ƴ



19. ʹԪĻ

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



20. дԼѡ

  1.     $(document).ready(function() {  
  2.        $.extend($.expr[':'], {  
  3.            moreThen1000px: function(a) {  
  4.                return $(a).width() > 1000;  
  5.           }  
  6.        });  
  7.       $('.box:moreThen1000px').click(function() {  
  8.           // creating a simple js alert box  
  9.           alert('The element that you have clicked is over 1000 pixels wide');  
  10.       });  
  11.     });  
ƴ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2014-1-14 17:54:46
| ʾȫ¥
5F
21ԪصĿ
  1. $(document).ready(function() {  
  2.    $("p").size();  
  3. });
ƴ


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


23ʹgooglejquery
  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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
ƴ


24رjqueryЧ
  1. $(document).ready(function() {  
  2.     jQuery.fx.off = true;  
  3. });
ƴ


25ֹݳͻNo conflict-mode

  1. $(document).ready(function() {  
  2.    var $jq = jQuery.noConflict();  
  3.    $jq('#id').show();  
  4. });
ƴ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
2014-3-19 23:16:46
| ʾȫ¥
7F
ʲôÿ ˵һ°
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
ѿ 2014-3-20 08:53:03
| ʾȫ¥
8F
~~! лṩ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
2014-3-31 12:32:00
| ʾȫ¥
9F
֧û˵~ ¥ǿ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-1-18 17:16

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б