실용적인 jQuery 코드 세션 10개

작성자: Ei Sabai
번역: Terry li - GBin1.com 영어: 10 Useful jQuery Snippets
다음은 매우 실용적인 jQuery 코드 세션 10개입니다.이러한 코드를 사용하기 전에 jQuery 라이브러리를 웹 페이지로 가져오고 다음 DOM ready 기능에 코드를 추가해야 합니다.

$(document).ready(function() {
    // add your snippets here
 });

1. IE6 사용자에게 경고 메시지 표시

if ( (jQuery.browser.msie) && (parseInt(jQuery.browser.version) < 7) ) {
  $('body').prepend('<div class="warning">You are using an old version of Internet Explorer which is not supported.  Please upgrade your browser in order to view this website.</div>');
}

2. Javascript를 사용할 수 있을 때hasJS 클래스를 body 태그에 추가

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

3. 클릭 후 입력란의 내용을 지운다

<input type="text" name="search" class="search" value="Keywords" title="Keywords" />
$('input[type=text]').focus(function() {
    var title = $(this).attr('title');
    if ($(this).val() == title) {
        $(this).val('');
    }
}).blur(function() {
    var title = $(this).attr('title');
    if ($(this).val() == '') {
        $(this).val(title);
    }
});

4. 클릭 후 추가 내용 표시/숨기기

<p><a href="#how-to" class="toggle">How to write a good article?</a></p>
<div id="how-to">
  How to tips go here.
</div>

$('a.toggle').toggle(function() {
  var id = $(this).attr("href");
  $(this).addClass("active");
  $(id).slideDown();
}, function() {
  var id = $(this).attr("href");
  $(this).removeClass("active");
  $(id).slideUp();
});

5. 프린터 대화 상자 열기

<a href="#" class="print">Print this page</a>
$('a.print').click(function(){
  window.print();
  return false;
});

6. 테이블 데이터에 "hover"class 추가

$('table').delegate('td', 'hover', function(){
  $(this).toggleClass('hover');
});

7.rel이 "external"로 설정되어 있으면 새 창에서 링크 열기

<a href="http://www.google.com" rel="external">Google</a>
$('a[rel=external]').attr('target', '_blank');

8. 홀수 줄class를 추가해서 테이블 줄을 구분합니다. (테이블 홀수 줄의 배경색을 변경해서 줄 효과를 나타냅니다.)

$('tr:odd').addClass('odd'); 

9.div가 페이지에 있는지 확인

if ( $('#myDiv').length ) {
    // do something with myDiv
}

10. 모든 확인란을 선택/선택 안 함

<div class="options">
  <ul>
    <li><a href="#" class="select-all">Select All</a></li>
    <li><a href="#" class="reset-all">Reset All</a></li>
  </ul>

  <input type="checkbox" id="option1" /><label for="option1">Option 1</label>
  <input type="checkbox" id="option2" /><label for="option2">Option 2</label>
  <input type="checkbox" id="option3" /><label for="option3">Option 3</label>
  <input type="checkbox" id="option4" /><label for="option4">Option 4</label>
</div>

$('.select-all').live('click', function(){
  $(this).closest('.options').find('input[type=checkbox]').attr('checked', true);
  return false;
});

$('.reset-all').live('click', function(){
  $(this).closest('.options').find('input[type=checkbox]').attr('checked', false);
  return false;
});