jQuery 2 - [기본, 문법, 함수, 선택자, 메소드 체이닝, getter, setter]

목차

jQuery 기본

---

코딩의 시작, TCP School

jQuery 문법

---

• 제이쿼리를 사용하면 간편하게 HTML요소를 선택하고
• 선택된 요소에 손쉽게 특 동작을 설정 가능

 

$(CSS선택자).동작함수이름();

 

• $

  
  
  • 제이쿼리를 의미, 제이쿼리에 접근할 수 있게 해주는 식별자
  • 선택자를 이용하여 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정

 

$() 함수

• $()

  
  
  • 선택된 HTML 요소를 제이쿼리에서 이용 가능한 형태로 생성해 주는 역할
  • 인수(parms) : HTML 태그 이름 or CSS 선택자를 전달하여 특정 HTML 요소를 선택 가능
  • $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 표현

 

Document 객체의 ready() 메소드

보통 자바스크립트코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다. 그래서 다음과 같은 경우 오류가 발생한다

 

1. 아직 생성되지 않은 HTML 요소에 속성을 추가할 경우
2. 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우

 

아직 생성되지 않은 HTML 요소에 속성을 추가하는 예제

 

---

const func = function () {
    addAttribute(); // 아이디가 "para"인 HTML 요소에 속성 추가
    createElement(); // 아이디가 "para"인 HTML 요소를 생성
}

const createElement = function() {
    const criteriaNode = docuemnt.getElemntById("text"); // id가 text인 element를 얻어온다.
    const newNode = document.createElemnt("p"); // p element를 생성
    newNode.innerHTML = "새로운 단락";    // p element 내부에 "새로운 단락" 추가
    newNode.setAttribute("id", "para");
    document.body.insertBefore(newNode, criteriaNode); // id가 text인 element이전에 newNode 추가
}

const addAttribute() {
    document.getElementById("para").setAttribute("style", "color:red");
}

 

• "para"라는 element가 생성되기 전
• addAttribute()를 통해 아직 정의되지 않은 "undefined" 를 참조
• undefined에는 setAttribute()라는 메소드가 없으므로 해당 코드는 에러를 발생시킨다.

 

그래서 자바스크립트에서는 window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.

 

window.onload = function() {
    // 코드
}

// 마찬가지로 제이쿼리에서는 Docuemnt 객체의 ready() 메소드를 이용하여 같은 결과를 보장한다.
$(document).ready(function() {
    // 제이쿼리 코드
});

// jQuery Team에서는 같은 결과를 보장하는 더욱 짧은 문법을 제공
$(function() {
    // 제이쿼리 코드
});

// 다음은 문서가 모두 로드되는 시점과 창이 모두 로드되는 시점의 차이를 보여주는 예제
$(document).ready(function() {
    $("#doc").text("문서가 전부 로드");
}));

$(window).load(function() {
    $("#win").text("창이 모두 로드");
});

// 문서기 모두 로드된 이후, 창의 로드가 완료 된다.

---

 

CSS 선택자를 이용한 선택

제이쿼리에서는 CSS 선택자를 이용하여 HTML 요소 선택이 가능하다.

• 태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택 가능
• getElementsByTagName() 메소드와 같은 동작을 수행

 

---

$(function(){
    $("p").on("click", function() {            // <p> 요소를 모두 선택
        $("span").css("fontSize", "28px");    // <span> 요소를 모두 선택
    });
});

// $() 함수에 전달되는 인수는 반드시 따옴표(")를 사용한 문자열 형태로 전달되어야 한다.

// id를 사용하여 특정 HTML 요소 선택 가능
$(function() {
    $("p").on("click", function() {
        $("#jq").css("border", "2px bolid orange"); /// id가 "jq"인 요소를 선택
    });
});

// 클래스를 선택하여 같은 클래스에 속하는 HTML 요소를 모두 선택 가능
// getElementsByClassName() 메소드와 같은 동작을 수행
$(function() {
    $("p").on("click", function() {
        $(".jq").css("backGroundColor", "lightGray"); // 클래스가 "jq"인 요소를 모두 선택
    });
});

