Jquery 팁 35개

1. 우클릭 금지

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

　　2. 검색 텍스트 상자 텍스트 숨기기

Hide when clicked in the search field, the value.(example can be found below in the comment fields)

$(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. 새 창에서 링크 열기

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.

$(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가 $을(를) 교체했습니다.브라우저 변수

$(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. 미리 로드된 그림
　　This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
jQuery.preloadImages = function()
{
  for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);
  }
}
// how to use
$.preloadImages("image1.jpg");
});

　　6. 페이지 스타일 전환

$(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 type=text/css href="default.css">
// the links
<A class=Styleswitcher href="#" rel=default.css>Default Theme</A>
<A class=Styleswitcher href="#" rel=red.css>Red Theme</A>
<A class=Styleswitcher href="#" 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. 페이지 맨 위로 돌아가기 기능
　　For a smooth(animated) ride back to the top(or any location).

$(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
<A name=top></A>
// the link
<A href="#top">go to top</A>
});

　　10. 마우스 포인터 XY 값 가져오기
　　Want to know where your mouse cursor is?

$(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
<DIV id=XY></DIV>

});

　　11.맨 위 단추로 돌아가기
애니메이션과 스크롤탑을 이용해서 위쪽으로 돌아가는 애니메이션을 만들 수 있으며 다른 플러그인을 사용할 필요가 없습니다.

// Back to top
$('a.top').click(function () {
  $(document.body).animate({scrollTop: 0}, 800);
  return false;
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

scrollTop의 값을 바꾸면 되돌아오는 거리의 맨 위에 있는 거리를 조정할 수 있으며, animate의 두 번째 파라미터는 되돌아오는 동작을 실행하는 데 필요한 시간 (단위: 밀리초) 이다.
　　12.미리 로드된 그림
만약 페이지에 보이지 않는 그림이 많이 사용된다면 (예: hover 표시) 미리 불러와야 할 수도 있습니다.

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('<img>').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover1.png', 'img/hover2.png');

　　13.그림 로드 완료 확인
때때로 다음 작업을 수행하기 위해 그림이 불러오기 완료되었는지 확인해야 합니다.

$('img').load(function () {
  console.log('image load successful');
});

지정한 그림이 불러오는지 확인하기 위해 img를 다른 ID나class로 바꿀 수 있습니다.
　　14.손상된 이미지 자동 수정
만약 공교롭게도 당신의 사이트에서 깨진 이미지 링크를 발견한다면, 쉽게 바뀌지 않는 이미지로 그것들을 대체할 수 있다.이 간단한 코드를 추가하면 많은 번거로움을 줄일 수 있습니다.

$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});

비록 당신의 사이트에 깨진 이미지 링크가 없다 하더라도, 이 코드를 추가하는 것은 아무런 해가 없다.
　　15.마우스 정지(hover)class 속성 전환
만약 사용자가 클릭할 수 있는 요소에 마우스를 걸었을 때 효과를 바꾸기를 원한다면, 다음 코드는 요소에 걸었을 때class 속성을 추가할 수 있으며, 마우스가 떠날 때 이class 속성을 자동으로 취소합니다.

$('.btn').hover(function () {
  $(this).addClass('hover');
  }, function () {
    $(this).removeClass('hover');
  });

필요한 CSS 코드만 추가하면 됩니다.더 간결한 코드를 원한다면 toggleClass 방법을 사용하십시오:

$('.btn').hover(function () { 
  $(this).toggleClass('hover'); 
});

주: 이 효과를 직접 CSS로 실현하는 것이 더 좋은 해결 방안일 수도 있지만, 이 방법을 알 필요가 있습니다.
　　16.input 필드 비활성화
때때로 사용자가 어떤 작업을 수행할 때까지 폼의submit 단추나 input 필드를 비활성화해야 할 수도 있습니다. (예를 들어 '읽은 조항' 체크 상자를 확인하십시오.)활성화할 때까지 disabled 속성을 추가할 수 있습니다.

$('input[type="submit"]').prop('disabled', true);

removeAttr 방법을 실행하고 제거할 속성을 매개 변수로 가져오는 것입니다.

$('input[type="submit"]').removeAttr('disabled');

　　17.링크 로드 차단
어떤 페이지에 연결하거나 다시 불러오기를 원하지 않을 때가 있습니다. 다른 일을 하거나 스크립트를 터치하기를 원할 수도 있습니다. 이렇게 할 수 있습니다.

$('a.no-link').click(function (e) {
  e.preventDefault();
});

　　18.fade/slide 전환
fade와 slide는 우리가 jQuery에서 자주 사용하는 애니메이션 효과로 요소를 더욱 잘 나타낼 수 있다.그러나 요소가 첫 번째 효과를 사용하고 사라질 때 두 번째 효과를 사용하려면 다음과 같이 하십시오.

// Fade
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

　　19.간단한 아코디언 효과
이것은 아코디언 효과를 신속하고 간단하게 실현하는 방법이다.

// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

　　20.두 DIV 높이를 동일하게 만들기
때때로 두 개의 div 높이를 똑같이 해야 한다. 그것들의 내용이 얼마든지 상관없다.다음 코드 세그먼트를 사용할 수 있습니다.

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

이 코드는 원소 그룹을 순환시키고 원소의 높이를 원소의 최대 높이로 설정합니다.
　　21. 요소가 비어 있는지 확인
　　This will allow you to check if an element is empty.

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

　　22. 대체 요소
　　Want to replace a div, or something else?

$(document).ready(function() {
   $('#id').replaceWith('
<DIV>I have been replaced</DIV>

');
});

　　23. jQuery 지연 로드 기능
　　Want to delay something?

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

　　24. 단어 제거 기능
　　Want to remove a certain word(s)?

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

　　25. 요소가 jquery 대상 집합에 존재하는지 확인하기
　　Simply test with the .length property if the element exists.

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

　　26. 전체 DIV 클릭 가능
　　Want to make the complete div clickable?

$(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
<DIV><A href="index.html">home</A></DIV>

});

　　27. ID와 Class 간 변환
윈도 크기를 변경하면 ID와 Class 사이를 전환합니다

$(document).ready(function() {
   function checkWindowSize() {
    if ( $(window).width() > 1200 ) {
        $('body').addClass('large');
    }
    else {
        $('body').removeClass('large');
    }
   }
$(window).resize(checkWindowSize);
});

　　28. 클론 객체
　　Clone a div or an other element.

$(document).ready(function() {
   var cloned = $('#id').clone();
// how to use
<DIV id=id></DIV>

});

　　29. 요소를 화면 가운데 배치하기
　　Center an element in the center of your screen.

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

　　30. 자신의 선택기를 쓰다
　　Write your own selectors.

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

　　31. 통계 요소 개수
　　Count an element.

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

　　32. 자신의 Bullets 사용
　　Want to use your own bullets instead of using the standard or images bullets?

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

　　33. Google 호스트의 Jquery 클래스 라이브러리 참조
　　Let Google host the jQuery script for you. This can be done in 2 ways.

//Example 1
<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 type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></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>

　　34. Jquery 효과 비활성화
　　Disable all jQuery effects

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

　　35. 다른 Javascript 라이브러리와 충돌 해결 방안
　　To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

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