jQuery 맛보기

PROGRAM/JQuery

jQuery 맛보기

반화넬 2012. 10. 30. 21:19

문서가 로딩되면 코드 실행하기(window.onload = function() {} )

$(document).ready(function() { 
    // Your code here 
});

window.onload와 달리 $(document).ready는 페이지가 완전히 로드되지 않아도 함수가 호출이 된다.

$(document).ready(function() { 
    // a 태그를 클릭했을 때 이벤트 
    $("a").click(function(event) { 
        alert("As you can see, the link no longer took you to jquery.com"); 
          
        // 해당 객체의 기본적인 이벤트 발생을 막는 함수, a 태그의 경우 링크 이동 이벤트를 막는다. 
        evert.preventDefault(); 
    }); 
});

HTML 태그에 Sytle의 Class를 동적으로 추가/삭제하는 방법

<style type="text/css"> a.test { font-weight:bold; } </style> 
  
$(document).reday(function() { 
    // a 태그 클릭 이벤트 
    $("a").click(function(event) { 
        $("a").addClass("test");        // a 태그에 클래스 명 test를 추가 
        $("a").removeClass("test");     // a 태그의 클래스 명 test를 삭제 
    }); 
});

특별한 효과

$("a").click(function(event) { 
    event.preventDefault(); 
  
    // a 태그 클릭시 천천히 사라지는 이벤트 
    $(this).hide("slow"); 
});

class 또는 ID를 사용해서 요소를 선택하는 방법

$('#myDivId');                      // id로 요소 선택 
$('.myCssClass');                   // class로 요소 선택 
var myDivElement = $('#myDivId');       // 변수에 선택한 요소 대입 
var myValue = $('#myDivId').val();      // 변수에 선택한 폼의 값 대입 
$('#myDivId').val("Hello world");           // 선택한 폼의 값 설정

특정 class를 가진 요소를 찾는 방법

// div 태그들 중에 "protected" class를 가진 영역 좌우로 움직이기 
$("div").click(function() { 
    // 선택한 div에 protected라는 클래스가 있다면 
    if ($(this).hasClass("protected")) 
        // 좌우로 에니메이션 시킨다. 
        $(this) 
            .animate({ left:-10 })   
            .animate({ left:10 })  
            .animate({ left:-10 }) 
            .animate({ left:10 })   
            .animate({ left:0 }) ; 
}); 
  
// is() 함수는 요소의 특정한 내용을 비교하여 참/거짓을 반환 
// id가 myDiv인 요소의 class가 pretty인지 확인 
if ($('#myDiv').is('.pretty')) 
    $('#myDiv').show(); 
  
// id가 myDiv인 요소의 속성에 hidden이 있다면 
if ($('#myDiv').is(':hidden')) 
    // 요소를 보여준다 
    $('#mydiv').show();

요소가 존재하는지 확인하는 방법

// 요소의 크기 체크로 존재 여부 확인 
if ($(#'myDiv').length) 
    $('#myDiv').show();  
  
// 항상 체크할 필요없이 요소가 없다는 명령이 실행되지 않는다. jQuery에서 자동으로 처리 
$('#myDiv').show();

요소의 토글 상태를 알 수 있는 방법

var isVisible = $('#myDiv').is(':visible'); 
var isHidden = $('#myDiv').is(':hidden');  
  
// 요소가 보이는 상태라면 오른쪽으로 200픽셀 이동 
$('#myDiv:visible').animate({ left:'+=200px' }, 'slow');

요소의 id에 특수문자가 들어간 경우 선택하는 방법

id 값을 some:id나 some.id라고 만들었을 때 선택 방법

1.$("#some\\id");

2.$("#some\\.id");

요소를 사용 가능/불가능 처리하는 방법

// Disable #x 
$('#x').attr('disabled', true); 
  
// Enable #x 
$('#x').attr('disabled', false);

위처럼 disbled 속성값 요소인 true/false 로 제어하는 방법과 아래 처럼 disabled 속성을 제거하는 방법이 있다.

// Disable #x 
$('#x').attr('disabled', 'disabled'); 
  
// Enable #x 
$('#x').removeAttr('disabled');

체크박스를 제어하는 방법

// Check #x 
$("#x").attr('checked', true); 
$("#x").attr('checked', 'checked');     // 다른 방법 
  
// Uncheck #x 
$("#x").attr('checked', false); 
$("#x").removeAttr('checked');          // 다른 방법

셀렉트 박스에서 선택된 내용의 value 와 text 값을 가져오는 방법

// id가 myselect인 셀렉트 박스의 value값 
$("#myselect").val(); 
  
// id가 myselect인 셀렉트 박스의 선택된 text 내용 
$("#myselect option:selected").text();

10개의 아이템으로 이루어진 리스트에서 3번째 요소의 텍스트를 가져오거나 다른 문자로 대치하는 방법

// :eq(), .eq() 함수를 사용해서 3번째 li a 태그를 찾는다. 
var $thirdLink = $(this).find('li a').eq(2); 
// replace('a', 'b') 함수를 사용해서 다른 문자로 대치 
var linkText = $thirdLink.text().replace('foo', 'bar'); 
// 문자열 설정 
$thirdLink.text(linkText);

작성한 코드 압축 방법

Google Closure Compiler

Yahoo YUI compressor

Dean Edwards' Packer

출처 : http://www.silverwolf.co.kr/8666