티스토리 뷰

Programming/JavaScript, jQuery

[jQuery 3강] 선택자

국브 2019. 3. 27. 00:00

 [jQuery 3강] 제이쿼리 선택자



이번글에서는 제이쿼리 선택자에 대해서 알아보겠습니다.

이전에 자바스크립트에서 선택자 라는것을 배웠습니다.

제이쿼리는 자바스크립트를 편리하게 사용할수있는 라이브러리이기때문에

제이쿼리에서도 선택자가 있습니다.

제이쿼리 선택자에 대해서 자세히 알아보기전 이전 제이쿼리 글들을 링크해두겠습니다.


 이전 글 링크 


2019/03/22 - [Programming/JavaScript, jQuery] - [jQuery 1강] 제이쿼리 개요 및 개발환경구축

2019/03/26 - [Programming/JavaScript, jQuery] - [jQuery 2강] 제이쿼리 기본문법



 1. $(document).ready()


자바스크립트에서 window.onload 와 동일한 기능입니다.

자바스크립트에서 window.onload 기능은

문서가 모두 로드된후에 스크립트가 실행되도록하는 이벤트였습니다.

같은 기능으로의 제이쿼리에서는 $(document).ready() 있습니다.


 사용방법 및 문법 


$(document).ready(함수영역)


또는


$(함수영역)



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    //제이쿼리
    $(document).ready(function(){
        $("div").css("color","red");
    });
    
    //제이쿼리2
    /* $(function(){
        $("div").css("color","red");
    });*/
    
    //자바스크립트
    /* window.onload=function(){
        $("div").css("color","red");
    } */
 
</script>
</head>
<body>
    <div>Hi!</div>
</body>
</html>
cs


 실행결과 및 설명 

 


실행결과는 위의 이미지와같이

div 영역의 텍스트들의 색상이 빨간색으로 변경되어 출력됩니다.


   $(document).ready(function(){
        $("div").css("color","red");
    });

제이쿼리의 $(document).ready 를 사용하여 페이지가 모두 로드된후에 div 영역의 택스트 색상을 빨간색으로 변경하였습니다.


제이쿼리로 동일하게 더간략하게 작성한것이 다음과같은 문법입니다.

   /* $(function(){
        $("div").css("color","red");
    });*/

제이쿼리의 $(document).ready 를 사용하여 페이지가 모두 로드된후에 div 영역의 택스트 색상을 빨간색으로 변경하도록 주석으로 작성되어 있습니다.


밑에 동일하게 자바스크립트로 작성한 것도 확인해보겠습니다.

   window.onload=function(){
        $("div").css("color","red");
    }

자바스크립트의 window.onload 를 사용하여 모두 로드된후에 div 영역의 택스트 색상을 빨간색으로 변경하도록 주석으로 작성되어 있습니다.


이렇게 자바스크립트와 제이쿼리는 동일한 기능을 갖고있습니다.

위의 코딩량은 별로 차이가 없기때문에 자신이 편리한 방법으로 사용하면 됩니다.

하지만 두가지다 숙지하시고 동일한 기능을 지원한다는것은 알고있어야합니다.

(개인프로젝트엔 문제가 없지만.. 회사나 공동프로젝트를 위해 모두알고 있어야합니다 ㅎ)




 2. 제이쿼리 선택자


선택자를 사용할때 선택자의 기준이 되는 종류가 있습니다.

전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자, 후선 선택자, 자손 선택자 가 있습니다.

그럼 하나씩 알아보도록하겠습니다.


 사용방법 및 문법 


1.전체 선택자


$("*")


2.태그 선택자


$("태그명")


3.아이디 선택자


$("#아이디")


4.클래스 선택자


$(".클래스")


5.후손 선택자


$("#아이디 태그")


6.자손 선택자


$("#아이디 > 태그")



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){
        //전체 선택자
        $("*").css("color","#ffffff");
        
        //태그 선택자
        $("div").css("background","#000000");
        
        //아이디 선택자
        $("#item").css("background","#0000ff");
        
        //클래스 선택자
        $(".job").css("background","#ff9933");
        
        //후손 선택자
        $(".job li").css("color","#000000");
        
        //클래스 선택자
        $(".job2").css("background","#ffff33");
        
        //자손 선택자
        $(".job2 > li").css("color","#000000");
        
    });
 
</script>
</head>
<body>
    <div>Hi!</div>
    <div id="item">
        직업들
        <ul class="job">
            <li>초딩</li>
            <li>중딩</li>
            <li>고딩</li>
        </ul>
        <ul class="job2">
            <li>공무원</li>
            <li>회사원</li>
            <li>자영업</li>
        </ul>
    </div>
</body>
</html>
cs


 실행결과 및 설명 

 

실행결과는 위와같이 나오게됩니다.


html 작성은 다음과 같습니다.

<body>
    <div>Hi!</div>
    <div id="item">
        직업들
        <ul class="job">
            <li>초딩</li>
            <li>중딩</li>
            <li>고딩</li>
        </ul>
        <ul class="job2">
            <li>공무원</li>
            <li>회사원</li>
            <li>자영업</li>
        </ul>
    </div>
</body>


이제 스크립트 영역을 확인해보겠습니다.

