자바스크립트 7강. JQuery

바닐라 자바스크립트 문법

: 라이브러리 도움 없이 순수한 자바스크립트

이때까지 라이브러리의 도움 없이 순수한 자바스크립트 문법을 배웠다.

라이브러리의 도움을 받아 좀 더 편하게 코드를 짜보자.

자바스크립트는 브라우저가 인식하는 언어이다.

자바스크립트로 뭘 할 수 있나?

기본적으로 http프로토콜은 html 파일을 돌려주는데

이때마다 새로고침이 일어난다.

나무는 다시 그릴 필요가 없었는데 다 다시 그려진 것이다.

이는 낭비가 너무 심하다.

그래서 나온 통신이 AJAX 통신이다.

AJAX 통신을 해서 fetch 요청을 하면

JSON 데이터가 응답이 오는데

그러면 해 부분만 지우고 달로 다시 그려준다.

부분 리로드가 가능해진 것이다.

통신도 경량화되고 부분만 다시 그릴 수 있다.

AJAX 통신을 할 때 뭐가 힘들지

일단 fetch 알아야 하고,

자바스크립트로 dom(해)도 찾아야 하고,

기존 돔 삭제해야 하고,

달 집어넣어야 하고,

이벤트 리스너도 달아야 하고,

이 과정을 바닐라 자바스크립트로 했었다.

이렇게 하면 코드도 길고 복잡해진다.

이걸 JQuery라는 라이브러리로 쉽게 구현해보자.

JQuery는 윈도우의 document에 한정적이다.

dom!!

$(selector).action( )

selector자리에 css 선택자를 넣어주면 된다.

이제 document.querySelector 안 써도 된다!

선택자 뒤에는 이벤트를 적어주는 것이다.

제이쿼리는 꼭 따로 공부해봐야 한다!!

https://www.w3schools.com/jquery/jquery_selectors.asp

jQuery Selectors

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

바닐라 JS

let pDom = document.querySelector("p");

pDom.addEventListener("click", ( ) => { });

↓

$("p").click(( ) => { });

자바스크립트는 돔을 제어해야 하니까

(돔이 다 그려진 다음 실행되어야 하니까)

가장 아래쪽에 코드를 적어준다.

jquery 공식 사이트

https://api.jquery.com/

jQuery API Documentation

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t

api.jquery.com

우리는 제이쿼리로 돔 제어만 하면 된다!

UI는 부트스트랩에서 다 지원해주잖아!

간단히 JQuery HTML 예제를 살펴보자.

GET 돔의 데이터 찾는 방법

3개의 컨텐트를 제공한다.

text( ) 글자 제공 : 안녕

html( ) 코드 제공 : <p>안녕</p>

<div>

</div>

val( ) value제공 : input 태그 값을 리턴

SET 돔에 데이터를 넣는 방법

GET과 메서드가 같은데

괄호 안에 값을 넣어주기만 하면 됨

ADD

보통 댓글이나 블로그 글을 쓰면 prepend 위치에 추가된다.

box1을 기준으로 찾으니까 before가 아닌 것에 주의하자.

before는 같은 라인에서 찾는 것

prepend는 자식에서 찾는 것

<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        div {
            border: 2px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id = "reply-box">
        <div id="item-2">반가워!</div>
        <div id="item-1">잘잤어?</div>
    </div>

    <button id="btn-before">before</button>
    <button id="btn-prepend">prepend</button>
    <button id="btn-after">after</button>
    <button id="btn-append">append</button>

    <script>
        let count = 1;

        $("#btn-before").click(()=>{
            $("#item-2").before(`<div>비포 댓글${count}</div>`);
            count ++;
        });

        $("#btn-after").click(()=>{
            $("#item-2").after(`<div>애프터 댓글${count}</div>`);
            count ++;
        });

        $("#btn-append").click(()=>{
            $("#reply-box").append(`<div>어펜드 댓글${count}</div>`);
            count ++;
        });

        $("#btn-prepend").click(()=>{
            $("#reply-box").prepend(`<div>프리펜드 댓글${count}</div>`);
            count ++;
        });
    </script>
</body>
</html>

REMOVE

remove와 empty 차이