mjeongriver
article thumbnail
Published 2023. 2. 17. 17:25
day87-jquery TIL/Jquery

1. 제이쿼리

 

 

1) 제이쿼리 다운로드

- 제이쿼리 검색 후 compressed 버전 선택

- 다른 이름으로 저장

- vscode 실행(open folder - jquery 폴더 생성 후 .vscode 복사 - js 폴더 생성 후 아까 다운로드 받은 파일 넣을 것)

- jquery01~03.html 생성

 

 

2) 제이쿼리 함수

 

 

* jquery01.html(제이쿼리 선택자),  jquery02.html(제이쿼리 문서 객체 조작 attr), jquery03.html(제이쿼리 문서 객체 조작 css)

더보기

- jquery01.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>Document</title>

    <!-- jquery -->
    <script src = "js/jquery-3.6.3.min.js"></script>

</head>
<body>
    
    <input type="text" id="melon" value="홍길동">

    <input type="text" class="apple">

    <script>
        
        // $("선택자로") 요소를 얻으면, 제이쿼리 시작 객체를 반환 해줍니다.
        // $("선택자").제이쿼리함수() 를 이용해서 태그를 제어합니다.
        
        // console.log( $("#melon")[0] ); //순수한 엘리먼트
        // console.log( $("#melon") );

        // var result = document.getElementById("melon").value;

        //값을 얻음
        var result = $("#melon").val();
        console.log(result);

        //값을 변경
        $("#melon").val("변경할 값");

        //
        $(".apple").val("변경할 값");

        
    </script>


</body>
</html>

 

- jquery02.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>Document</title>

     <!-- jquery -->
     <script src = "js/jquery-3.6.3.min.js"></script>

     
</head>
<body>
    
    <input type="text" class="test1" id="xx">

    <img src="#" class="test2">
    <img src="#" class="test3" width="" height="">

    <script>
        //값을 얻음
        // var xx = document.querySelector(".test1").id;
        var x = $(".test1").attr("id"); //id 속성을 얻음
        console.log(x);

        //src 값을 변경
        $(".test2").attr("src", "값을 변경");

        //여러 속성을 한번에 변경
        $(".test3").attr({
            src: "값을 변경",
            width: "200",
            height: "200"
        })
    </script>

</body>
</html>

 

- jquery03.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>Document</title>

     <!-- jquery -->
     <script src = "js/jquery-3.6.3.min.js"></script>

</head>
<body>

    <h3>스타일 제어</h3>

    <ul class="test1">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>

    <script>
        //js
        // var li = document.querySelectorAll(".test1 > li");
        // for(var i = 0; i < li.length; i++){
        //     li[i].style.backgroundColor = "red";
        // }

        //css 속성을 변경
        $(".test1 > li").css("backgroundColor", "red");

        //css 속성을 확인
        var color = $(".test1 > li").css("backgroundColor");
        console.log(color);

        //css 속성을 한번에 변경
        $(".box").css({
            backgroundColor : "red",
            width: "200px",
            heigth: "200px",
            display: "inline-block"
        })

    </script>
    

</body>
</html>

 

 

* jquery04.html(제이쿼리 문서 조작 html),  jquery05.html(제이쿼리 클래스 조작 addClass (), removeClass (),

toggleClass)

더보기

- jquery04.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>Document</title>

     <!-- jquery -->
     <script src = "js/jquery-3.6.3.min.js"></script>

</head>
<body>
    
    <div class="test1"></div>
    <div class="test2"></div>

    <script>
        //js
        // document.querySelector(".test1").innerHTML = "<a href='#'>kkk</a>";
    
        //위와 결과는 같음
        //값을 변경
        $(".test1").html("<a href='#'>kkk</a>"); //태그로 변경
        $(".test1").html(""); //공백으로 변경
        $(".test1").html("홍길동");

        //값을 얻음
        var result = $(".test1").html();
        console.log(result);

        //text() - 순수한 텍스트로 인식
        $(".test2").text("<a href='#'>kkk</a>"); //텍스트로 인식 됨

    </script>


</body>
</html>

 

- jquery05.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>Document</title>

     <!-- jquery -->
     <script src = "js/jquery-3.6.3.min.js"></script>