// 속성을 사용하여 속성이 조건에 맞는 HTML 요소를 선택 가능
$(function() {
    $("p").on("click", function() {
        $("img[alt='flower']"].attr("src", "/example/images/img_monalisa.png");
    });
});

---

 

jQuery 선택자

• 제이쿼리에서는 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용 가능
• 이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링 가능

 

선택한 요소의 저장

제이쿼리에서는 선택한 요소들을 변수에 저장하여 사용 가능

문서내의 모든 <li> 요소를 선택하여 변수에 저장한 후, 해당 변수를 사용하는 예제

---

$(function() {
    let items = $("li"); // <li> 요소를 모두 선택하여 변수 items에 저장.
    $("button").on("click", function() {
        $("len").text("저장된 <li> 요소의 총 개수는 " + itesm.length + "개 입니다");
    });
});

// - 이렇게 저장된 요소들은 변수에 저장될 당시의 요소들만 저장
// - 요소가 저장된 이후에 문서에 추가되거나 삭제된 요소들을 자동으로 갱신하지는 않는다.

---

 

선택한 요소의 필터링

제이쿼리에서는 선택한 요소 중 더욱 세분화된 선택을 하기 위한 필터링 진행 가능

문서 내의 모든 <li> 요소 중에서 <span> 요소를 가지고 있는 요소를 선택하는 예제

---

$(function() {
    $("button").on("click", function() {
        $("li:has(sapn)").text("<span>요소를 가지고 있는 아이템");
    });
});

---

필터링에 사용할 수 있는 선택자

 

선택자	설명
:eq(n)	선택한 요소 중에서 인덱스가 n인 요소를 선택
:gt(n)	선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택
:lt(n)	선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택
:even	선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택
:odd	선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택
:first	선택한 요소 중에서 첫 번째 요소를 선택
:last	선택한 요소 중에서 마지막 요소를 선택
:animated	선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택
:header	선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택
:lang(언어)	선택한 요소 중에서 지정한 언어의 요소를 모두 선택
:not(선택자)	선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택
:root	선택한 요소 중에서 최상위 루트 요소를 선택
:target	선택한 요소 중에서 웹 페이지 URI의 fragemnt 식별자와 일치하는 요소를 모두 선택
:contains(text)	선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택
:has(선택자)	선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택
:empty	선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택
:parent	선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택

 

input 요소의 선택

제이쿼리에서는 입력 양식에 관련된 특정 요소를 쉽게 선택 가능

---

$(function() {
    $("button").on("click",  function() {
        // 체크되어 있는 요소를 모두 선택함.
        $(":checked").next().text("체크되어 있는 요소는 이 요소입니다.");
    });
});

---

특정 input 요소를 선택할 수 있는 선택자

 

선택자	설명
:button	type 속성값이 "button"인 요소를 모두 선택
:checkbox	type 속성값이 "checkbox"인 요소를 모두 선택
:file	type 속성값이 "file"인 요소를 모두 선택
:image	type 속성값이 "image"인 요소를 모두 선택
:password	type 속성값이 "password"인 요소를 모두 선택
:radio	type 속성값이 "radio"인 요소를 모두 선택
:reset	type 속성값이 "reset"인 요소를 모두 선택
:submit	type 속성값이 "submit"인 요소를 모두 선택
:text	type 속성값이 "button"인 요소를 모두 선택
:input	<input> <textarea> <select> <button> 요소를 모두 선택
:checked	type 속성값이 "checkbox" or "radio"인 요소중에서 체크되어 있는 요소를 모두 선택
:selected	<option> 요소 중에서 선택된 요소를 모두 선택
:focus	현재 포커스가 가지고 있는 요소를 선택
:disabled	비활성화되어있는 요소를 모두 선택
:enabled	활성화되어있는 요소를 모두 선택

 

선택된 요소에 접근

---

 

getter 메소드와 setter 메소드

 

• 선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해서는 제이쿼리 메소드를 통해 해당 요소에 접근해야 한다.

 

• getter 메소드

  • 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드
  • 아무런 인수를 전달하지 않고 호출

 

• setter 메소드

  • 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드
  • 대입하고자 하는 값을 인수로 전달하여 호출

 

