[jQuery] jQuery 기본과 직접선택자

2주녘 2024. 6. 26. 08:51

2024. 6. 26. 08:51

들어가기 전에

💡 라이브러리?

자주 사용되는 함수들의 모임(묶음)을 말합니다.

💡 jquery를 사용하게 된 배경

웹 브라우저(익스플로러, 크롬, 사파리 등…) 간의 js 문법이 잘 동작하지 않았음
- 크로스 브라우저 문제 ⇒ jquery가 등장
바닐라 js 보다 코딩이 짧고 사용이 쉬운 것이 장점
단점으로는 용량이 크고, 성능이 떨어짐

💡 jquery?

함수를 이용해서 DOM을 조작하는 것임

jQuery 기본문법

$(function() {jquery 실행문});

HTML 위쪽에 넣어도 실행되게 만드는 구문 ⇒ HTML 태그 보다 뒤 늦게 실행을 시켜주는 구문

// 사용법

$(function(){
	$('#title').css('color', 'skyblue');
});

전체 선택자

‘*’ 키워드를 사용하며, 전체 태그를 선택함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            // * : 전체선택자
            // 전체 태그를 선택해서 외곽선을 1px solid blue 해라.
            // jquery : $("*").css("속성", "값");   // 디자인 조작
            $("*").css("border", "1px solid blue");
        })
    </script>
</body>
</html>

결과

css 선택자

1. 직접선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2 id="tit">선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>

    <script>
        $(function(){
            // jquery 작성
            // 예제 : 배경색: #ff0, border : 2px solid black
            // TODO : 메소드(함수) 체이닝
            // 사용법 : $("CSS선택자").함수().함수() ...
            $("#tit").css("background-color", "#ff0")
                    .css("border", "2px solid black");
        })
    </script>
</body>
</html>

결과

[연습문제]

id = tit 선택해서 / background-color : #ff0 / border : 2px dashed black 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 연습문제 1) id = tit 선택해서 -->
    <!-- background-color : #ff0 -->
    <!-- border : 2px dashed black -->
    <h1>제이쿼리</h1>
    <h2 id="tit">선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            $("#tit").css("background-color", "#ff0")
                    .css("border", "2px dashed black");
        })
    </script>
</body>
</html>

결과

[연습문제 2]

h2 태그를 선택해서 디자인 적용하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 연습문제 h2 태그를 선택해서 디자인 적용 -->
    <!-- background-color : skyblue -->
    <!-- border : 2px dashed black -->
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            $("h2")
            .css("background-color", "skyblue")
            .css("border","2px dashed black");
        })
    </script>
</body>
</html>

결과

저작자표시 비영리 변경금지 (새창열림)

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

[jQuery] 인접 관계 선택자 (0)	2024.06.26
[jQuery] 직접선택자(2) (0)	2024.06.26

Just Do IT