jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터

jinmuk

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 12년 전 · 조회 4783 4783

웹 프런티어와 함께하는 jQuery 기초강좌

2nd - jQuery를 이용한 HTML DOM 접근(기본 셀렉터 첫 번째 이야기)

원하는 개체를 쉽고 편하게 선택하자 - 셀렉터

이번 시간에는 jQuery의 가장 강력한 기능인 HTML DOM을 탐색하는 기능에 대해 알아 보도록 하겠습니다.

jQuery의 DOM 탐색은 CSS SELECTER를 사용하고 있어, CSS에 사용한 표현식을 알고 있다면 보다 쉽게 셀렉터를 이해 할 수 있습니다.

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

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

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

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

All Selector : $(“*”)
HTML DOM을 탐색하여 모든 요소를 배열형식의 jQuery 개체로 반환합니다.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //HTML 문서내의 모든 엘리먼트를 찾아 붉은 선으로 표시합니다.
        $("*").css("border", "1px solid #ff0000");
    });
</script>

jQuery를 페이지에 참조 시키고 $(document).ready() 함수를 통해 모든 객체를 선택한 후 선택된 jQuery 객체를 눈에 잘 보이게 붉은색의 1픽셀 테두리를 설정 하도록 해 보겠습니다.

$(document).ready() 또는 $(function() {})는 페이지의 HTML DOM이 모두 로드가 되면 실행이 되는 함수로 자바스크립트의 onload 메서드의 확장된 역할을 하고 있습니다. jQuery를 사용하실 경우 onload 이벤트의 사용보다 $(document).ready() 또는 $(function() {})를 사용하시길 적극 추천 드리며 관련 내용에 대해서는 마지막 부분에 다시 한번 정리를 하도록 하겠습니다.

화면 2와 같이 jQuery를 통해 선택된 모든 요소에 붉은색 테두리가 설정된 것을 확인 할 수 있습니다. 이러한 기능이 가능한 것은 일반적인 DOM 개체가 아닌 jQuery 개체로 반환이 되었기 때문입니다.

ID Selector : $(“#ID”)

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

동일한 값(동일ID)의 엘리먼트가 여러 개일 경우에는 최상위에 있는 엘리먼트를 선택 반환하며, 한 문서(HTML)에는 한 ID만 존재하는 것이 원칙으로 동일한 값을 통해 접근을 하고 싶을 경우에는 class 또는 attribute의 동일한 값을 설정 하여 사용하길 권장합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <style>
        div { background : #FFF; padding:10px; margin:10px; }
    </style>
    <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>
</head>
<body>    
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>   
        <div id="content">
            이 부분은 ID값이 content 입니다.
        </div>        
    </div>
</body>
</html>

Element Selector : $(“element”)

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

아래의 소스는 jQuery를 통해 선택된 “DIV” 개체의 테두리는 파란색으로 변경합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <style>
        div,span { 
            width:40px; height:40px; float:left; padding:10px; margin:10px; 
            background-color:#EEEEEE; 
        }
    </style>
    <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>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>        
    <span>SPAN2</span>
    <div>DIV1</div>    
    <span>SPAN1</span>
    <div>DIV2</div>
</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호	제목	글쓴이	조회	날짜
17657	자바스크립 시계 [한국시간 고정] 8	오땡스	1,329	2년 전
17655	라라곤 6.0 데이타베이스 패스워드 설정하기 1	마젠토	1,400	2년 전
17654	기타 특정 기기 접근 금지시키는 스크립트	Tak2	814	2년 전
17653	JavaScript ThreeJS - 3D Bar and Progress Bar 1	swallow	1,039	2년 전
17652	node.js RAM점유크기에 의한 노드서버관리	swallow	735	2년 전
17651	JavaScript Javascript Undo, Redo 기능 구현하기	swallow	1,495	2년 전
17650	PHP PHP에서 다운로드로직을 구현할때 서버부하문제를 고려한 방법	swallow	844	2년 전
17642	node.js nodejs서버가 사용중인 메모리에 대한 로그	swallow	679	2년 전
17633	node.js node.js에서 스케쥴링작성 8	swallow	1,204	2년 전
17632	PHP 파일의 MIME 타입을 얻기 위한 클래스 1	swallow	1,587	2년 전
17631	MySQL InnoDB와 MyISAM의 우단점	swallow	1,088	2년 전
17630	PHP 코드이그나이터와 라라벨의 비교 1	swallow	2,028	2년 전
17628	JavaScript 자바스크립트 기반으로 HTML Canvas에 이미지를 불러들여 테두리색입히기	swallow	857	2년 전
17624	기타 일반 tcp소켓과 웹소켓의 비교 5	swallow	2,978	2년 전
17623	기타 다중 소켓 포트와 한 개의 소켓 포트 비교	swallow	667	2년 전
17620	node.js tcp소켓과 websocket 의 비교 2	swallow	1,058	2년 전
17618	JavaScript JavaScript로 이미지의 부분 영역을 따내기	swallow	1,507	2년 전
17617	node.js JWT란 무엇이며 nodejs에서 JWT를 구현하기 위한 방법	swallow	727	2년 전
17614	node.js Node.js 코드를 실행 가능한 단일 실행 파일로 묶는 방법	swallow	1,740	2년 전
17612	node.js 노드에서 이미지 자료를 웹소켓을 통해 클라이언트에 전송하고, 클라이언트에서는 웹소켓을 통해 이미지를 받아서 웹브라우저에 표시 1	swallow	1,291	2년 전
17611	PHP PHP를 사용하여 TCP 소켓 서버를 만드는 방법	swallow	1,938	2년 전
17610	node.js nodejs로 망기판을 선택하여 그 망기판으로 외부와 통신하는 코드 1	swallow	684	2년 전
17609	PHP PHP로 웹소켓서버를 생성하여 채팅기능 구현하기 2	swallow	3,009	2년 전
17608	node.js Node.js로 지속적인 핑 결과를 파일로 저장	swallow	673	2년 전
17607	정규표현식 특수문자 제거, 우리글짜가 있는지 체크	swallow	621	2년 전
17604	node.js Node.js에서 PDF 파일의 페이지 수를 얻기	swallow	876	2년 전
17603	PHP PHP로 pdf의 페이지수를 얻기 1	swallow	1,109	2년 전
17602	node.js Node.js로 워터마킹 기능을 구현하는 방법	swallow	1,057	2년 전
17600	PHP PHP를 사용하여 이미지에 워터마크를 추가하는 방법 한가지	swallow	1,407	2년 전
17594	node.js NodeJS에서 image를 업로드 하면 그와 유사한 상품리스트 작성하기 2	swallow	1,014	2년 전

이전 다음

3 4 5 6 7

전체 목록

강좌