</head>
<body>

    <button id="btn" class = "btn btn-default">클래스 조작</button>

    <script>
        //js
        // document.getElementById("btn").classList.add("myBtn");
        // document.getElementById("btn").classList.remove("myBtn");

        $("btn").addClass("myBtn"); //클래스 추가
        $("btn").removeClass("myBtn"); //클래스 삭제


    </script>

    <button id ="tog" class="dark">토글 형식</button>

    <script>

        $("#tog").click(function() {

            // console.log(this)
            // $(this).toggleClass("dark");
            this.classList.toggle("dark");

        })

    </script>
    
</body>
</html>

 

3) 제이쿼리 이웃, 형제 노드 조작

 

 

* Jquery06.html(이웃, 형제 노드 조작)

더보기

- jquery06.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>Document</title>

     <!-- jquery -->
     <script src = "js/jquery-3.6.3.min.js"></script>

</head>
<body>
    
    <table class="xxx">
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>버튼</th>
            <th>테스트</th>
        </tr>
        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>
                <button type="button" class="btn">버튼</button>
            </td>
            <td>
                <span><i class="test">테스트1</i></span>
                <span >테스트2</span>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>이순신</td>
            <td>
                <button type="button" class="btn">버튼</button>
            </td>
            <td>
                <span><i class="test">테스트1</i></span>
                <span >테스트2</span>
            </td>
        </tr>
    </table>

    <script>

        /*
        1. closest("선택자") - 최근접 단일 부모를 선택합니다.
        2. prev() - 이전 형제
        3. next() - 다음 형제
        4. siblings() - 모든 형제
        5. first() - 첫번째 자식
        6. last() - 마지막 자식
        7. children - 모든 자식
        8. find("선택자") - 특정 자식
        */


        $(".btn").click(function() {
            //this or e.target
            // console.log(this);
            // console.log(e.target);

            // console.log( $(this).closest("td") ); //최근접 td 태그
            // console.log( $(this).closest("tr") ); //최근접 tr 태그
            // console.log( $(this).closest(".xxx") ); //최근접 xxx 클래스

            // console.log( $(this).closest("td").prev() ); //이전 형제
            // console.log( $(this).closest("td").next() ); //다음 형제
            // console.log( $(this).closest("td").siblings() ); //모든 형제

            // console.log( $(this).closest("tr").children() ); //모든 자식들
            // console.log( $(this).closest("tr").children().first() ); //첫째
            // console.log( $(this).closest("tr").children().last() ); //막내

            console.log( $(this).closest("tr").find(".test")); //.test의 자식
            console.log( $(this).closest("tr").find("span")); //span 태그 자식
            
            

        })

    </script>

</body>
</html>

 

4) 제이쿼리 이벤트 함수(많이 사용하므로 중요!)

 

4번째: 위에가 실행되기 전에 밑에부터 되기 때문에 결과가 안나옴 

* Jquery07.html(페이지 로딩 시 스크립트를 실행), Jquery08.html(클릭시 소괄호 안에 익명 함수 실행, 이벤트 위임 함수)

더보기

- jquery07.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>Document</title>

    <!-- jquery -->
    <script src = "js/jquery-3.6.3.min.js"></script>


</head>
<body>

    <script>

        //js - 페이지 로드 이후 실행하는 이벤트 - 페이지 별로 1개만 사용 가능
        // window.onload = function(){
        //     console.log( $("#btn") )
        // }

        //jquery - 페이지 로드 이후 실행하는 함수: 여러개 사용 가능
        $(document).ready(function() {
            console.log( $("#btn") )
        })

        $(document).ready(function(){
            console.log(2);
        })

    </script>

    <button id="btn">도큐먼트 레디</button>
    
</body>
</html>

 

- jquery08.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>Document</title>

    <!-- jquery -->
    <script src = "js/jquery-3.6.3.min.js"></script>

