jQuery적용하기

jQuery를 적용하는 방법에는 두가지가 있음
1. CDN방식 : http통신으로 파일을 제공하는 서버에서 받아오는것
2. 파일다운로드 : 정해진 경로에 js파일 다운해서 불러오는것

jquery활용방식

jquery를 이용할려면 주로 onload와 비슷한 속성인 ready()함수안에 넣어서 이용함.

jquery사용문법(DOM)

$("선택자").jquery함수명(매개변수); jQuery("선택자").jquery함수명(매개변수); jQuery는 chaining $("선택자").jquery함수명(매개변수).jquery함수함수명().jquery함수명().....;

Element를 가져오는 방법
$("선택자")||jQuery("선택자") => jquery방식의 element를 불러옴.

html
css
javascript
jquery

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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>jquery작성하기</title>
    <!-- <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        //ready함수를 적용하는 방법 == onload
        $(document).ready(function(){
            $("p").css("backgroundColor","yellow");
        });
        $(document).ready(function(){
            $("h1").css("backgroundColor","green");
        });
        //짧게쓰고 많은 일을 하자!
        $(function(){
            $("h2+p").css("textShadow","3px 3px 5px red");
        });
        $(()=>{
            $("h2").css("backgroundColor","purple");
        });
    </script>
</head>
<body>
    <h1>jQuery적용하기</h1>
    <p>
        jQuery를 적용하는 방법에는 두가지가 있음<br>
        1. CDN방식 : http통신으로 파일을 제공하는 서버에서 받아오는것<br>
        2. 파일다운로드 : 정해진 경로에 js파일 다운해서 불러오는것<br>        
    </p>
    <!-- <P>1</P>
    <P>2</P>
    <P>3</P> -->
    <script>
        $("p").css("color","red");
    </script>
    <h2>jquery활용방식</h2>
    <p>
        jquery를 이용할려면 주로 onload와 비슷한 속성인 ready()함수안에 넣어서
        이용함.
    </p>
 
    <h2>jquery사용문법(DOM)</h2>
    <p>
        $("선택자").jquery함수명(매개변수);
        jQuery("선택자").jquery함수명(매개변수);
        jQuery는 chaining
        $("선택자").jquery함수명(매개변수).jquery함수함수명().jquery함수명().....;
    </p>
    <p>
        Element를 가져오는 방법<br>
        $("선택자")||jQuery("선택자") => jquery방식의 element를 불러옴.
    </p>
    <p id="jq">p1</p>
    <p id="jq">p2</p>
    <p>p3</p>
    <ul class="target">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jquery</li>
    </ul>
    <button onclick="checkElement();">Element객체확인</button>
    <script>
        const checkElement=()=>{
            //jQuery방식으로 element불러오기
            //id불러오기
            console.log($("#jq"));
            $("#jq").css("backgroundColor","lime");
            //js방식으로 element를 불러오기
            console.log(document.getElementById("jq"));
            $(document.getElementById("jq")).css("color","magenta");
            //jQuery방식 태그로 불러오기
            console.log($("li"));
            //다수의 Element를 가지고 있을때는 인덱스 번호로 접근이 가능함.
            //인덱스번호로 접근했을때는 jsElement로 가져온것으로 jquery함수를
            //사용할 수 없음
            console.log($($("li")[0]).css("backgroundColor","blue"));
            console.log($("li")[1]);
            //jquery방식으로 다수의 값을 가져와 함수를 적용하면 가져온 Element모두가 적용됨(자동으로 for문을 실행해서 다 적용시킴)
            $("li").css("fontSize","30px");
 
            let lis=document.querySelectorAll("li");
            console.log(lis);
            for(let i=0;i<lis.length;i++){
                lis[i].style.color="green";
            }
        }
    </script>
 
    
 
 
 
</body>
</html>
Colored by Color Scripter
cs