제이쿼리 선택자

JSP  ||  DAY8  ||  제이쿼리 선택자

---

 1. 기본선택자 

  1) 전체 선택자  $("*")

 

  2) 요소명 선택자  $("요소명")

• HTML파일 내에, 지정한 요소에 해당하는 모든 요소를 배열에 담아 선택해온다.
• 따라서, 하나를 지정하고 싶다면 [n] 형식으로 인덱스를 지정해 선택해야한다.

  3) 클래스 선택자, id선택자  $(".클래스명")  ,   $("#아이디명")

 

  4) 그룹선택자 (다중선택자)  $("요소1, 요소2, 요소3, . . . ")

• 한번에 여러 개의 요소를 선택할 때 사용되는 선택자이다.
• 그룹선택자 사용시, 각각의 요소는 태그명이 기준이고, 같은 태그중에서는 id나 class로 구분한다.
  ex)  $("div, span, p.myClass")  //p태그 중 myClass 라는 이름의 클래스를 가진 요소를 선택해온다.

---

 2. 계층선택자 

  1) 인접형제 선택자 + 

• $("기준이 되는 태그명 + 바로 다음의 형제태그 ")
• 형제 요소중에서, 바로 다음에 나오는 인접한 next요소를 반환한다.
    ex)  $("label + input")  // label태그의 바로 다음에 나오는 input태그를 선택해옴.

  2) 다중형제 선택자  ~ 

• $(" 기준이 되는 태그명 ~ 태그명")
• 기준이 되는 태그명 다음의 모든 형제요소 중, '태그명'에 해당하는 모든 요소를 선택해온다.
• 형제태그의 중첩요소는 선택되지 않는다.

  3) 자식요소 선택자  > 

• $(" 부모요소  >  자식요소 ")
• 부모요소의 모든 자식요소를 선택한다.
• 중첩된 자식요소는 바깥 부모요소의 자식요소로 선택되지 않는다.
     ex) $("ul.top > li ")  // ul태그 중 class="top"인 요소의 모든 li요소를 가져옴.

  4) 자손선택자 (공백)

• $("조상요소   후손요소")
• 조상요소의 모든 후손요소를 선택한다.
  ex) $("form input")  //  form태그의 자손요소 중, input요소만을 선택함.
  ex) $("form fieldset input") // form태그의 자손 중 - fieldset태그의 자손 중 -input 요소만 선택함.

---

 3. 속성선택자 

  1) $("요소명[태그이름]")

• HTML요소들 중, '요소명'에 해당하는 요소들 중에서 '태그이름'에 해당하는 요소를 선택한다.

 

  2) $(" 태그명 [ 속성명='값' ] ")

• 해당 HTML태그의 속성이 '값'과 정확히 일치하는 요소만 선택한다
  $(" a [ href='https://naver.com' ] ")
   // a태그 중, href속성값이 https://naver.com와 정확히 일치하는 요소만 선택한다,

 

  3) 지정된값으로 시작하는 ^=  / 끝나는 $= 요소를 선택하기.

• 시작:  $("태그명[속성 ^= 'value']")  // $("a[href ^= 'https']")
• 끝:     $("태그명[속성 $= 'value']")   // $("a[href $= 'net']")

 

  4) 지정한 값 속성의 일부로 포함하는 요소를 선택하기  *= 

• $(" 태그명 [속성 *= 'value'] ")
  ex) $("input[name *= 'man']") // input태그 중 name속성값에 "man"을 포함하는 요소를 선택

 

  5) 공백으로 구분된 요소를 선택하기  ~= 

• $("태그명[속성 ~= 'value']")
  ex) $("input[name ~= 'man']") // input태그 중 name속성값에 공백 구분자를 포함하는 "man"요소를 선택

 

  6) 속성에 '-'가 들어간 경우까지 포함하여 요소를 선택하기  

• $("태그명[속성 |= 'value']")
  ex) $("input[value |='en']") // input태그에서 value속성값에 문자열 en 또는 en-이 포함된 요소를 선택

 

---

 4. 필터선택자

다양한 방식으로 원하는 요소를 걸러내어 선택하는 선택자 이다.

  :  기호를 사용한다.

 

  1) $(" 태그 : eq(index) ")

• 지정한 인덱스 값에 해당하는 요소를 반환하는 필터선택자.
• 인덱스자리에 음수도 지정할 수 있다. -> 마지막 요소부터 거꾸로 카운트한다.
• $("td:eq(-1)")
    ex) $("td:eq(-1)") //  마지막 td태그를 선택한다.

 

  2) $(" 태그 :even/odd  ")

