러닝자바스크립트
8 minutes read (About 1220 words)

chapter19. 제이쿼리

제이쿼리는 DOM을 조작하거나, Ajax 요청을 실행할 때 널리 쓰이는 라이브러리이다. 제이쿼리는 3개의 장점 존재한다.

  • 브라우저 호환성을 걱정하지 않아도 된다.
  • 제이쿼리의 Ajax API는 매우 단순하다.
  • 제이쿼리는 내장된 DOM API를 더 유용하고 단순하게 바꾼 메서드를 제공한다.

19.1 맥가이버 나이프, 달러 기호

제이쿼리는 자바스크립트에서 달러 기호를 식별자로 쓸 수 있다는 장점을 활용한 첫 번째 라이브러리 중 하나이다.
프로젝트에서 제이쿼리를 사용할 때는 jQuery나 $를 사용한다.

19.2 제이쿼리 불러오기

CDN을 이용하여 불러올 수 있다.

1
<script src="http://code.jquery.com/jquery-latest.min.js" />

19.3 DOM 기다리기

제이쿼리는 브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음에만 호출되는 콜백 안에 코드를 작성한다.

1
2
3
4
5
6
7
8
$(document).ready(function() {
  //여기 있는 코드는 html을 모두 불러오고 DOM이 구성된 다음에 실행된다.
});

//단축형
$(function() {
  //여기 있는 코드는 html을 모두 불러오고 DOM이 구성된 다음에 실행된다.
});
위 코드는 여러 번 써도 안전하므로, 제이쿼리 코드를 몇 개로 나누어 써도 모두 DOM을 불러온 뒤에 실행된다.

19.4 제이쿼리로 감싼 DOM 요소

제이쿼리로 DOM을 조작 할 때 가장 많이 쓰는 방법은 제이쿼리로 DOM 요소를 감싸는 것
제이쿼리 함수($)로 DOM 요소 셋을 감싼 것을 제이쿼리 객체로 부른다.
제이쿼리 함수를 호출 할 때는 주로 css 선택자나 html을 사용한다.

이번장에 사용할 HTML 문서
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Simple html</title>
    <style>
      .callout {
        border: 1px solid #ff0080;
        margin: 2px 4px;
        padding: 2px 6px;
      }
      .code {
        background: #ccc;
        margin: 1px 2px;
        padding: 1px 4px;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Simple Html</h1>
    </header>
    <div id="content">
      <p>This is a <i>simple</i> HTML file.</p>
      <div class="callout">
        <p>this is as fancy as...we'll get!</p>
      </div>
      <p>
        IDs (such as <span class="code">#content</span>) are unique (there can
        only be one per page).
      </p>
      <p>
        Classes (such as <span>.callout</span>) can be used on many elements
      </p>
      <div id="callout2" class="callout fancy">
        <p>A single HTML element can have multiple classes</p>
      </div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
  const $paras = $("p");
  $paras.length; //5
  typeof $paras; //"object"
  $paras instanceof $; //true
  $paras instanceof jQuery; //true
});

//html로 제이쿼리 호출
const $newParas = $("<p>new created</p>");

19.5 요소 조작

제이쿼리에는 text와 html 메서드가 있다.
이들 요소는 각각 textContent, innerHTML 프로퍼티에 대응한다.

1
2
3
// ## 요소 조작
$("p").text("All paragraphs replaced");
$("p").html("<i>All</i> paragraphs replaced");

제이쿼리는 쉽게 여러 요소를 동시에 수정 가능하다.
제이쿼리는 기본적으로 제이쿼리 객체에 들어있는 모든 요소에 같은 작업을 하면서 루프 실행을 대신함
특정 부분만 바꾸려면 제이쿼리의 eq 메서드를 사용

eq()
1
2
3
4
5
6
7
//특정 문단 조작
$("p") //p태그중에
  .eq(2) //3번째 문단에
  .html("<i>All</i> paragraphs replaced"); //html 조작

//요소제거
$("p").remove();

제이쿼리 메서드는 모두 제이쿼리 객체를 반환한다.
따라서 반환된 객체에서 다시 메서드를 호출하는 식으로, 메서드 체인으로 연결 가능하다.
체인을 사용하면 아주 간단히 여러 요소를 조작 가능하다.

  • 삽입할 자리에서 호출

    append() : 일치하는 요소에 자식을 추가
    before() 일치하는 요소 앞자리에 형제를 삽입
    after() : 일치하는 요소 뒷자리에 형제를 삽입

  • 삽입할 요소에서 호출

    appendTo() :
    insertBefore() > insertAfter() :

1
2
3
4
5
6
7
$("p").append("<sup>*</sup>");
$("p").after("<sup>뒤형제</sup>");
$("p").before("<sup>앞형제</sup>");

$("<sup>*</sup>").appendTo("p"); //$("p").append("<sup>*</sup>")과 같음
$("<hr/>").insertBefore("p"); //$("p").before("<hr/>");
$("<hr/>").insertAfter("p"); //$("p").after("<hr/>");

제이쿼리에서는 요소의 스타일도 쉽게 변경 가능
addClass() : 클래스 추가
removeClass() : 클래스 제거
toggleClass() : 클래스 토글
filter() : 셋 요소 일치 선택자에 맞는 요소만 남도록 선택범위축소
not() : filter()의 반대
find() : 주어진 선택자에 일치하는 자손만 남김

1
2
3
4
5
6
7
8
//홀수 문단만 빨간색으로
$("p:odd").css("color", "red");
//p태그뒤에 hr을 넣고 p태그 안에 각주를 넣고 홀수번째 p태그에 텍스트 빨간색
$("p")
  .after("<hr/>")
  .append("<sup>*</sup>")
  .filter(":odd")
  .css("color", "red");

19.6 제이쿼리 취소

get(): 제이쿼리 객체로 감싼 것을 취소하고 dom 요소에 직접 접근하기 위해서는 get 메서드를 사용해야 한다.

1
2
3
//## 19.6 제이쿼리 취소
const para2 = $("p").get(1); //두번째 <p>
const paras = $("p").get(); //모든 <p>

19.7 Ajax

제이쿼리에는 Ajax 호출을 간편하면서도 세밀히 컨트롤 할 수 있는 메서드가 있다. 가장 널리 쓰는 Ajax 호출을 간편하게 바꾼 get과 post 메서드가 있다. 이 메서드는 콜백을 지원하지만, 서버 응답을 처리할때 권장하는 방법인 프라미스를 반환하기도한다.

chapter20. 노드
chapter18. 브라우저의 자바스크립트

Comentarios

Categorias

Nube de etiquetas

const for git세팅 if let map set var 배열 스코프 이터레이터 인스턴스 제너레이터 제어문 클래스 클로저 프로퍼티
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×