jQuery 기초 빠르게 훑기

 

 

jQuery 란?

JavaScript의 Library(라이브러리) 이다.

라이브러리는 자주 사용하거나 사용자가 직접 구현이 어려운 기능을 만들어 모아놓은 프로그램으로
JS 의 라이브러리에는 jQuery, RequireJS, Prototype, AngluarJS, Backbone 등이 있다.

 

굳이 jQuery를 왜 사용할까?

1. 사용이 편리하다.

 

2. Cross Browsing

- java는 jdk를 깔아서 사용했는데 js는 따로 설치하는 것 없이 알아서 돌아갔다. 즉, 브라우저에 js해석기가 붙어있다는 뜻이다. 그런데 이 해석기가 브라우저의 종류나 버전마다 다른 경우가 있어 불편하다.

- jQuery는 내부적으로 브라우저마다 설정 처리를 해놓았기 때문에 사용자가 신경 쓸 필요가 없다.

 

3. 다양한 Plugin

- jQuery를 기초로 하는 유용한 plugin이 많다.
- Bootstrap, jQuery UI, Pagination 등
- pagination은 나중에 spring?ajax에서 배울 paging 과 관련이 있다고 한다.

 

jQuery에서 가장 중요한 것은 특정 요소를 탁! 찝어내서 그 요소를 가져오는 것이다.

그 때 사용하게 되는 것이 대표적으로 selector 이다.
selector 뿐만 아니라 DOM, 부모-자식-형제 관계, 필터링 등을 이용해서 요소를 선택해올 수있다.

 

 

Selector (선택자)

: 선택자는 css에서 사용하는 것과 거의 같다.

Selector	정의
$("p")	p 태그인 요소
$("#btn")	id가 "btn"인 요소
$(".btn")	class가 "btn"인 요소
$(this)	현재 요소 선택
$("p.intro")	<p>태그 중에서 class가 "intro"인 요소
$("p:first")	<p>태그 중에서 첫번째 요소
$("ul li:first")	첫번째 <ul>요소 하위의 첫번째 <li> 요소
$("ul li:first-child")	모든 <ul>요소 하위의 첫번째 <li> 요소
$("*")	모든 요소(element)선택

• $("#btn") 와 $(".btn") : id는 단 하나, class는 여러개에 적용 가능 하다는 특징이 있다. 따라서 id를 select하면 한 개의 요소가 오고, class를 select 하면 여러개가 오는데 둘 다 배열에 담겨온다.
• $("*") : 보통 단독으로 쓰는 경우는 잘 없고, div 안에 특정 클래스 안에 모든 요소를 가져오는 식으로 사용한다.
• $("ul li") : ul > li 처럼 쓰기도 한다. ul 태그의 자식요소인 li 요소를 가리킨다.
• $(this) :이벤트에서 많이 사용된다.

this 사용 예시

 

속성 필터 ( 특정 태그의 특정 속성)

예시

진파랑(a) : 태그
하늘색(href , target) : 속성
주황색(_blank) : 속성 값

Selector	정의
$("a[href]")	a 태그 중에서 href 속성이 있는 요소
$("a[target='_blank']")	a 태그 중에서 target 속성이 _blank 인 요소
$("a[target!='_blank']")	a 태그 중에서 target속성이 _blank가 아닌 요소
$(":button")	button 태그 또는 속성인 요소
$("tr:even")	<tr>태그 중 홀수 <tr>태그
$("tr:odd")	<tr> 태그 중 홀수 <tr>태그

• $(":button") : <button> 또는 <input type="button"> 인 경우
• $("tr:even") 과 $("tr:odd") : 0부터 시작 -> 0을 짝수로 본다.

 

 

 

DOM

Document Object Model

?

 

 

 

부모 관계를 이용한 select 방식

형식	정의
$(selector).parent();	선택한 요소(selector)의 바로 위의 요소를 선택
$(selector).parents(selector);	선택한 요소의 상위 요소들 중 selector 요소들 모두 선택
$(selector).parentsUntil(selector);	선택한 요소와 지정한 요소 사이의 부모를 모두 선택
$(selector).closest(selector);	선택한 요소로부터 부모 요소들을 탐색, 가장 먼저 발견한 요소를 선택

• $("span").parents('div') : span 태그에서부터 html 까지 모든 div 요소를 선택
• $("span").parentsUntil('.ancestors') : span 태그에서부터 class가 ancestors 인 요소 사의의 모든 부모 요소 선택, 당사자(span)와 지정된 요소(.ancestors)는 선택에서 제외된다.
• $("#item").closest("div") : id가 item 인 요소에서 상위로 올라가면서 걸리는 첫번째 div 요소를 가져온다.$('#item').parents("div") : id가 item 인 요소에서 상위로 올라가면서 걸리는 모든 div 요소를 가져온다.
  

 

 

 

 

자손 관계를 이용한 select 방식

사용법	정의
$(selector).children();	선택한 요소의 바로 아래의 요소를 선택
$(selector).find(selector);	선택한 요소의 하위 요소들 중 검색

• $(".ancestors").find('span') : class 가 ancestors 인 요소의 자식들 중 span 태그만 찾아온다.
• $(".ancestors").children() : class 가 ancestors 인 요소의 바로 하위 요소들을 가져온다.

class="ancestors"인 div 의 바로 아래 요소들은 숫자로 표시해놓은 1,2 div 이다. div 밑에 요소들은 제외하고 딱 두 개의 div 만 해당한다.

 

 

 

형제 관계를 이용한 select 방식

• $("h3").siblings() : 당사자(h3)를 제외한 모든 동일선상의 요소들을 선택한다.
  $("h3").siblings().css({"background-color":"blue"}); 
  => ELEMENT 5 를 제외한 ELEMENT 1~4 , ELEMENT 6~9를 모두 배경색을 파란색으로 한다.
• $("h3").next()  와 $("h3").prev()  : h3보다 한 칸 아래 와 한 칸 위
  => next : ELEMENT 6
  => prev : ELEMENT 4
• $("h3").nextAll() 과 $("h3").prevAll() : h3보다 아래 와 위
  => nextAll : ELEMENT 6~9
  => prevAll : ELEMENT 1~4
• $("h3").nextUntil() 과 $("h3").prevUntil() : untill은 당사자와 선택한 요소는 제외된다.
  => nextUntil() : ELEMENT 6~8
  => prevUntil() : ELEMENT 2~4

 

 

 

filtering을 이용한 선택

 

• $("div p").eq(0)) : div 아래 p 태그 중 0번째 요소 (인덱스 개념)
• $("p").filter(".sel")) : p 요소 중 class 가 sel 인 요소
  == $("p.sel")) 
• $("p").not(".sel")) : p 요소 중 class가 sel이 아닌 요소