• 짝수번째 / 홀수번째 요소를 반환한다.
• 주의) 인덱스를 기준으로 짝/홀수를 판단하므로, 보기와 반대로 적용된다.!

 

  3) $(" 태그 :first/last ")

• 첫번째, 마지막 요소를 반환한다.

 

  4) $(" 태그 :gt(index) / lt(index) ")

• gt(index) - 지정된 인덱스보다 큰 인덱스에 해당하는 요소들을 선택한다.
• ls(index) - 지정된 인덱스보다 작은 인덱스에 해당하는 요소들을 선택한다.
• * 참고 - 두 선택자 모두 index로 음수를 지정할 수 있고, 마지막요소부터 카운트한다.

 

  5) $(" 태그 :not (: 선택자) ")

• '선택자'와 일치하지 않는 모든 요소들을 선택해서 반환한다.
• 선택자위치에는 :not(:div a) , :not(:div,a)와 같이, 모든 선택자를 사용할 수 있다.
  ex) $("input:checked") // 인풋태그 중 체크되어있는 요소만 선택함
  ex) $(" input :not ( :checked ) + span ")
       // 현재 체크되어있지 않은 input태그와 바로 인접한 형제 span태그를 선택함.

 

  6) $(" 태그 :focus ")

• 현재 focus가 되어있는 요소를 선택하여 반환한다.
• 주로 사용자의 포커스가 위치한 지점을 표시하거나, 입력하고 있는 폼요소를 강조할 목적으로 사용됨.

// input태그를 선택하면 현재 선택된 인풋태그의 배경을 노란색으로 설정하고,
// 선택되지 않은 인풋태그는 css스타일을 제거함. removeAttr(제거할 속성)

<script type="text/javascript">
	$(function () {
		$("input").click(function(){
			$("input:focus").css("backgroundColor","yellow");
			$("input:not(:focus)").removeAttr("style");
		});
	})
</script>

 

---

 5. 폼 필터 선택자

<form> 태그 내부에 사용된 요소를 선택하는 선택자.

 

  1) $(" 태그 :button ")

• 버튼요소를 선택함.

 

  2) $(" 태그 :enabled/disabled ")

• 활성화/비활성화된 요소를 선택함.

// 인풋태그들 중, 타입속성값이 text이며, 활성화 된 인풋요소만 선택하여 disabled속성과 값을 추가함
$("input[type='text']:enabled").attr("disabled","disabled");

 

  3) $(" 태그 :checkbox ")

인풋태그 중에서 type=checkbox인 요소만 선택함.

속성이 checked또는 selected된 요소를 선택한다.

// 선택한 인풋태그의 value속성의 값으로
// <input type=checkbox checked>인 요소의 value값을 가져와 설정한다.
$("input:text").val( $("input:checked").val() );

 

  4) $(" :selected ")

• select태그의 하위태그로 사용되는 option 태그 중, 선택된 option태그를 반환한다.
• *주의 -  input type="checkbox" 또는 "radio"인 경우에는 동작하지 않으며, 오직 option태그에서만 동작한다.

$(function() {
	// select태그를 선택해 내부의 다른 option을 선택하는 이벤트 발생시의 함수를 생성함.
	$("select").change(function(){

	var data = $(":selected").text(); // 선택된 옵션태그의 텍스트값을 얻어서 data변수에 저장함.
	$("span").text(data); // data변수에 저장된 값이 span태그의 텍스트위치에서 출력되도록 설정함.
    
	});
})

---

 6. 내용필터 선택자 

특정요소의 텍스트내용과 일치하는 / 일치하지 않는 요소를 찾을 수 있도록 하는 선택자.

 

  1) $(" 태그 :contains( 'text' )  ")

• 지정된 text와 일치하는 문자열이 존재하는 요소를 선택하여 반환한다.
• 대소문자를 구분한다.
  ex) $("div :contains( 'John' ) ")

 

  2) $(" 태그 :has( '선택자' ) ")  

• 지정된 '선택자'를 포함하는 모든 요소를 선택한다.
  ex) $("div:has('p')")  // p태그를 포함하는 div태그를 선택한다.

 

  3) $(" 태그 :empty ")

• 자식요소가 존재하지않고 (&) 텍스트값이 비어있는 요소를 선택한다.
  ex) $("td:empty")

 

  4) $(" 태그 :parent ")

• 자식요소가 존재하거나 (OR) 텍스트내용을 가지고있는 요소를 선택한다.