jQuery (제이쿼리) - jQuery Selector 실습

앞서 제이쿼리에서 사용하는 기본적인 셀렉터에 대해 알아봤었는데 이번엔 그 실습을 해보자.

$(function () {
	var jq = $("#pTag");
    alert(jq.html());
    
    jq = $("p");
    alert(jq.html());
    
    jq = $(".pTag");
    alert(jq.html());
    
    jq = $("[name=pTag]");
    alert(jq.html());
});

Hello, jQuery!

$(function() {}); 구문은 document.ready 와 같은 구문이다. 

복잡하게 알려고 하지 말고 그냥 그렇구나 하고 넘어가는 것이 정신건강에 좋다.

$(document).ready(function() {}); 의 형태로 많이 사용된다.

html() 은 제이쿼리 셀렉터로 선택된 jQuery Object 에서 해당 객체의 html 을 읽어오는 함수인데 

조금 설명하고 넘어갈 필요가 있겠다.

제이쿼리 환경에서 객체를 선택하는 방법은 크게 두 가지가 있는데 지금 공부하고 있는 제이쿼리 셀렉터를 이용한 방법($("#pTag"))과 

기존 원시적인 자바스크립트의 함수(document.getElementById("pTag"))를 이용한 방법이 있다. 

제이쿼리 환경에서 굳이 후자를 이용하는 사람은 없지 않냐 라고 할 수도 있겠지만 프로젝트를 진행하며 보니까 간간히 있긴 하다. -_-;

여기에서 제이쿼리 셀렉터를 이용해 가져온 객체를 제이쿼리 객체라고 부르고 후자를 HTML 객체라고 부른다. 

그리고 제이쿼리는 제이쿼리 객체에 대해 여러가지 기능(함수)을 제공하는데 이는 일반적인 HTML 객체에는 사용이 불가능하다. 

만약 HTML 객체에 대해 제이쿼리 함수를 사용하고 싶다면 다음과 같은 과정을 거쳐 HTML 객체를 제이쿼리 객체로 변환시켜주어야 한다.

// HTML 객체 - 에러 발생
document.getElementsByClassName("txt").html();

// HTML 객체를 제이쿼리 객체로 변환 - $( ) 로 감싸준다.
$(document.getElementsByClassName("txt")).html();

반대로 제이쿼리 객체에서도 HTML 객체가 지원하는 함수들을 사용할 수 없는데 HTML 객체로 사용하기 위해서는 

다음과 같이 배열에서 꺼내오는 작업을 진행해야 한다.

// 제이쿼리 객체 - 에러 발생... 하진 않고 undefined 발생
$("txt").innerHTML;

// 제이쿼리 객체를 HTML 객체로 변환 - 제이쿼리 객체 배열에서 꺼내온다.
$("txt")[0].innerHTML;

사실 뭐 말이 HTML 객체니 제이쿼리 객체니 하면서 어려운 말인 것처럼 말하고 있지만 

단순히 해당 객체를 어떻게 선택했냐의 차이점이 있을 뿐이니 더 이상 설명하고 싶어도 설명할 수가 없다. 

그래서 HTML 객체와 제이쿼리 객체의 차이점은 위의 설명으로 간단하게 마치도록 하고 예제로 돌아와서 

예제의 모든 셀렉터는 전부 p 태그를 가리키고 있으므로 p 태그의 html() 은 <p>Hello, jQuery!</p> 빨간 부분에 해당하게 된다. 

만약 p 태그에 다른 html 코드가 들어있었다면 <p><b>Hello, jQuery!</b></p> 처럼 해당 코드까지 포함해 결과값을 리턴해주게 된다.

즉, html() 함수는 innerHTML 과 같은 기능을 한다고 볼 수 있다.

$(function () {
	var jqSelector = $("#pTag");
    alert(jqSelector.html());
    //아래 코드는 undefined 발생
    //alert(jqSelector.innerHTML);
    
    var htmlSelector = document.getElementById("pTag");
    alert(htmlSelector.innerHTML);
    //아래 코드는 에러가 발생 되어 스크립트 중지
    //alert(htmlSelector.html());
});

이상으로 간단한 예제를 통해 셀렉터를 사용하는 방법에 대해 알아봤다. 끝!