JQuery

○ JQuery

제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있다
제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(.js 파일) 형태로 존재한다
웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드해야한다

 

1. 제이쿼리 파일을 다운받아 로드하는 방법
2. CDN(Content Delivery Network)을 이용하여 로드하는 방법

<script src="/파일 경로/제이쿼리 파일명.js"></script>

<script src="제이쿼리 URL"></script>

 

 

 

△ 기본 문법

 

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

 

달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다
달러 기호 대신 jquery를 사용할 수 있다
선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작함수를 정의하여 선택된 요소에 원하는 동작을 설정한다

 

 

■ $() 함수

$() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 한다
$() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다
이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(JQuery Object)라고 한다

 

 

 

■ Document 객체의 ready() 메소드

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

 

1. 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우

2. 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우

 

 

자바 스크립트에서는 Window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다
제이쿼리에서는 Document 객체의 ready() 메소드를 이용하여 같은 결과를 보장한다

 

 

$(document).ready(function() {
         제이쿼리 코드;
});

 

 

이것을 더 짧게 줄이자면

=>

 

$(function() {
       제이쿼리 코드;
});

 

 

 

○ 요소 선택

 

■ CSS 선택자를 이용한 선택

제이쿼리에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있다
태그 이름을 사용해서 같은 태그 이름을 가지는 HTML 요소를 모두 선택할 수 있다

 

 

$(function() {
     $("p").on("click", function() {  //<p> 태그를 모두 선택함
         $("span").css("font-size", "20px");  //<span> 태그를 모두 선택함
     });
});

 

 

id를 사용하여 특정 HTML 요소를 선택할 수도 있고, class를 사용하여 같은 클래스에 속하는 HTML 요소를 모두 선택할 수 있다
속성(attribute)를 사용하여 속성이 조건에 맞는 특정 HTML 요소를 선택할 수도 있다

 

 

 

■ JQuery 선택자를 이용한 선택

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

 

 

▲ 셀렉터

 

id, class, tag로 선택

• * : 모든 태그를 선택한다
• #id : 지정한 아이디로 태그를 선택한다
• .class : 지정한 클래스로 태그를 선택한다
• .class,.class : 지정한 두 클래스 중 하나라도 해당되는 태그를 선택한다
• element : 태그 이름으로 선택한다
• el1,el2,el3 : 태그 이름들로 선택한다

 

처음, 마지막, 홀수, 짝수 선택

• :first - 첫번째 태그를 선택한다
• :last - 마지막 태그를 선택한다
• :even - 짝수 태그를 선택한다
• :odd - 홀수 태그를 선택한다

 

태그 간 관계에 따른 선택

• parent > child : 부모 태그 바로 밑의 자식 태그를 선택한다
• parent descendant : 부모 태그 밑의 자손 태그를 선택한다(부모 태그 안에만 있으면 된다)
• element+next : 지정한 태그의 바로 다음의 태그를 선택한다
• element~siblings : 지정한 태그의 다음에 있는 태그 모두를 선택한다

 

비교에 따른 선택

• :eq(n) - 선택한 태그 중에서 인덱스가 n인 태그를 선택한다
• :gt(n) - 선택한 태그 중에서 인덱스가 n보다 큰 태그를 모두 선택한다
• :lt(n) - 선택한 태그 중에서 인덱스가 n보다 작은 태그를 모두 선택한다
• :not(선택자) - 선택한 태그 중에서 지정한 선택자와 일치하지 않는 태그를 모두 선택한다

 

태그 등에 따른 선택

• :has(선택자) - 선택한 태그 중에서 지정한 선택자와 일치하는 자손 태그를 갖는 태그를 모두 선택한다
• :empty - 선택한 태그 중에서 자식 태그를 가지고 있지 않은 태그를 모두 선택한다

 

input 태그의 선택

• :checked - type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 태그를 모두 선택한다
• :text - type 속성값이 "text"인 태그를 선택한다
• :button - type 속성값이 "button"인 태그를 선택한다

 

attribute에 따른 선택

• [attribute] : attribute를 가지고 있는 태그를 선택한다
• [attribute=value] : attribute가 value인 태그를 선택한다
• [attribute!=value] : attribute가 value가 아닌 태그를 선택한다
• [attribute$=value] : attribute의 마지막 글자가 value인 태그를 선택한다
• [attribute^=value] : attribute가 value로 시작되는 태그를 선택한다
• [attribute*=value] : attribute안에 value가 들어있는 태그를 선택한다

 

△ 선택한 요소의 저장

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

 

var items = $("li"); //<li> 요소를 모두 선택하여 변수 items에 저장함

 

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

 

 

 

○ 메서드

• .attr() 메서드 : 선택한 요소의 특정 속성값을 반환하거나 설정하기 위해 사용한다

$(function() {
     $("button").click(function() {
     1번
     //<img> 태그의 src 속성값을 읽어오는 getter 메소드
     var imgSrc = $("img").attr("src");

     2번
     //<img> 태그의 src 속성값을 새로운 값으로 설정하는 setter 메소드
     $("img").attr("src", "이미지 경로");
     });
});

 

1번 라인에서는 .attr() 메소드에 인수를 하나만 전달하여, 해당 HTML 요소에서 인수로 전달받은 이름의 속성값을 읽어오는 getter 메소드로 사용하고 있다

2번 라인에서는 .attr() 메소드에 인수를 두 개 전달하여, 해당 HTML 요소에 첫번째 인수로 전달받은 이름의 속성값을 두번째 인수로 전달받은 값으로 설정하는 setter 메소드로 사용하고 있다

 

 

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

요소에 접근하여 요소의 값을 읽거나 설정할 수 있도록 해주는 대표적인 getter 메소드와 setter 메소드

 

• .html() : 해당 요소의 HTML 컨텐츠를 반환하거나 설정한다
• .text() : 해당 요소의 텍스트 컨텐츠를 반환하거나 설정한다
• .attr() : 해당 요소의 명시된 속성의 속성값을 반환하거나 설정한다
• .val() : <form> 요소의 값을 반환하거나 설정한다

 

 

○ 요소 추가

새로운 요소나 컨텐츠를 손쉽게 추가할 수 있도록 여러 메소드를 제공한다

 

■ 기존 요소의 내부에 추가

기존 요소의 내부에 새로운 요소나 컨텐츠를 추가할 수 있다

 

• .append() : 선택한 요소의 마지막에 새로운 요소나 컨텐츠를 추가한다
• .prepend() : 선택한 요소의 처음에 새로운 요소나 컨텐츠를 추가한다
• .appendTo() : 선택한 요소를 해당 요소의 마지막에 삽입한다
                     $(#firstItem").appendTo("#list"); => id가 list인 요소의 맨 마지막에 id가 firstItem인 요소를 추가한다
• .prependTo() : 선택한 요소를 해당 요소의 처음에 삽입한다