제이쿼리 -탐색 선택자

탐색 선택자

탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 워하는 요소를 한번 더 탐색해 정확성을 높여준다.

대표적으로, 배열의 인덱스를 사용해 선택하는 ‘위치 탐색 선택자’와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 ‘속성 탬색 선택자’가 있다.

 

-위치 탐색 선택자

기본 선택자로 선택한 요소는 배열에 담깁니다. 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있다.

 $.map() / $.grep() 메서드

1.$.map()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행한다. 그리고 메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환한다.

 

2.$.grep()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실항하며 인덱스 오름차순으로 배열의 데이터를 불러온다. 메서드의 반환값이 true면 데이터가 새 배열에 저장되고 배열을 반환한다.

 

1.기본형 | $.map() 메서드

ex)$.map(Array,function(매개변수1,매개변수2){

return 데이터;

});

 

2.기본형 | $.grep() 메서드

ex)$.grep(Array,function(매개변수1,매개변수2){

return [true | false];

});

1-> 배열에 저장된 요소만큼 메서드를 반복 실행한다. 매개변수1,매개변수2에는 배열의 데이터와 인덱스값이 오름차순으로 대입된다.

 

2->배열에 저장된 요소만큼 메서드를 반복 실행한다.메서드가 실행될 때마다 매개변수1,매개변수2에는 배열에 데이터와 인덱스 정보가 인덱스 오름차순으로 대입된다.

-$.inArray() / $.isArray() / $.merge() 메서드

첫 번째 메서드는 배열에 저장된 데이터 중 지정한 데이터를 찾아 인텍스값을 반환한다.

두 번째 메서드는 지정한 데이터가 배열 객체면 true를 배열 객체가 아니면 false를 반환한다.

세 번째 메서드는 두 배열 객체를 하나의 객체로 묶습니다.

 

기본형 | 1. $.inArray(data,Array,startindex)

2. $.isArray(object)

3. $.merge(Array1,Array2)

1-> 배열에 저장된 데이터 중 지정한 데이터를 인덱스 오름차순으로 찾아 먼저 찾은 데이터의 인덱스 값을 반환한다.

2->지정한 객체가 배열이면 true 아니면 false 반환

3->하나의 배열 객체로 묶는다.

 

-index() 메서드

$.index() 메서드는 지정 선택 요소를 찾아서 인덱스값을 반환합니다.

 

기본형 | $(“요소 선택”).index(“지정 선택 요소”);

 

 

-속성 탐색 선택자

속성과 값에 따른 탐색 선택자

(1)$(“요소 선택[속성]”)

(2)$(“요소 선택[속성^=값]”)

(3)$(“요소 선택[속성$=값]”)

(4)$(“요소 선택[속성*=값]”)

(5)$(“:type 속성값”)

1.선택한 요소 중 지정한 속성이 포함된 요소만 선택합니다.

2.선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택합니다.

3.선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택합니다.

4.선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택합니다.

5.input 요소 중 type속성값이 일치하는 요소만 선택합니다.

-속성 상태에 따른 탐색 선택자

속성 상태에 따른 탬색 선택자는 선택한 요소 중 속성 상태에 따라 요소를 선택합니다.

 

기본형 | 1.$(“요소 선택:[visible | hidden]“)

2.$(“:selected”)

3.$(“:checked”)

 

1.선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택합니다.

2.선택 상자 중 현재 선택된 옵션 요소만 선택합니다.

3.체크박스 또는 라이도 버튼 요소 중 체크된 요소만 선택합니다.

 -그 외의 선택자 (콘텐츠 탐색 선택자)

콘텐츠 탐색 선택자는 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자입니다.

 

-contains() /contents() / has() /not()/end() 탐색 선택자

contains()는 선택한 요소 중 지정한 텍스트를 포함하는 요소만 선택

contents()는 선택한 요소의 하위 요소중 1 깊이의 텍스트와 태그 노드를 선택

has()는 선택한 요소 중 지정한 태그를 포함하는 요소만 선택

not()은 선택한 요소 중 지정한 요소만 제외한 채 선택

end()는 필터링되기 이전의 선택자가 적용되도록 한다.

-find() / filter() 탐색 선택자

find()->선택한 하위 요소 중에서 find()로 필터링한 요소만 선택

filter()->선택한 요소 중에서 filter()로 필터링한 요소만 선택

 

기본형 | 1.$(“요소 선택”).find(“하위 요소 중 필터링 할 요소 선택”)

2.$(“요소 선택”).filter(“선택한 요소 중 필터링 할 요소 선택”)

 

% 차이점

->필터링 대상이 선택 요소를 기준으로 ‘하위 요소’인지, ‘선택한 요소’인지로 구분한다.

 

-선택자와 함께 알아두면 유용한 메서드

 

-is() 메서드

선택한 요소의 상태가 지정한 속성과 일치하면 =true 반환 일치하지 않으면 false 반환을 합니다.

체크 박스나 선택 상자의 ‘선택 여부’ or ‘보이는지의 여부’를 알아볼 때 주로 사용한다.

 

기본형 | $(“요소 선택”).is(“:[checked | selected | visible | hidden | animated] “)

 

1->선택한 체크박스 또는 라디오 버튼 요소가 체크된 상태면 true 아니면 false 반환

2->선택한 선택상자에 옵션 요소가 선택된 상태면 true 아니면 false 반환

3->선택한 요소가 보이면(visible) true를 아니면 false반환

4->선택한 요소가 숨겨진 상태면 ture 아니면 false

5->선택한 요소가 애니메이션 동작 상태면 true 아니면 false반환