25대 실용적인 jQuery 기술과 해결 방안

31276 단어 jquery
jQuery 라이브러리의 발전이 신속하고 (방금 발표된 jQuery의 1.4) 점점 더 많은 사람들이 이 유용한 JavaScript 라이브러리를 사용하고 있다.이것은 jQuery의 힌트, 기교, 해결 방안이 점점 더 많이 필요하다는 것을 의미한다.이것이 바로 내가 26개의 실용적인 jQuery의 힌트, 기교, 해결 방안의 작은 목록을 만든 이유이다.
1. 페이지의 오른쪽 버튼 제거 메뉴
$(document).ready(function(){  

    $(document).bind("contextmenu",function(e){  

        return false;  

    });  

});

2, 검색 입력 상자 문자의 사라짐
마우스가 초점을 얻고 초점을 잃을 때 input 입력 상자 텍스트 처리:
$(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); }  

    });  

}

3. 새 창 열기 페이지
    $(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



    <a href="http://www.opensourcehunter.com" rel="external">open link</a>

4. 브라우저 유형 판단
참고: 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  

}  

});

5, 사전 로드 이미지
$(document).ready(function() {  

jQuery.preloadImages = function()  

{  

  for(var i = 0; i<arguments.length; i++)="" {="" jquery("=""><img>").attr("src", arguments[i]);  

  }  

}  

// how to use  

$.preloadImages("image1.jpg");  

});  

</arguments.length;>

6, 쉽게 css 스타일 전환
    $(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



    <link rel="stylesheet" href="default.css" type="text/css">  

    // the links  

    <a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>  

    <a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>  

    <a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>  

    });

7. 높이가 같은 열
두 개의 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"));  

});  

});

8, 단순 글꼴 크기 축소
$(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;  

  });  

});

9. 머리 슬라이딩 애니메이션 되돌리기
    $('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



    <a name="top"></a>  

    // the link  

    <a href="#top">go to top</a>

10、마우스 위치 가져오기
$().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);  

  });

11. 원소가 비어 있는지 판단
    if ($('#id').html()) {  

       // do something  

       }

12. 원소 교체
  $('#id').replaceWith(' 

<div>I have been replaced</div> 

 

');

13. jquery timer 반환 함수
$(document).ready(function() {  

   window.setTimeout(function() {  

     // do something  

   }, 1000);  

});

14.jquery도 바꾸기
$(document).ready(function() {  

   var el = $('#id');  

   el.html(el.html().replace(/word/ig, ""));  

});

15. 원소의 존재 여부를 판단한다
$(document).ready(function() {  

   if ($('#id').length) {  

  // do something  

  }  

});

16.div도 클릭 가능
     $("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



    <div><a href="index.html">home</a></div>

17. jquery를 사용하여 브라우저의 크기를 판단하고 다른class를 추가합니다
$(document).ready(function() {  

   function checkWindowSize() {  

    if ( $(window).width() > 1200 ) {  

        $('body').addClass('large');  

    }  

    else {  

        $('body').removeClass('large');  

    }  

   }  

$(window).resize(checkWindowSize);  

});

18, 몇 글자만 clone!
 var cloned = $('#id').clone()

19. 화면 중앙에 div 설정
$(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();  

});

20. 자신의 선택기 만들기
$(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');  

  });  

});

21. 원소의 수를 계산한다
$(document).ready(function() {  

   $("p").size();  

});

22. 자신의 li 스타일 설정
$(document).ready(function() {  

   $("ul").addClass("Replaced");  

   $("ul > li").prepend("");  

 // how to use  

 ul.Replaced { list-style : none; }  

});

23. 구글의 호스트를 사용하여 jquery 라이브러리를 불러오기
<script src="http://www.google.com/jsapi"></script>  

<script type="text/javascript">  

google.load("jquery", "1.2.6");  

google.setOnLoadCallback(function() {  

    // do something  

});  

</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>  

 

 // Example 2:(the best and fastest way)  

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

24. jquery 애니메이션 효과 닫기
$(document).ready(function() {  

    jQuery.fx.off = true;  

});

25. 자신의 jquery 표식을 사용
$(document).ready(function() {  

   var $jq = jQuery.noConflict();  

   $jq('#id').show();  

});

좋은 웹페이지 즐겨찾기