jQuery 기본사용 및 Selectors

jQuery 는 HTML 요소를 선택하고 그것에 여러가지 작업을 할 수 있습니다.

기본 형태는 다음과 같습니다.

$(selector).action()

$ 는 jQuery를 사용한다는 것을 명시하기 위해서 기본적으로 필요한 것입니다.

(selector) 작업을 하기 위해서 선택하는 html 구성요소를 말합니다.

action() 선택한 요소에 어떤 것을 수행할지 그 작업에 대한 것을 말합니다.

예를 들면 다음과 같은 형태로 사용됩니다.

$("p").hide()		// html 코드중  
 요소를 모두 숨깁니다.
$(".test").hide()	// html 코드중 class="test"로 지정된 것을 숨깁니다.
$("#test").hide()	// html 코드중 id="test" 로 지정된 것을 숨깁니다.

jQuery를 실행하기 위한 기본 형태는 다음과 같습니다.

또는

1. html 요소 선택 제어(jQuery Selector)

일단 아래와 같은 HTML 문서를 하나 만듭니다.

head에 들어갈 내용

body에 들어갈 내용

jQuery 테스트중입니다.
아래쪽 버튼을 누르면 이것은 사라집니다. 1
아래쪽 버튼을 누르면 이것은 사라집니다. 2

jQuery 스크립트는 다음과 같은 기능을 합니다.

$(document).ready(function(){
  $("button").click(function(){
	// html 요소중에 button에 클릭을 감지합니다.
    $("p").hide();
    // 클릭이 감지되면 html 요소중 p 태그를 모두 사라지게 만듭니다.
    // ("선택할 html 요소").action() 의 형태로 선택을 합니다.
    // 
를 선택한다면 $("div").show() 이렇게 사용합니다.
  });
});

html 의 요소들을 위와 같은 식으로 제어하여 처리합니다.

문서를 구성하면서 동일한 태그들이 많이 사용하는데 그것 중에서 구분하여 처리할수도 있습니다.

다음과  같은 html 문서를 생성합니다.

head에 들어갈 내용

body에 들어갈 내용

jQuery 테스트중입니다.
P 태그입니다. 아무것도 사용하지 않았습니다.
P 태그입니다. ID에 test라고 입력했습니다.

제이쿼리 스크립트는 다음과 같은 기능을 합니다.

$(document).ready(function(){
  $("button").click(function(){
  // 버튼 요소의 클릭을 감지
    $("#test").hide();
    // 태그중에 id 가 test로 되어 있는 것을 숨김 처리합니다.
  });
});

html 요소의 class를 가지고 선택을 할수도 있습니다.

head에 들어갈 내용

body에 들어갈 내용

클래스 test 제목입니다.
클래스 p 태그 입니다.
아무것도 들어가지 않은 p 태그입니다.

html의 class를 이용하여 선택을 하는 것입니다.

$(".test").hide();
// 위쪽과 비교해보면
// 태그 선택시 $("태그명")
// ID 선택시 $("#ID명")
// class 선택시 $(".class명")

이런 식으로 선택을 하여 여러가지 작업을 하게 됩니다.

html의 여러가지 요소를 선택한 예

$("*")				// 모든 요소를 선택합니다.
$(this)				// 현재 html 요소를 선택합니다.
$("div.top")		// div 태그 중 class="top" 인 것을 선택
$("div.first")		// 여러개 div 태그 중 가장 처음에 나오는 것을 선택
$("[href]")			// href가 들어가는 모든 요소를 선택
$("a[target='_blank']")		// a 태그 중 target='_blank'인 것을 선택
$("ul li:first")	// 처음 ul 태그 내에 있는 첫번째 li태그를 선택
$("ul li:first-child")	// ul 태그내에 있는 첫번째 li태그 선택
$("tr:even")		// tr 태그중 홀수라인을 선택
$("tr:odd")			// tr 태그중 짝수라인을 선택