테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

jinmuk
프로필 보기이 회원 글보기
 · 12년 전 · 2294
웹 프런티어와 함께하는 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 개체로 반환합니다.

03_002.jpg

 

 

<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() {})를 사용하시길 적극 추천 드리며 관련 내용에 대해서는 마지막 부분에 다시 한번 정리를 하도록 하겠습니다.

 

03_003.jpg

 

 

 

화면 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>

 

03_004.jpg

 

 

 

 

 

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>

 

03_005.jpg

 

 

 

목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
12438
JavaScript 배경음악 랜덤 재생 하기 입니다.
12437
JavaScript css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
12436
JavaScript 하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
12435
JavaScript 개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
12434
JavaScript 랜덤으로 이미지 출력 되기 입니다.
12433
JavaScript 사용자 해상도 알아내기 입니다.
12432
JavaScript 붙여넣기 금지하기 입니다.
12431
MySQL 대소문자 데이터 조회하기
12430
JavaScript 퇴장시 팝업창 한번한 띄우기 입니다.
12429
PHP www 주소 리다이렉션 시켜주기 입니다.
12428
PHP 신문 기사를 긁어오기 입니다.
12427
JavaScript 시도, 구군, 동 주소 select
12426
MySQL 커리로 DB 테이블 명세서 출력하기
12425
JavaScript 브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
12424
PHP rss 읽어오기 입니다.
12423
JavaScript 자바스크립트로 Ajax 효과내기 입니다.
12422
기타 css 마우스 오버, 테두리
12421
JavaScript 키보드,마우스 등 불펌방지 입니다.
12420
JavaScript 해상도에 따라 서로 다른 페이지로 접속 하기 입니다.
12419
JavaScript 특정페이지에서 자동으로 새로고침 하기 입니다.
12418
JavaScript 마우스 오버시 이미지 안쪽에 테두리주기
12417
node.js git 사용메뉴얼 보면 깝깝 하네요
12416
PHP 그림자가 있는 글자 표현하기 입니다.
12415
PHP css로 테이블 만들기 입니다.
12414
JavaScript 간결한 레이어 메뉴 입니다.
이전 다음
전체 목록