$(document).ready(function(){
        //전체 선택자
        $("*").css("color","#ffffff");
        
        //태그 선택자
        $("div").css("background","#000000");
        
        //아이디 선택자
        $("#item").css("background","#0000ff");
        
        //클래스 선택자
        $(".job").css("background","#ff9933");
        
        //후손 선택자
        $(".job li").css("color","#000000");
        
        //클래스 선택자
        $(".job2").css("background","#ffff33");
        
        //자손 선택자
        $(".job2 > li").css("color","#000000");
        
    });

우선 $(document).ready 를 통하여 모두 로드된후에 스크립트가 실행되도록 되어있습니다.


전체 선택자로 $("*").css("color","#ffffff"); 모든글자의 색상을 하얀색으로 변경하였습니다.

(#ffffff <--구글에 "색상코드표" 라고 검색하면 색상마다의 코드표를 확인할수 있습니다)


그다음 $("div").css("background","#000000"); 

div 요소들의 배경화면을 검정색으로 변경하였고


아이디 선택자를 활용하여 

$("#item").css("background","#0000ff"); 

아이디가 "item" 인 요소의 배경화면을 파란색으로 변경하였습니다.


그다음 클레스 선택자를 사용하여

$(".job").css("background","#ff9933");

클래스가 "job" 인 요소의 배경화면을 주황색으로 변경하였습니다.


다음 후손 선택자로

$(".job li").css("color","#000000");

클래스명이 "job" 요소의 안에 있는 전체의 "li" 글자색상을 검정색으로 변경하였습니다.


다시한번 클레스 선택자를 사용하여

$(".job2").css("background","#ffff33");

클래스가 "job2" 인 요소의 배경화면을 노랑색으로 변경하였습니다.


다음 자손 선택자로

$(".job2 > li").css("color","#000000");

클래스명이 "job2" 요소의 안에 있는 "li" (첫번째 댑스) 글자색상을 검정색으로 변경하였습니다.


그결과 위와같은 결과화면이 출력된것을 확인할수 있습니다.

(후손과 자손은 많이들 같은것인줄 압니다. 하지만 후손은 전체의 개념이고.. 자손은 첫번째 댑스의 개념입니다.)




 3. 제이쿼리 선택자 두번째 (속성,필터,함수)


위에서 선택자들에 대해서 알아보았습니다.

제이쿼리에서는 위에 알아본 기본선택자들 말고도 속성 선택자, 필터 선택자, 함수 선택자를 지원합니다.

그럼 하나씩 알아보도록 하겠습니다.


 사용방법 및 문법 


1. 속성 선택자


$("태그[태그속성='값']")


2. 필터 선택자


$("태그:기능")


3. 함수 선택자


$("css 작성 함수와 동일")



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){
        //속성 선택자
        $("input[type='text']").css("color","#ffcc33");
        
        //필터 선택자
        $("input:submit").css("color","#0000ff");
        
        //함수 선택자
        $("li:nth-child(2n+1)").css("color","#ff0000");
    });
 
</script>
</head>
<body>
    <form>
        ID <input type="text">
        <br/>
        
         <input type="submit" value="Login">
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
         </ul>
    </form>
</body>
</html>
cs


 실행결과 및 설명 

 

실행결과는 위와같이 나오게됩니다.


html 작성은 다음과 같습니다.

<body>
    <form>
        ID <input type="text">
        <br/>
        
         <input type="submit" value="Login">
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
         </ul>
    </form>
</body>


다음 스크립트 영역을 살펴보도록 하겠습니다.


첫번째로 속성 선택자를 사용하여

$("input[type='text']").css("color","#ffcc33");

input 태그의 타입이 text 인 요소들을 선택하여 글자의 색상을 주황색으로 변경하였습니다.

위의 결과를 보면 주황색으로 글자가 입력된것을 확인할수 있으며


다음으로 필터 선택자를 사용하여 

$("input:submit").css("color","#0000ff");

input 태그의 타입(기능) submit 인 요소를 선택하여 글자색상을 파란색으로 변경하였습니다.

그결과 버튼의 글자색상이 파란색으로 변경된것을 확인할수 있습니다.


마지막으로 함수 선택자를 사용하여

$("li:nth-child(2n+1)").css("color","#ff0000");

css에 입력하는 함수와 동일하게 li 요소들의 홀수 번째의 요소들만 노란색으로 글자가 변경되도록 하였습니다.

그결과 홀수번째 li 요소의 글자들의 색이 노란색으로 변경된것을 확인할수 있습니다.




 글을 마치며..


이렇게해서 제이쿼리의 선택자를 알아보았습니다.

제이쿼리는 자바스크립트에 비해 훨씬 간결하고 

직관직인 문법으로 선택자를 사용하기가 편한것을 느낄수 있습니다.

이상으로 글을 마치도록 하겠습니다. 모두 수고하세요!


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 




저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[jQuery 5강] 제이쿼리 기본함수 (기본 메서드)  (0) 2019.03.29
[jQuery 4강] 제이쿼리 DOM (문서객체)  (0) 2019.03.28
[jQuery 2강] 제이쿼리 기본문법  (0) 2019.03.26
[jQuery 1강] 제이쿼리 개요 및 개발환경구축  (0) 2019.03.22
[javascript 16강] 이벤트 종류  (0) 2019.02.22
댓글