[jQuery Quick API] 1.제어 (선택/삽입)

[jQuery Quick API] 1.제어 (선택/삽입)

1. 제어


(1) 선택

.add() : 요소를 추가 선택한다. 

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


.not() : 선택된 확장집합에서 인자에 해당하는 요소를 제거한다.

$("p").not(".green")  // p 요소의 확장집합에서 class가 green인 요소를 제거한다.


.children() : 요소의 고유한 자식으로 구성된 확장 집합을 반환한다.


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

$('.container').contents().filter(function(){}); 

// class container 요소의 자식요소(text 포함)를 가져와 filter 한다. iframe text를 가져올때 사용


.first() : 요소의 첫번째 노드 반환


.last() : 요소의 마지막 노드 반환


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


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


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

$("#term").nextUntil("dt").css('background-color', 'red'); 

// id term 요소부터 dt가 나올때까지 형제요소를 검색하고 배경을 red로 변경

$("#term").nextUntil($("#term2"), "dd").css('background-color', 'red'); 

// id term 요소부터 id term2 요소까지 중 dd 요소만 배경을 red로 변경


.parent() : 요소 집합의 바로 위 부모로 구성된 확장 집합 반환


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


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

$("#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로 변경


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


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


.siblings() : 요소의 모든 형제를 포함하는 확장 집합을 반환.


.eq() : 선택 요소의 index번째 요소를 선택한다.

$("div").eq(2).css('background-color', 'red'); // div의 3번째 요소의 배경을 변경


.index() : 선택 요소에서 인자의 index 번호를 반환

$("div").index($("div:contains('Third')")); 

// div 안에서 div에 'Third'라는 단어를 포함하고 있는 div index 값


$.inArray() <jQuery.inArray()> : 대상 배열 내의 값을찾아서 인덱스를 반환한다. ; 첫번째 배열은 0, 요소가 없으면 -1

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


.find() : 선택된 요소의 자식노드에서 인자의 요소를 찾는다.

$("#div").find(ul); // id div의 자식노드에서 ul 요소를 찾는다.


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

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


.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를 찾아 배경 변경


.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을 복사한다.


.closest() : 현재 위치한 요소에서 DOM 트리를 탐색하여 일치된 요소를 선택한다.

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

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


.andSelf() : 선택된 구조 요소를 이어붙인다.

$('div').find('p').andSelf().css(..);  

// div와 내부의 p요소를 선택해서 결합 후 css 적용


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

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


$.grep() <jQuery.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.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 키워드를 유지한채 실행된다.


(2) 삽입

.after() : 지정한 요소 뒤에 새로운 요소를 삽입 

A.after( B) / A뒤에 B를 추가


.insertAfter() : 지정한 요소 뒤에 새로운 요소를 삽입 

A.insertAfter(B) / B뒤에 A를 추가


.append() : 지정한 요소 뒤에 내용 삽입

$("div").append("<p>내용</p>");    // div 뒤에 <p>내용</p> 를 삽입한다.


.appenTo() : 지정한 내용을 요소 뒤에 삽입

$("<p>내용</p>").appendTo($("div"));   // <p>내용</p>를 div 뒤에 삽입한다. 


.before() : 지정한 요소의 앞에 요소를 삽입 

A.before(B) / A 앞에 B를 추가


.insertBefore() : 지정한 요소의 앞에 요소를 삽입 

A.insertBefore(B) / B 앞에 A를 추가


.prepend() : 지정한 요소 앞에 내용 삽입

$("div").prepend("<p>내용</p>");    // div 앞에 <p>내용</p> 를 삽입한다.


.prependTo() : 지정한 내용을 요소 앞에 삽입

$("<p>내용</p>").prependTo($("div"));  

// <p>내용</p>를 div 앞에 삽입한다. 


.pushStack() : jQuery 스택에 DOM 요소를 추가한다.

$("#ids").pushStack($("div"));   

// id ids 요소에 jQuery 스택에 div 요소를 추가한다.


.wrap() : $() 형식으로 쓰는 함수의 선택한 요소 각각을 문자열 또는 객체로 감싼다.

$(".inner").wrap('<div class="new" />');   

// class=inner 집합 요소 각각을 <div class ="new"></div>

$(".inner").wrap(function(){

      return '<div class="new" />');  

// class=inner 집합 요소 각각을 <div class ="new"></div>

});


.unwrap() : 선택한 요소 집합의 부모를 제거한다.

$(".inner").wrap();   // class=inner 집합 요소의 부모를 제거한다. 


.wrapAll() : $() 형식으로 쓰는 함수의 선택한 요소 전체를 문자열 또는 객체로 감싼다.

$(".inner").wrapAll('<div class="new" />');  

// class=inner 집합 요소 전체를 <div class ="new"></div>


.wrapInner() : $() 형식으로 쓰는 함수의 선택한 요소 각각의 내부를 문자열 또는 객체로 감싼다.

$(".inner").wrapInner('<div class="new" />');  

// class=inner 집합 요소 각각의 내부를 <div class ="new"></div> 로 감싼다




출처: https://devbox.tistory.com/?page=15 [장인개발자를 꿈꾸는 :: 기록하는 공간] 

Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand