제이쿼리(jQuery) - 제어(선택)

직접선택

.add()

기본 선택자에 요소를 추가 선택

$("p").add("div");
// p 요소와 div 요소를 선택

.not()

선택된 확장집합에서 인자에 해당하는 요소를 제외하고 선택

$("p").not(".green");
// p 요소의 확장집합에서 class가 green인 요소를 제외하고 선택

.end()

jQuery 함수를 연쇄적으로(chain)으로 사용할 경우 앞쪽에 이미 선택되었던 요소로 돌아간다.

$("ul.first")
  .find(".foo")
    .css("background-color","red")
    // ul의 첫번째 요소에서 class=foo를 찾아 배경 변경

  .end()
  .find(".bar")
    .css("background-color","green");
    // find를 호출하기 전의 요소($('ul:first))에서 class=bar를 찾아 배경 변경

 

인덱스

.first()

요소의 첫번째 노드 반환

.last()

요소의 마지막 노드 반환

.eq()

선택 요소의 index번째 요소를 선택

$("div").eq(2);
// div의 3번째 요소

 

형제

.next()

요소 집합내의 바로 다음에 나오는 형제로 구성된 요소 반환

.nextAll()

요소 집합내의 다음에 나오는 모든 형제로 구성된 확장집합 반환

.nextUntil()

선택 요소부터 인자가 나올때까지 집합을 선택

$("#a").nextUntil("#d");
// #a 요소부터 #d가 요소까지 형제요소를 선택

$("#a").nextUntil($("#d"),"p");
// #a 요소부터 #d 요소까지 중 dd 요소만 선택

// #d는 포함 안됨

.prev()

요소 집합의 바로 이전에 나오는 형제로 구성된 확장 집합을 반환

.prevAll()

요소 집합의 이전에 나오는 모든 형제로 구성된 확장 집합을 반환

.siblings()

요소의 모든 형제를 포함하는 확장 집합을 반환

 

부모

.parent()

요소 집합의 바로 위 부모로 구성된 확장 집합 반환

.parents()

요소 집합의 모든 조상 확장 집합을 반환. 부모와 상위 모든 조상이 포함되지만 문서루트는 미포함

.parentsUntil()

선택 요소부터 인자가 나올때까지 부모 집합을 선택한다.

$("#term").parentsUntil("dt").css("background-color","red");
// id term 요소부터 dt가 나올때까지 부모요소를 검색하고 배경을 red로 변경

$("#term").parentsUntil($("#term2"),"dd").css("background-color","red");
// id term 요소부터 id term2 부모요소까지 중 dd 요소만 배경을 red로 변경

.offsetParent()

위치(css:position) 요소를 기반으로 한 부모 요소를 찾는다.

$('li.item-a').offsetParent().css(..); 
// li의 item-a 클래스의 css position상 가장 가까운 부모요소에 css를 적용

.closest()

현재 위치한 요소에서 DOM 트리를 탐색하여 일치된 요소를 선택

$("#name").closest("ul"); 
// id name 요소에서 가장 가까운 ul을 선택

$("#name").closest("ul", "#code"); 
// id code 요소 아래의 id name 요소에서 가장 가까운 ul을 선택

 

자식

.children()

요소의 고유한 자식을 선택

$("div").children(ul);
// div의 자식노드에서 div > ul 구조의 요소
// div ul li ul -> 해당이 안됨

.find()

선택된 요소의 자식노드에서 모든 인자의 요소를 찾는다.

.children()과 비슷해 보이지만 다른다.

.find()는 해당하는 모든 요소를 반환.

$("div").find(ul);
// div의 자식노드에서 모든 ul 요소
// div ul li ul -> 해당 됨

.index()

선택 요소에서 인자의 index 번호를 반환

$("div").index();
// div의 인덱스
$("div").index($("div:contains('Third')"));
// div 안에서 div에 'Third'라는 단어를 포함하고 있는 div index 값

 

.filter()

선택된 요소를 포함한 노드에서 인자의 요소를 찾는다.

$("div").filter(ul);
// div 노드 자신을 포함한 요소에서 ul 요소를 찾는다.

 

다중

.each()

다중 요소를 순서대로 선택한다.

$("div").each(function(i,element){
// div 요소를 순서대로 선택한다. i: 순서 시작은 0 , element : 선택된 요소
});

.has()

인자를 가지고 있는 확장집합을 선택

$("li").has("ul"); 
// li 요소중 ul을 가지고 있는 요소만 선택

 

편집

.slice()

선택한 요소 집합을 인자의 범위로 잘라낸다.

$("img").slice(2).css(...);
// img 요소의 세번째 요소부터 끝 요소까지 css 적용

$("img").slice(2, 4).css(...);
// img 요소의 세번째 요소부터 5번째 요소를 만날때까지(4번째) css적용

$("img").slice(-2, -1).css(...);
// img 요소의 끝에서 두번째 요소부터 끝에서 첫번째 요소를 만날때까지 css적용

.clone()

선택된 요소를 복제

$("#img").clone();
// id img DOM을 복제

.andSelf()

선택된 구조 요소를 이어붙인다.

$('div').find('p').andSelf().css(..);
// div와 내부의 p요소를 선택해서 결합 후 css 적용

 

아이프레임 검색

.contents()

선택한 요소의 자식 요소를 가져온다.(text node 포함)

$('#frame').contents().filter(function(){});
// id=frame 요소의 자식요소(text 포함)를 가져와 filter
// iframe text를 가져올때 사용

$("#frameDemo").contents().find("a").css("background","blue");
// id=frame 요소의 자식요소 a를 찾아 배경 변경

 

배열

$.inArray()

대상 배열 내의 값을찾아서 인덱스를 반환

첫번째 배열은 0, 요소가 없으면 -1

$.inArray("John",arr); 
// arr 배열에서 "John"의 인덱스를 찾아서 반환

$.grep()

배열 요소를 조건에 따라 필터링하여 제거 한다. 특정 로직에 의해 true가 되는 결과만 반환

$.grep([0,1,2], function(n,i){ return n>0;});
// 배열 [0,1,2] 에서 0보다 큰값을 반환 [1,2]

$.grep([0,1,2], function(n,i){ return n>0;}, true);
// 배열 [0,1,2] 에서 0보다 크지 않은 값을 반환 [0]

$.proxy()

jQuery의 네임스페이스를 관리할 수 있게 한다.

"this" 키워드를 통하여 다른 개체를 유지할 수 있게 한다.

var app={
	config : { clickMessage : "Hi!" },
	// config 메서드에 clickMessage를 정의
	clickHandler : function(){ 
	// clicHandler 메서드 함수 정의
		alert( this.config.clickMessage);
		// this:app 의 config 메시지의 clickMessage를 알람
	}
}
$("a").bind("click", app.clickHandler);
// 실행되지 않는다. jQuery 이벤트 모델에 의해 this가 app 이 아니다.

$("a").bind("click", .proxy(app, "clickHandler"));
// this 키워드를 유지한채 실행된다.