<h1> 요소에 접근하여 그 값을 읽어들인 후, 아이디가 "text"인 요소의 값을 해당 값으로 설정하는 예제

---

$(function() {
    $("button").on("click", function() {
        const newText = $("h1").html(); // <h1>요소의 텍스트를 읽어오는 getter 메소드
        $("text").html(newText);    // id가 "text"인 요소에 새로운 텍스트를 설정하는 setter 메소드
    });
});

---

 

메소드 체이닝(method chaining)

• getter 메소드는 선택된 요소의 값을 읽어서 그 값을 반환한다.
  • 만약 선택된 요소가 여러 개 존재하면, getter 메소드는 가장 '첫 번째 요소'의 값만을 반환
  • 하지만 setter 메소드는 선택된 '모든 요소'에 인수로 전달된 값을 설정
  • 그리고 선택된 모든 요소에 접근할 수 있는 또 다른 제이쿼리 객체를 반환

 

반환된 제이쿼리 객체를 이용하면 세미콜론(;)을 사용하지 않고도, 곧바로 다른 제이쿼리 메소드를 호출 가능
이렇게 여러 개의 메소드가 연속으로 호출되는 것을 "메소드 체이닝(method chaning)" 이라고 한다.

선택된 요소에 .find(), .eq(), .html() 메소드를 연속으로 호출하는 예제

---

$(function() {
    $("button").on("click", function() {
    // id가 "list"인 요소의 자손 요소 중에서 <li> 요소를 모두 선택한 후
    // 그 중 두 번째 요소의 값을 설정
    $("#list").find("li").eq(1).html("두 번째 아이템 선택");
    });
});
// eq 메소드는 선택한 요소 중 지정된 요소에 해당하는 요소를 선택하는 요소

// 메소드 체이닝 중 .end() 메소드를 사용하면 바로 이전에 선택했던 요소의 집합을 다시 선택 가능
$(function() {
    $("button").on("click", function() {
        $("#list") // id가 "list"인 요소의 자손 요소 중에서
            .find("li") // <li> 요소를 모두 선택한 후에,
            .eq(1).html("두 번째 아이템 선택) // 그 중 두 번째 요소의 값을 설정
            .end()    // 다시 id가 "list"인 요소의 자손 요소 중에서 <li> 요소를 선택한 후에,
            .eq(2).html("세 번째 아이템 선택); // 그 중 세 번째 요소의 값을 설정
    });
});

---

 

.width() 메소드와 .height() 메소드

제이쿼리에서 선택한 요소의 너비나 높이를 반환하거나 설정하기 위한 함수들

 

---

$(function() {
    $("#getter").on("click", function() {
        let size = `너비는 ${$("#box").width()}px이고, 높이는 ${$("#box").height()}px입니다<br>`;
        $("#text").html(size);
    });

    $("#setter").on("click", function() {
        let w = $("#box").widtH();
        let h = $("#box").height();
        $("#box").width(w/2).hegiht(h/2);

        let size = `너비는 ${$("#box").width()}px이고, 높이는 ${$("#box").height()}px로
        변경되었습니다. <br>`;
        $("#text").html(size);
});

---

 

.attr() 메소드

제이쿼리에서 선택한 요소의 특정 속성값을 반환하거나 설정하기 위한 함수

 

---

$(function() {
    $("#button").on("click", function() {
        // <img> 요소의 src 속성값을 읽어오는 getter 메소드
        const imgSrc = $("img").attr("src");
        // <img> 요소의 src 속성값을 새로운 값으로 설정하는 setter 메소드
        $("img").attr("src", "/examples/images/img_flag.png");
    });
});

---

 

대표적인 getter 메소드와 setter 메소드

 

메소드	설명
.html()	해당 요소의 HTML 콘텐츠를 반환하거나 설정
.text()	해당 요소의 텍스트 콘텐츠를 반환하거나 설정
.width()	해당 요소의 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정
.height()	해당 요소의 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정
.attr()	해당 요소의 명시된 속성의 속성값을 반환하거나 설정
.position()	해당 요소중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환(getter)
.val()	<form> 요소의 값을 반환하거나 설정