- 속성 선택자

 선택자 형태

 설명

 요소[속성]  특정 속성을 가지고 있는 문서 객체 선택 

 요소[속성=값]

 속성 안의 값이 특정 값과 같은 문서 객체 선택

 요소[속성~=값]

 속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체 선택 

 요소[속성^=값]

  속성 안의 값이 특정 값으로 시작하는 문서 객체 선택 

 요소[속성$=값]

  속성 안의 값이 특정 값으로 끝나는 문서 객체 선택 

 요소[속성*=값]

  속성 안의 값이 특정 값을 포함하는 문서 객체 선택 

 

- 속성 선택자 예)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            J("input[type=text]").val("Hello JQuery");
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <div>
        <input type="text"/>
        <input type="password"/>
        <input type="radio"/>
        <input type="checkbox"/>
        <input type="file"/>
    </div>
</body>
</html>

 

'공부 > JQuery' 카테고리의 다른 글

JQuery_[배열1(스크립트배열), 배열2(선택자)]  (0) 2013.01.07
JQuery_[필터 선택자]  (0) 2013.01.07
JQuery_[JQuery 자식, 후손 선택자]  (0) 2013.01.07
JQuery_[JQuery 선택자(전체, 태그, 아이디, 클래스)]  (0) 2013.01.07
JQuery_[JQuery 이란?]  (0) 2013.01.07

- 자식 선택자( " 부모 태그명 > 자식 태그명" ) : 자식으로 범위를 한정해 전체가 선택

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            J("body > *").css("color", "Red");
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <div>
        <ul>
            <li>Aplle</li>
            <li>Bag</li>
            <li>Cat</li>
            <li>Dog</li>
            <li>Elephant</li>
        </ul>
    </div>
</body>
</html>

 

- 후손 선택자( "부모 태그명 후손 태그명") "요소A 요소B" : 요소A의 후손으로 범위를 지정 모든 후손 선택

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            J("body  *").css("color", "Red");
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <div>
        <ul>
            <li>Aplle</li>
            <li>Bag</li>
            <li>Cat</li>
            <li>Dog</li>
            <li>Elephant</li>
        </ul>
    </div>
</body>
</html>

 

※ 각 JQuery 실행 후 크롬에서 요소검사(F12) 로 확인 하면 확연한 차이를 알 수 있다.

'공부 > JQuery' 카테고리의 다른 글

JQuery_[배열1(스크립트배열), 배열2(선택자)]  (0) 2013.01.07
JQuery_[필터 선택자]  (0) 2013.01.07
JQuery_[속성 선택자]  (0) 2013.01.07
JQuery_[JQuery 선택자(전체, 태그, 아이디, 클래스)]  (0) 2013.01.07
JQuery_[JQuery 이란?]  (0) 2013.01.07
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            J("*").css("color", "Red"); // 태그 전체 선택자
            J("h1").css("color", "Yellow"); // 태그 선택자
            J("h1,p").css("background", "Red"); // 태그 다중 선택자
            J("#target").css("color", "Blue"); // id 선택자 ('#' 로 지정)
            J("h1#target").css("background", "Pink"); // 태그 + id 선택자(id = #)
            J("h1.item").css("color", "Green"); // 태그 + class 선택자(class = .)
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <h1>Lorem ipsum</h1>
    <p>consectetur adipiscing elit.</p>
    <h1 id="target">Header-0</h1>
    <h1 class="item">Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>

'공부 > JQuery' 카테고리의 다른 글

JQuery_[배열1(스크립트배열), 배열2(선택자)]  (0) 2013.01.07
JQuery_[필터 선택자]  (0) 2013.01.07
JQuery_[속성 선택자]  (0) 2013.01.07
JQuery_[JQuery 자식, 후손 선택자]  (0) 2013.01.07
JQuery_[JQuery 이란?]  (0) 2013.01.07

- JQuery 이란?

모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리.

2006년 1월 존 레식 이 BarCamp NYC에서 발표했으며, 무료로 사용 가능한 오픈소스 라이브러리

- JQuery 기능

● DOM과 관련된 처리를 쉽게 구현

● 일괄된 이벤트 연결을 쉽게 구현

● 시각적 효과를 쉽게 구현

● Ajax 애플리케이션을 쉽게 개발

 

- JQuery 다운로드와 CDN 방식

1. 다운로드 ( http://jquery.com )

2. CDN 방식 ( 스크립트 태크에 src 속성에 CDN 호스트 입력 )

- CDN 입력 예

<script src="http://code.jquery.com/jquery-1.7.js"></script>

<script>

$(document).ready(function() { // 문서가 준비가 완료되면, 매개 변수로 전달된 함수를 실행하라는 의미

-- JQuery 실행 함수 --

});

</script>

 

※ JQuery 파일명 .js 파일과 .min.js 파일로 나누워진다.

- .js 파일은 Uncompressed 버전

- .min.js 파일은 Minified 버전

- 두 파일은 용량이 다섯 배 이상 차이가 난다. Minified 파일은 용량을 최소화 하려고 지핑한 파일

두 파일을 직접 확인해 보면 차이를 쉽게 알 수 있다.

거의 .js 파일을 사용한다.

- 오프라인에서는 JQuery 를 사용해야 한다면 꼭 1번 다운로드 방식으로 사용해야 한다.

'공부 > JQuery' 카테고리의 다른 글

JQuery_[배열1(스크립트배열), 배열2(선택자)]  (0) 2013.01.07
JQuery_[필터 선택자]  (0) 2013.01.07
JQuery_[속성 선택자]  (0) 2013.01.07
JQuery_[JQuery 자식, 후손 선택자]  (0) 2013.01.07
JQuery_[JQuery 선택자(전체, 태그, 아이디, 클래스)]  (0) 2013.01.07

+ Recent posts

티스토리툴바