1. 확장된 집합의 크기 결정하기
- jQuery 확장 Element 집합은 배열과 유사하다, 자바스크립트 배열처럼 length 프로퍼티도
지원한다. 프로퍼티 보다는 메서드를 선호하는 사람들을 위해 jQuery는 같은
정보를 반환하는 size() 메서드를 제공한다.
[size()]
* 정의: 확장 집합의 Element 개수를 반환한다.
* 매개변수 : 없음.
* 반환값 : Element 개수
Ex) $(‘#someDiv’).html(‘페이지에는 총 ‘ +$(‘a’).size()+ ‘개의 링크가 있다.’);
// 내부의 jQuery 확장 집합은 모든 <a> 타입의 Element와 일치하고
size() 메서드를 이용해서 일치하는 Element 개수를 반환한다.
2. 확장 집합에서 Element 획득하기
- jQuery 확장 집합이 자바스크립트 배열과 유사하기 때문에 확장 리스트의 어떤 Element를 얻더라도 단순한 배열 인덱스를 사용할 수 있다.
배열의 인덱스보다 메서드를 쓰는 편을 선호한다면 jQuery에서는 get() 메서드도 사용할 수 있다.
[get(index)]
* 정의: 확장된 집합에서 하나 또는 모든 일치하는 Element를 가져온다.
매개변수가 명시되지 않았다면 확장 집합에서 모든 Element를 자바스크립트 배열로
반환한다. Index 매개변수가 주어진다면 해당 index의 Element를 반환한다.
* 매개변수 : index //(Number) 얻으려는 Element의 index. 생략시 전체 집합을 배열로 반환.
* 반환값 : 하나의 DOM Element 또는 DOM Element 집합
Ex) $(‘img[alt]’).get(0); //alt Attribute를 가진 모든 <img> Element중에서 첫번째.
var test = $(‘label+button’).get();
//<label> Element 다음에 바로 나오는 <button> Element를 jQuery확장 집합으로 감싼다음,
확장 Element를 자바스크립트 배열로 생성하여 변수 test에 할당한다.
[index(element)]
* 정의: 확장 집합에서 전달된 Element를 찾고,집합에서 찾은 Element의 Index를 반환.
집합에 해당 Element가 존재하지 않으면 -1 를 반환한다.
* 매개변수 : element : (Element) 순서 번호를 알고자 하는 Element의 참조
* 반환값 : 확장 집합에서 전달된 Element의 순서번호, 발견되지 않으면 -1
Ex) var n = $(‘img’).index($(‘img#findMe’)[0]);
// 페이지의 전체 이미지 중에서 id가 findMe인 이미지가 몇 번째 순서인지 찾아냄.
3. 확장 Element 집합 재편성하기
- 확장된 Element 집합이 있으면 새로운 Element를 추가해 이것을 증가 시킬 수도 있고,
일치하는 원본 Element의 부분 집합으로 축소 시킬 수도 있다.
jQuery는 확장 Element의 집합을 관리하는 일련의 메서드를 지원한다.
1) 확장 집합에 다른 Element 추가하기.
- 원본 집합에 어떤 커맨드를 적용한 후에 새로운 Element를 추가할 때 유용함.
[add(expression)]
* 정의 : expression 매개변수로 명시한 Element를 확장 집합에 추가한다.
표현식에는 셀렉터, HTML코드, DOM Element, Dom Element의 배열이
올 수 있다.
* 매개변수 : expression (String|Element|Array) 확장 집합에 추가될 대상을 명시.
jQuery Selector도 매개변수가 될 수 있다. 이 경우에 Selector에 일치하는
Element가 집합에 추가된다. HTML 코드가 전달되면
적합한 Element가 생성되어 집합에 추가된다.
DOM Element나 DOM Element의 배열인 경우 집합에 추가된다.
* 반환값 : 확장집합
Ex) $(‘img[alt], img[title]’) è $(‘img[alt]’).add(‘img[title]’)
// add() 메서드를 사용하면 많은 Selector를 체인으로 연결해서 논리합(or)관계를 형성하게 된다.
$(‘img[alt]’).addClass(‘thickBorder’).add(‘img[title]’).addClass(‘seeThrough’) =>(jQuery 체인이용)
// alt Attribute를 가진 모든 <img> Element의 확장 집합을 생성, 두꺼운 테두리를 만드는 클래스를 적용. Title Attribute를 가진 <img> Element를 추가하고 마지막으로 투명도를 주는 클래스 적용.
2) 확장 집합 다듬기
- not() 메서드도 add()와 마찬가지로 Element나 Element 배열의 참조를 전달하여 Element를
확장 집합에서 제거할 수 있는데, jQuery 확장 집합은 Element 참조의 배열로 이용 가능.
[not(expression)]
* 정의 : expression 매개변수의 값에 따라서 일치하는 집합에서 Element를 제거한다.
매개변수가 jQuery filter Selector라면 일치하는 모든 Element를 제거한다.
Element 참조를 전달하면 집합에서 해당 Element를 제거한다.
* 매개변수 : expression (String|Element|Array) 확장 집합에서 제거할 대상을 정의한
jQuery filter 표현식이나 Element 참조 또는 Element 참조 배열
* 반환값 : 확장집합
Ex) $(‘img[title]’).not(‘[title*=puppy]’)
//페이지에서 title Attribute를 지닌 모든 <img> Element를 선택할 때, title Attribute값이 puppy를 포함하는 Element를 제외
[filter(expression)]
* 정의 : 전달 받은 셀렉터 표현식이나 필터링 함수를 이용해서 확장 집합에서 Element를 필터링 해낸다.
* 매개변수 : expression
(String|Function) 확장 집합에서 일치하지 않는 Element를 모두 제거하고자
jQuery
Selector 또는 필터링 조건을 결정하는 함수를 명시한다.
이 함수는 집합에
있는 각 Element마다 호출된다. 호출된 함수는 해당 시점의
Element를
함수 Context인 this로
이용한다. 호출 결과로 false를
반환하는 Element가
모두 집합에서 제거된다.
* 반환값 : 확장 집합
Ex) $(‘td’).filter(function(){return this.innerHTML.match(/^\d+$/)})
// 모든 <td> Element로 구성된 확장 집합을 생성한 다음 Element 각각에 대해 filter() 메서드에 전달된 함수를 호출한다.
3) 확장 집합의 부분 집합 얻기
[slice(begin, end)]
* 정의 : 일치하는 집합에서 연속하는 일부분을 포함하는 새로운 확장 집합을 생성하고 반환한다.
* 매개변수 : begin(Number) : 반환되는 부분 집합에 포함될 첫 Element의 위치로 0부터 시작.
End(Number) : 반환되는 부분 집합에 포함될 마지막 Element의 바로 다음 위치.
0부터 시작하고 생략하면 집합의 마지막까지 포함된다.
* 반환값 : 확장집합
Ex) $(‘*’).slice(2,3);
//페이지에 있는 모든 Element를 선택한 다음 세번째 Element를 담는 새로운 집합을 생성
$(‘*’).slice(0,4);
//페이지에 있는 모든 Element를 선택한 다음 처음 네개의 Element를 포함한 집합 생성
$(‘*’).slice(4);
// 페이지의 모든 Element와 일치한 다음 처음 네 Element를 제외한 모든 Element의 집합반환.
4. 관계를 이용해 확장 집합 얻기
- 원본 집합을 수정하지 않고 새로운 확장 집합을 반환한다.
|
children() |
확장 Element의 고유한 자식으로 구성된 확장 집합을 반환한다. |
|
contents() |
확장 집합에서 Element의 Contents로 구성된 확장 집합을 반환한다. |
|
next() |
확장 집합내의 각 확장 Element 바로 다음에 나오는 형제로 구성된 확장집합 반환. |
|
nextAll() |
확장 집합내의 각 확장 Element 다음에 나오는 모든 형제로 구성된 |
|
parent() |
확장 집합내에 있는 모든
확장 Element의 바로 위 부모로 구성된 |
|
parents() |
모든 확장 Element의 조상으로 구성된 확장 집합을 반환한다. |
|
prev() |
확장 집합내의 각 확장 Element 바로 이전에 나오는 형제로 구성된 |
|
prevAll() |
확장 집합내의 각 확장 Element 이전에 나오는 모든 형제로 구성된 |
|
siblings() |
확장 Element의 모든 형제를 포함하는 확장 집합을 반환. |
5. 확장 집합을 이용하는 기타 방법들
[find(selector)]
* 정의 : 원본의 모든 Element 중
전달된 Selector 표현식과 일치하는 Element로
구성된 새로운 확장
집합을 반환, 확장집합에 포함된 Element의 자손 Element도 전달된 표현식과 일치하는지 평가
* 매개변수 : selector(String) : 반환될 집합의 일부가 될 Element가 일치하는 Selector
* 반환값 : 새로 생성된 확장 집합
Ex) test.find(‘p cite’) => $(‘p cite’, test)
// 변수 test에 할당된 확장집합에서 문단(<p>)에 포함된 모든 인용문(<cite>)으로 구성된 집합.
[is(selector)]
* 정의 : 확장 집합에 전달된 Selector 표현식과 일치하는 Element가 있는지 확인.
* 매개변수 : Selector(String) : 확장 집합 Element를 평가할 Selector 표현식
* 반환값 : 전달된 Selector에 하나라도 일치하면 true, 그렇지 않으면 false
Ex) var rtnImg = $(‘*’).is(‘img’);
// 현재 페이지에 이미지 Element가 있다면 rtnImg 변수의 값을 true로 설정
6. jQuery 체인 관리하기
- 체인을 사용하면 jQuery 확장 메서드를 엮고, 이를 통해 한 구문으로 많은 동작을 수행 할 수 있다. 간결한 방식으로 강력한 연산을 만들 수 있고 다중 커맨드를 적용하려고 확장 집합을 다시 계산하지 않아도 되기 때문에 효율성이 향상된다.
[end()]
* 정의 : jQuery 커맨드 체인에서 사용하며 이전 확장 집합으로 돌아간다.
* 매개변수 : 없음
* 반환값 : 이전 확장 집합.
ex) $(‘img’).clone().appendTo(‘#somewhere’).end().addClass(‘beenCloned’);
// 페이지의 모든 <img> Element로 구성된 원본 확장 집합과 이 Element들의 복사본으로
구성된 두번째 확장 집합이 반환되는데 반환된 두번째 확장집합에 appendTo() 커맨드를
수행하지만 end()를 호출하면서 이전 확장 집합(원본이미지)로 돌아간다.
그러고 나서 원본 집합에 addClass() 커맨드를 수행한다.
è end() 커맨드를 사용하지 않았다면 복사본 집합에 대해 addClass()를 수행한다.
*clone() – 첫번째 집합의 복사본으로 새로운 확장 집합을 생성.
[andSelf()]
* 정의 : 커맨드 체인에서 이전 확장 집합 두개를 하나로 합니다.
* 매개변수 : 없음
* 반환값 : 합쳐진 확장 집합출처 : http://gomty.tistory.com/321
'Jquery' 카테고리의 다른 글
| jquery extend 란 (0) | 2012.04.09 |
|---|---|
| jquery selector (0) | 2012.03.16 |
| jquery api site (0) | 2012.03.09 |