jQuery 제이쿼리 탐색 선택자

대표적인 탐색 선택자에는 배열의 index를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있습니다. 콘텐츠 포함 여부로 재선택 가능한 '콘텐츠 탐색 선택자'와 '필터링 선택자'도 있습니다.

 

 

 

 

위치 탐색 선택자

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

 

위치 탐색 선택자 종류

종류	사용법	설명
$("요소 선택:first") $("요소 선택").first()	$("li:first") $("li").first()	전체 <li> 요소 중 첫 번째 요소만 선택
$("요소 선택:last") $("요소 선택").last()	$("li:last") $("li").last()	전체 <li> 요소 중 마지막 요소만 선택
$("요소 선택:odd")	$("li:odd")	<li> 요소무리 중 짝수 번째 요소만 선택 (홀수 인덱스)
$("요소 선택:even")	$("li:even")	<li> 요소무리 중 홀수 번째 요소만 선택 (짝수 인덱스)
$("요소 선택:first-of-type")	$("li:first-of-type")	<li> 요소무리 중 첫 번째 요소만 선택
$("요소 선택:last-of-type")	$("li:last-of-type")	<li> 요소무리 중 마지막 요소만 선택
$("요소 선택:nth-child(숫자)")	$("li:nth-child(3)")	<li> 요소무리 중 세 번째 요소만 선택
$("요소 선택:nth-child(숫자n)")	$("li:nth-child(3n)")	<li> 요소무리 중 3의 배수 번째 요소만 선택
$("요소 선택:nth-last-of-type"(숫자)")	$("li:nth-last-of-type(2)")	<li> 요소무리 중 마지막부터 두 번째 요소만 선택
$("요소 선택:only-child(숫자)")	$("li:only-child ")	부모요소 내에 <li> 요소가 1개뿐인 <li>요소만 선택
$("요소 선택:eq(index)") $("요소 선택").eq(index)	$("li:eq(2) ") $("li").eq(2)	<li> 요소 중 인덱스 2가 참조하는 요소 불러옴
$("요소 선택:gt(index)")	$("li:gt(1)")	<li> 요소 중 인덱스 1보다 큰 인덱스가 참조하는 요소 불러옴
$("요소 선택:lt(index)")	$("li:lt(1)")	<li> 요소 중 인덱스 1보다 작은 인덱스가 참조하는 요소 불러옴
$("요소 선택:slice(index)")	$("li").slice(2)	<li> 요소 중 인덱스 2부터 참조하는 요소 불러옴

 

first : 선택된 요소 중 첫번째만
last : 선택된 요소 중 마지막만
even : 홀수번째 요소
odd : 짝수번째 요소

eq : 지정요소
lt : less than
gt : greater than

first-of-type : 선택 요소의 무리 중 각각의 첫번째
last-of type : 선택 요소의 무리 중 각각의 마지막

nth-child : 선택 요소의 무리 중 지정한 숫자의 요소
nth-child(숫자n) : 선택 요소의 무리 중 지정한 배수의 요소
nth-last-child(숫자) : 선택한 요소의 무리 중 마지막 위치에서 지정한 숫자의 요소

only-child :  부모 요소에게 하나뿐인 자식 요소인 경우 선택
-> ($("li:onliychild")면 li 자식요소가 하나만 있는 부모요소 선택
slice(start index, end index) : 선택 요소의 지정된 구간 인덱스의 요소
-->($(slice(1,3)은 인덱스 1부터 3번째까지)

 

var a = [1, 2, 3, 4, 5]; 
a.slice(0, 3); // [1, 2, 3]을 반환한다. 
a.slice(3); // [4, 5]를 반환한다. 
a.slice(1, -1); // [2, 3, 4]를 반환한다. 
a.slice(-3, -2) // [3]을 반환한다.

출처: https://webclub.tistory.com/326 [Web Club] 

 

 

 

 

제이쿼리 배열 관련 메서드

종류	사용법	설명
each() / $.each()	$.("요소선택").each(function) $.each($("요소 선택"), function)	배열에 저장된 문서 객체만큼 메서드 반복 실행 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근해서 객체를 선택하고 인덱스를 구함
$.map()	$.map(Array, function)	배열에 저장된 데이터 수만큼 메서드 반복 실행 함수에서 반환된 데이터는 새 배열에 순서대로 저장해 새로운 배열객체로 반환
$.grep()	$.grep(Array, function)	배열에 저장된 데이터 수만큼 메서드 반복 실행 반환값이 true여만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장, 반환
$.inArray()	$.inArray(data, Array, start index)	배열 안에서 지정 데이터를 찾으면 가장 앞 데이터의 인덱스를 반환 (없으면 -1) start index의 값을 지정하면 해다아 위치부터 데이터 탐색
$.isArray()	$.isArray(object)	입력한 객체가 배열 객체면 true, 아니면 false
$.merge()	$.merge(Array1, Array2)	인자값으로 입력한 2개의 배열 객체를 하나로 그룹화
index()	$.("요소선택").index("지정 요소 선택")	지정 선택 요소의 인덱스값을 반환

 

 

//each

$("요소 선택").each(function(매개변수1, 매개변수2) { })
$.each($("요소 선택"), function(매개변수1, 매개변수2) { })

$("요소 선택").each(function() { $(this) })
$.each($("요소 선택"), function() { $(this) })


// map
$.map(Array, function(매개변수1, 매개변수2){
	return 데이터;
});
$.grep(Array, function(매개변수1, 매개변수2){
	return [true | false];
});


// Array exmaple

$(function() {
  var arr1 = ["서울", "대전", "부산", "전주"];
  var arr2 = ["한국", "미국", "일본", "중국"];

  var obj = {
    "name": "정부장",
    "area": "서울"
  }

  var idxNum = $.inArray("부산", arr1);
  console.log(idxNum); // 2

  var okArray1 = $.isArray(arr1);
  var okArray2 = $.isArray(obj);
  console.log(okArray1); //true (배열 객체라서)
  console.log(okArray2); //false(객체라서)

  $.merge(arr1, arr2);
  console.log(arr2);
  console.log(arr1);
});


// index

$(function(){
	var idxNum = $("li").index($("#list3"));
	console.log(idxNum); // 반환은 인덱스 값
});

 

 

 

속성 탐색 선택자

선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택
즉, 특정 속성을 포함하는 요소를 선택할 때 주로 사용

종류	사용법	설명
$("요소 선택[속성]")	$("li[title]")	li 요소 중 title 속성이 포함된 요소만 선택
$("요소 선택[속성=값]")	$("li[title='리스트']")	li 요소 중 title 속성이 리스트인 요소만 선택
$("요소 선택[속성^=텍스트]")	$("li[href^='http://']")	li 요소 중 href 속성값이 http://로 시작하는 요소만 선택
$("요소 선택[속성$=텍스트]")	$("li[href$='.com']")	li 요소 중 href 속성값이 .com로 끝나는 요소만 선택
$("요소 선택[속성*=텍스트]")	$("li[href*='resta']")	li 요소 중 href 속성값이 resta를 포함하는 요소만 선택
$("요소 선택:hidden")	$("li:hidden")	li 요소 중 숨겨진 요소만 선택
$("요소 선택:visible")	$("li:visible")	li 요소 중 보이는 요소만 선택
$(":text")	$(":text")	input 요소 중 type 속성값이 text인 요소만 선택
$(":selected")	$(":selected")	selected 속성이 적용된 요소만 선택
$(":checked")	$(":checked")	checked 속성이 적용된 요소만 선택

 

 

 

그 외의 선택자 : 콘텐츠 탐색 선택자 

콘텐츠 탐색 선택자는 요소 또는 속성의 포함 여부에 따라 틀정 요소를 선택

 

종류	사용법	설명
$("요소 선택:contains(텍스트)")	$("li:contains('내용2')")	li 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택
$("요소 선택").contents()	$("p").contents()	선택요소의 하위요소 중 가장 가까운 하위 요소 선택
$("요소 선택:has(요소명)") $("요소 선택").has(요소명)	$("li:has('span')") $("li").has('span')	li 요소 중 <span>을 포함하는 요소만 선택
$("요소 선택:not(제외요소)") $("요소 선택").not(제외요소)	$("li:not(first)") $("li").not(first)	li 요소 중 첫 번째 요소만 제외하고 선택
$("요소 선택").filter(필터요소)	$("li").filter(".list2")	li 요소 중 class 값이 "list2"인 요소만 선택
$("요소 선택").find(요소선택2)	$("li").find("strong")	li 요소의 하위요소인 <strong>만 선택
$("요소 선택").closest("요소선택2")	$("strong").closest("div")	strong을 감싸는 상위 div 요소 중 가장 가까운 상위 요소 선택
end()	$("li").children("a").end()	필터링이 실행되기 이전인 요소인 li가 선택

 

contains() 탐색 선택자는 선택 요소 중 지정한 텍스트를 포함하는 요소만 선택하고, contents() 탐색 선택자는 선택한 요소의 하위 요소 중 1깊이의 텍스트와 태그 노드를 선택하고, has() 탐색 선택자는 선택 요소 중 지정한 태그를 포함하는 요소만 선택, not() 탐색 선택자는 선택한 요소 중 지정요소만 제외하고 선택, end() 탐색 선택자는 필터링 이전의 선택자가 적용되도록 합니다. find() 탐색 선택자와 filter() 탐색 선택자의 차이는 선택한 하위 요소 중 필터링하느냐, 선택한 요소 중 필터링하느냐의 차이입니다.

 

 

 

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

선택자와 함께 알아두면 편리한 몇가지 메서드들입니다. 

 

종류	사용법	설명
.is(":요소상태")	.is(":txt1").is(".visible")	선택한 요소가 일치하면(보이면) true 반환 / 없으면 false
$.noConflict()	var 변수 = $.noConflict(); 변수("요소선택")	이 함수를 이용하면 현재 제이쿼리에서 사용중인 $메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용
get()	$("요소선택").get(0).style.color = '#000'	선택자에 get(0)을 적용하면 자바스크립트 DOM 방식의 스타일을 사용할 수 있음

 

 

is() 메서드

입력 요소의 체크 박스나 선택 상자의 선택 여부, 보이는지의 여부 등을 알아볼 때 주로 사용하고 반환값은 true or false 입니다.

 

$("요소선택").is(":[checked | selected | visible | hidden | animated]")