</head>
<body>

    <button id="btn">이벤트 등록</button>
    <input type="text" id="tag">

    <select id="sel">
        <option>1</option>
        <option>2</option>
    </select>

    <div style="background-color: red;" id="mos">마우스 이벤트</div>

    <script>

        //클릭
        $("#btn").click(function(){
            console.log("click");
        })

        //input 태그에 글 쓸 때마다 console.log 찍힘
        $("#tag").keyup(function(){
            console.log("key~");
        })

        //체인지(값 변경할 때마다 console.log 찍힘)
        $("#sel").change(function(){
            console.log("chan");
        })

        //마우스 관련 이벤트(mouseenter: 진입)
        $("#mos").mouseenter(function(){
            console.log("mouse enter");
        })

        $("#mos").mouseleave(function(){
            console.log("mouse leave")
        })

    </script>

    <hr/>

    <h3>이벤트 위임 방식 on()</h3>

    <div id="box">
    </div>

    <script>

        setTimeout(function() {
            var str = "";
            str += "<a href='#'>태그1</a>";
            str += "<a href='#'>태그2</a>";
            str += "<a href='#'>태그3</a>";
            $("#box").html(str);
        }, 2000); //2초 뒤에 태그 생성

        //어림도 없음
        // $("a[href='#']").click(function(){
        //     console.log("a링크 실행");
        // })

        //(이벤트 종류, 위임시킬 선택자, 핸들러)
        $("#box").on("click", "a", function() {
            event.preventDefault; //고유 이벤트 중지
            console.log("a링크 실행");
        })


    </script>

    
</body>
</html>

 

- 비동기 통신 Ajax

- 화면은 그대로인데 서버와의 통신을 통해서 데이터를 가지고 온다.

- 속성에 맞게 값만 넣어주면 됨

- * ContentType: 내가 데이터를 줄건데 이건 json, text 형식이다 하고 적어주는 형식

 

보내는 데이터가 이상할 때 나오는 오류

 

- get 방식으로 보내는 예제: 쿼리 파람일 때

 

 

* RestBasicController, jquery09.html

더보기

- RestBasicController

	//Jquery - ajax 예시
	@PostMapping("/getAjax")
	@CrossOrigin({"http://127.0.0.1:5501",
	"http://localhost:5501" })
	public Map<String, Object> getAjax(@RequestBody SimpleVO simpleVo){

		//받은 데이터
		System.out.println(simpleVo.toString());

		//보내는 데이터 
		Map<String, Object> map = new HashMap<>();

		SimpleVO vo = new SimpleVO("aaa123", "홍길동", "1");
		map.put("total", 100);
		map.put("data", vo);

		return map;
	}

	@GetMapping("/getAjax2/{topic}")
	@CrossOrigin("*") //전부 허용
	public String getAjax2(@PathVariable("topic") String topic){
		
		System.out.println(topic);
		
		return "success";
	}

 

- jquery09.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>Document</title>

    <!-- jquery -->
    <script src = "js/jquery-3.6.3.min.js"></script>

</head>
<body>

    <button id="btn">에이젝트</button>

    <script>
        $("#btn").click(function() {
            
            //ajax
            $.ajax({
                url: "http://localhost:8383/getAjax", //요청 주소
                type: "post", //요청 타입
                data: JSON.stringify({id: "aaa123", name: "minzzang"}), //보낼 데이터 
                contentType: "application/json", //보내는 데이터에 대한 타입(필수)
                dataType: "json", //json, xml, html... 등등(받는 데이터 형식)
                success: function(result) { //성공 시 콜백
                    console.log(result);
                }, 
                error : function(err) { //실패 시 콜백
                    console.log(err);
                }
            })

        })
    </script>

    <hr/>

    <input type="text" name="topic">
    <button id="btn2">get 방식</button>

    <script>
        //버튼을 클릭하면 get 방식으로 ajax처리를 합니다.
        //getAjax2/topic값을 실어주는 형태로 요청 처리 합니다.
        //응답 데이터는 "success"

        $("#btn2").click(function(){

            var data = $("input[name='topic']").val();

            $.ajax({
                url: "http://localhost:8383/getAjax2/" + data,
                type: "get", //전송 타입
                success: function(result) { //성공 시 콜백
                    console.log(result);
                }, 
                error : function(err) { //실패 시 콜백
                    console.log(err);
                }
            })
        })
    </script>
    
</body>
</html>

 

- jquery user interface에서는 jquery가 제공하는 거 사용 가능함

 

2번째 사진 아래 소스코드 볼 수 있음

 

* jquery10.html

더보기

- jquery10.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>Document</title>

    <!-- jquery-ui.css -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
 
    <!-- jquery-ui -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    
    <!-- jquery-ui js -->
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

</head>
<body>

    <script>
    $(function(){
        $("#datepicker").datepicker({
            showButtonPanel: true //옵션
        });

        $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
    })
    </script>
    
    <h3>제이쿼리 플러그인(데이트 피커)</h3>
    <input type="text" id="datepicker">

</body>
</html>

 

profile

mjeongriver

@mjeongriver

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

티스토리툴바