Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				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

Tags more

Archives

Today

Total

관리 메뉴

No sweet without sweat

[JavaScript] - jquery(선택자) - 1 본문

JavaScript

[JavaScript] - jquery(선택자) - 1

Remi 2022. 8. 1. 22:46

728x90

1. 선택자

- HTML 요소를 선턱하여 가져옴.

- 제이쿼리 선택자는 css 선택자와 마찬가지로 디자인 속성을 적용할 때 사용할 수 있으며, '동적' 스타일을 적용할 수 있다.(<->HTML - 정적)

1) 문서 객체 모델(DOM - Document Object Model) : HTML 문서 객체 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <h1>좋아하는 FOOD</h1>
    <section id ="food">
        <h2>한식</h2>
        <ul>
            <li>김치</li>
            <li>불고기</li>
        </ul>
    </section>
    <section id ="juice">
        <h2>과일쥬스</h2>
        <ul>
            <li>사과</li>
            <li>토마토</li>
        </ul>
    </section>   
</body>
</html>

실행 창 :

DOM

좋아하는 FOOD

한식

김치
불고기

과일쥬스

사과
토마토

2) 선택자 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>선택자</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#title").css("color","red");
        });
    </script>
</head>
<body>
    <h1 id="title">제목</h1>
</body>
</html>

출력값 :

선택자

제목

3) 직접선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>선택자</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("*").css("border","1px solid blue");
        });
    </script>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접 선택자</h3>
</body>
</html>

출력 값:

4) 아이디 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선택자</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#tit").css("background-color","#ff0")
            .css("border","2px solid #f00");
        });
    </script>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2 id = "tit">선택자</h2>
    <h3>직접 선택자</h3>
</body>
</html>

* 체이닝 기법: 한객체에 다양한 메서드를 줄줄이 이어서 사용

$(요소 선택).css(속성1, 값1).css(속성2, 값2).....

출력 값:

5) 클래스 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $(".tit").css("background-color","#ff0")
            .css("border","2px solid #f00");
        });
    </script>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2 class = "tit">선택자</h2>
    <h3>직접 선택자</h3>
</body>
</html>

출력값:

6) 요소명 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("h1").css("background-color","#ff0")
            .css("border","2px solid #f00");
        });
    </script>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접 선택자</h3>
</body>
</html>

출력값:

7) 그룹선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#tit3,h1").css("background-color","#ff0")
            .css("border","2px solid #f00");
        });
    </script>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3 id ="tit3">직접 선택자</h3>
    <h3>인접 선택자</h3>

</body>
</html>

출력값:

8) 종속 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){

            $("h1.tit").css("background-color","#0ff")
            .css("border", "2px dashed #f00");
        });
    </script>
</head>
<body>
    <h1 class ="tit">제이쿼리</h1>
    <h2>선택자</h2>
    <h3 class ="tit">직접 선택자</h3>

</body>
</html>

출력값:

9) 인접 관계 선택자

- 인접 관계 선택자는 직접 선택자로 요소를 먼저 선택후, 그 다음 선택한 요소와 가까이에 있는 요소 선택할때 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        $("h2").next().css("color","green");
        $("h2").parent().css("border","1px solid #f00");

    </script>
</head>
<body>
    <div id = "wrap">
        <div id = "inner_wrap">
            <h1>제목1</h1>
            <h1>제목2</h1>
            <p>내용1</p>
            <p>내용2</p>
            <p>내용3</p>
        </div>

    </div>
</body>
</html>

출력 값:

728x90

저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

카카오톡 채널 추가 (0)	2022.08.03
[JavaScript] - jquery(선택자) - 2 (0)	2022.08.02
[Javascript] - inline, 조건문, 반복문, 배열함수(push,pop,unshift,shift) (0)	2022.07.28
[Javascript] - alert, prompt, console (0)	2022.07.27
속성 상태에 따른 탐색 선택자 (visible, hidden, selected, checked) (0)	2021.07.25