셀렉터

셀렉터

jQuery의 DOM 탐색은 CSS SELECTER를 사용하고 있다.

jQuery에서는 원하는 HTML의 DOM 요소를 찾기 위해 $(Selector), jQuery(Selector)와 같은 표현식을 사용한다.

$는 jQuery의 축약어로 같은 역할을 하며, 다음과 같은 형태로 사용하여 원하는 DOM 요소를 선택 할 수 있다.

셀렉터의 종류	셀렉터의 표현 방법
All Selector	$("*")
ID Selector	$("#id")
Element Selector	$("elementName")
Class Selector	$(".className")
Multiple Selector	$("selector1, selector2, selector3")

$(Selector), jQuery(Selector)를 사용하여 선택한 DOM의 요소는 “document.getElementByID”를 이용한 것과는 다르게 해당 객체를 jQuery 객체로 랩핑해서 반환해 주기 때문에 jQuery에서 지원하는 기능을 쉽게 적용 할 수 있다는 장점이 있다.

 

All Selector : $(“*”)

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //HTML 문서내의 모든 엘리먼트를 찾아 붉은 선으로 표시.
        $("*").css("border", "1px solid #ff0000");
    });
</script>
$(document).ready() 또는 $(function() {})는 페이지의 HTML DOM이 모두 로드가 되면 실행이 되는 함수로 자바스크립트의 onload 메서드의 확장된 역할을 한다.

jQuery를 사용하는 경우 onload 이벤트의 사용보다 $(document).ready() 또는 $(function() {})를 사용하는 것이 좋다.

 

ID Selector : $(“#ID”)

문서 안에 있는 여러 엘리먼트중 ID값이 동일한 엘리먼트를 찾아 반환.

동일한 값(동일ID)의 엘리먼트가 여러 개일 경우에는 최상위에 있는 엘리먼트를 선택 반환하며, 한 문서(HTML)에는 한 ID만 존재하는 것이 원칙으로 동일한 값을 통해 접근을 하고 싶을 경우에는 class 또는 attribute의 동일한 값을 설정 하여 사용
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //ID가 Content인 요소를 찾아 배경을 "yellow"로 변경.
            $("#content").css("background", "yellow");
        });
    </script>
 

Element Selector : $(“element”)

자바스크립트의 getElementByTagName(“tagName”)과 비슷한 역할을 하며 DOM 개체를 구성하는 태그와 동일한 개체를 찾아 다수의 jQuery 개체를 반환.

아래의 소스는 jQuery를 통해 선택된 “DIV” 개체의 테두리는 파란색으로 변경. 
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //div 개체를 찾아 테두리를 "blue"로 변경.
            $("div").css("border", "2px solid blue");
        });
    </script>

 

Class Selector : $(“.class”)

자바스크립트의 getElementByClassName()과 동일한 역할을 하고 있는 셀렉터

getElementByClassName() 메서드의 경우 몇몇 브라우저에서 지원을 하고 있지 않기 때문에 크로스브라우징을 지원해야 하는 개발이라면 올바르게 동작하지 않는 문제가 발생할 수 있다.

jQuery의 ClassSelector의 경우 현존하는 대부분의 브라우저에서 사용이 가능하다.
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Class가 myClass인 요소를 찾아 테두리를 "blue"로 변경.
            $(".myClass").css("border", "2px solid blue");
        });
    </script>

 

Multiple, Complex Selector :

$(“selector1, selector2, selectorN”)

$(“#id div.class”)

앞서 설명한 셀렉터의 나열이나 조합을 통하여 개발자가 원하는 개체를 보다 쉽고 정확하고 빠르게 탐색 할 수 있다.

셀렉터를 “,” 통하여 나열할 경우 각각의 셀렉터를 통해 탐색된 개체의 집합을 반환하며, 셀렉터의 조합을 통하여 탐색을 했을 경우 각 셀렉터의 교집합 조건의 개체가 탐색되어 반환 된다.

$(“#content”, “div”, “a”, “.myclass”) 경우 ID의 값이 “content”인 개체, “div”, “a” 태그를 가지는 개체, 클래스 명이 “myClass”인 개체를 탐색하여 반환을 하게 되는 반면 $(“div.myClass”)의 경우 “div” 태그로 구성되었으며 동시에 클래스 명이 “myClass”인 개체를 반환.
    <script type="text/javascript">
        $(document).ready(function () {
            //id=content, div 요소를 찾아 테두리를 "blue"로 변경.
            $("#content, div").css("border", "2px solid blue");
        });
    </script>

참조 : http://www.sqler.com/382391