小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

jquery26個(gè)技巧

 dna26 2013-07-23

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.



1. 禁用右鍵點(diǎn)擊（Disable right-click）

[javascript] view plaincopyprint?
  1. $(document).ready(function(){
  2. $(document).bind("contextmenu",function(e){
  3. return false;
  4. });
  5. });
[javascript] view plaincopyprint?
  1. $(document).ready(function(){  
  2.     $(document).bind("contextmenu",function(e){  
  3.         return false;  
  4.     });  
  5. });  


2. 禁用搜索文本框（Disappearing search field text）

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


3. 新窗口打開鏈接（Opening links in a new window）

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


4. 檢測(cè)瀏覽器（Detect browser）

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


5. 預(yù)加載圖片（Preloading images）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. jQuery.preloadImages = function()
  3. {
  4. for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]);
  5. }
  6. }
  7. // how to use
  8. $.preloadImages("image1.jpg");
  9. });
  10. </arguments.length;>
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2. jQuery.preloadImages = function()  
  3. {  
  4.   for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]);  
  5.   }  
  6. }  
  7. // how to use  
  8. $.preloadImages("image1.jpg");  
  9. });  
  10. </arguments.length;>  


6. 樣式篩選（CSS Style switcher）

[javascript] view plaincopyprint?
  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 rel="stylesheet" href="default.css" type="text/css">
  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. });
[javascript] view plaincopyprint?
  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 rel="stylesheet" href="default.css" type="text/css">  
  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. 列高度相同（Columns of equal height）

[javascript] view plaincopyprint?
  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. });
[javascript] view plaincopyprint?
  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. 字體大小調(diào)整（Font resizing）

[javascript] view plaincopyprint?
  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. });
[javascript] view plaincopyprint?
  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. 返回頁(yè)面頂部（Smooth(animated) page scroll）

[javascript] view plaincopyprint?
  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. var targetOffset = $target.offset().top;
  10. $('html,body')
  11. .animate({scrollTop: targetOffset}, 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. });
[javascript] view plaincopyprint?
  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.   var targetOffset = $target.offset().top;  
  10.   $('html,body')  
  11.   .animate({scrollTop: targetOffset}, 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. });  



11. 獲取鼠標(biāo)的xy坐標(biāo)（Get the mouse cursor x and y axis）

[javascript] view plaincopyprint?
  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>
  9. });
[javascript] view plaincopyprint?
  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.   
  9. });  



12. 驗(yàn)證元素是否為空（Verify if an Element is empty）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. if ($('#id').html()) {
  3. // do something
  4. }
  5. });
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2.   if ($('#id').html()) {  
  3.    // do something  
  4.    }  
  5. });  

13. 替換元素（Replace a element）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. $('#id').replaceWith('
  3. <div>I have been replaced</div>
  5. ');
  6. });
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2.    $('#id').replaceWith('  
  3. <div>I have been replaced</div>  
  4.   
  5. ');  
  6. });  

14. 延遲加載（jQuery timer callback functions）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. window.setTimeout(function() {
  3. // do something
  4. }, 1000);
  5. });
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2.    window.setTimeout(function() {  
  3.      // do something  
  4.    }, 1000);  
  5. });  

15. 移除單詞（Remove a word）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. var el = $('#id');
  3. el.html(el.html().replace(/word/ig, ""));
  4. });
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2.    var el = $('#id');  
  3.    el.html(el.html().replace(/word/ig, ""));  
  4. });  

16. 驗(yàn)證元素是否存在（Verify that an element exists in jQuery）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. if ($('#id').length) {
  3. // do something
  4. }
  5. });
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2.    if ($('#id').length) {  
  3.   // do something  
  4.   }  
  5. });  

17. 使整個(gè)DIV可點(diǎn)擊（Make the entire DIV clickable）

[javascript] view plaincopyprint?
  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"); return false;
  5. });
  6. // how to use
  7. <div><a href="index.html">home</a></div>
  9. });
[javascript] view plaincopyprint?
  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"); return false;  
  5.     });  
  6. // how to use  
  7. <div><a href="index.html">home</a></div>  
  8.   
  9. });  

18. id和class切換（Switch between classes or id’s when resizing the window）

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


19. 克隆對(duì)象（Clone a object）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. var cloned = $('#id').clone();
  3. // how to use
  4. <div id="id"></div>
  6. });
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2.    var cloned = $('#id').clone();  
  3. // how to use  
  4. <div id="id"></div>  
  5.   
  6. });  


20. 使元素居中屏幕（Center an element on the screen）

[javascript] view plaincopyprint?
  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. });
[javascript] view plaincopyprint?
  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. });  


21. 自定義選擇器（Write our own selector）

[javascript] view plaincopyprint?
  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. });
[javascript] view plaincopyprint?
  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. });  


22. 統(tǒng)計(jì)元素個(gè)數(shù)（Count a element）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. $("p").size();
  3. });
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2.    $("p").size();  
  3. });  


23. 自定義Bullets（Use Your Own Bullets）

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


24. 引用google分發(fā)的jQuery（Let Google host jQuery for you）

[javascript] view plaincopyprint?
  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./ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
  10. // Example 2:(the best and fastest way)
  11. <script type="text/javascript" src="http://ajax./ajax/libs/jquery/1.2.6/jquery.min.js"></script>
[javascript] view plaincopyprint?
  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./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./ajax/libs/jquery/1.2.6/jquery.min.js"></script>  


25. 禁用jQuery動(dòng)畫（Disable jQuery animations）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. jQuery.fx.off = true;
  3. });
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2.     jQuery.fx.off = true;  
  3. });  


26. 防止不兼容沖突（No conflict-mode）

[javascript] view plaincopyprint?
  1. $(document).ready(function() {
  2. var $jq = jQuery.noConflict();
  3. $jq('#id').show();
  4. });
[javascript] view plaincopyprint?
  1. $(document).ready(function() {  
  2.    var $jq = jQuery.noConflict();  
  3.    $jq('#id').show();  
  4. });  

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多