jQuery 2강 - jQuery 자주 사용되는 id,class,태그별 셀렉터 맛보기

연동법은 이전 강좌를 참조 하시면 되겠습니다.

2014/10/08 - [웹개발강좌/jQuery] - jQuery 1강 - jQuery 연동부터 $(document).ready() 이해하기

우선적으로 많이 사용되는 id,class,태그를 이용한 셀렉터에 대하여 알아보도록 하겠습니다.

jQuery의 코드는  $(셀렉터) 또는 jQuery(셀렉터) 구조로  시작이 됩니다.

id 셀렉터 : $("#셀렉터") = document.getelementbyid("셀렉터")

class 셀렉터 : $(".셀렉터") = document.getElementsByClassName("셀렉터")

태그 셀렉터 : $("태그명") = document.getelementsbytagname("셀렉터")

상단에 id,class,tag 별 셀렉터를 이용하여 태그내에 결과값을 출력해보는 예를 들어보겠습니다.

html페이지를 하나 생성 후 BODY 태그내에 다음 코드를 추가 합니다.

<div id="id_selector">아이디값으로알아보는 셀렉터</div>
<div class="class_selector">클래스값으로 알아보는 셀렉터</div>
<span>태그로 알아보는 셀렉터</span>

다음은 스크립트 코드를 작성해보도록 하겠습니다.

물론, jQuery 파일이 include 되있어야 하겠죠?

그리고 아직은 정확하게 아실필요는 없지만 태그에 감싸져 있는 내용들을 알기위해서는 

$(셀렉터).text() 라는 함수를 적용하시면 되겠습니다.

$(function(){
        //태그 id가 id_selector인 태그로 감싸져있는 문자열찾기
	var id_selector = $("#id_selector").text();
        //태그 class가 class_selector인 태그로 감싸져있는 문자열찾기
	var class_selector = $(".class_selector").text();
        //span 태그로 감싸져있는 문자열찾기
	var tag_selector = $("span").text();
	alert("셀렉터(id)값 : " + id_selector);
	alert("클래스(class)값 : " + class_selector);
	alert("태그(tag)값 : " + tag_selector);
});

간단하게 셀렉터를 이용하여 각 태그내에 존재하는 텍스트내용을 

ALERT 경고창에 띄워주는 기능을 구현한  코드를 작성해보았습니다.

실행결과 각 태그안에 존재하는 결과값들을 

정상적으로 alert을 통하여 출력되었습니다.

한페이지에 여러개의  같은 태그 및 동일한 클래스명을 가지고 작업해야 하는 부분이 존재하는데 

이 부분은 jQuery에서 사용되는 함수를 몇가지 익힌다음에 

이어서 진행 하도록 하겠습니다.

by 개발로짜