[jquery] jquery 속성 탐색 선택자

 

속성 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자입니다.

 

속성 선택자의 종류

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

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

1. $("요소선택[속성]")

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

 

2. $("요소 선택[속성^=값]")

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

 

3. $("요소 선택[속성$=값]")

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

 

4. $("요소 선택[속성*=값]")

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

 

5. $(":type 속성값")

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

 

$(function(){
  $("#wrap a[target]")
  .css({"color":"midnightblue"}); //target 속성을 포함하는 요소만 선택

  $("#wrap a[href^=https]")
  .css({"color":"steelblue"}); //href 속성값이 "https"로 시작하는 요소만 선택

  $("#wrap a[href$=net]")
  .css({"color":"darkmagenta"});  //href= 속성값이 "net"로 끝나는 요소만 선택

  $("#wrap a[href*=google]")
  .css({"color":"cadetblue"});  //href 속성값에  "google"이 포함된 요소만 선택 

  $("#info:text")
  .css({"background-color":"limegreen"});   //input중 type 속성값이 "text"인 요소만선택

  $("#info:password")
  .css({"background-color":"lightgreen"});  //input중 type 속성값이 "password"인 요소만 선택
});

<div id="wrap">
  <p>
    <a href="https://carina16.tistory.com/79" target="_blank">on_sunday</a>
  </p>
  <p>
    <a href="https://google.co.kr">Google</a>
  </p>
  <p>
    <a href="https://daum.net">Daum</a>
  </p>
  <p>
    <a href="https://www.tistory.com/">Tistory</a>
  </p>
  <form action="#" method="get" id="info">
    <p>
      <label for="user_id">아이디</label>
      <input type="text" name="user_id">
    </p>
    <p>
      <label for="user_pw">비밀번호</label>
      <input type="password" name="user_pw" id="user_pw">
    </p>
  </form>
</div>

 

//target 속성을 포함하는 요소만 선택.

 

//href 속성값이 "https"로 시작하는 요소만 선택.

 

//href= 속성값이 "net"로 끝나는 요소만 선택.

 

//href 속성값에  "google"이 포함된 요소만 선택 .

 

//input중 type 속성값이 "text"인 요소만선택.

 

//input중 type 속성값이 "password"인 요소만 선택.

 

 

 

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

1. $("요소 선택[hidden | visible]")

-> 선택 요소 중 hidden | visible 상태의 요소만 선택합니다.

 

2. $(":selected")

-> 선택 상자 중 현대 선택된 옵션 요소만 선택합니다.

 

3. $(":checked")

-> 체크박스(ckeckbox) 또는 라디오(radio)버튼 요소 중 체크된 요소만 선택합니다.

 

$(function(){
  $("#wrap p:hidden").css({
    "display":"block",
    "background-color":"greenyellow"
  });

  var b1=$("#box1 :selected").val();
  console.log(b1);

  var b2=$("#box2 :checked").val();
  console.log(b2);

  var b3=$("#box3 :checked").val();
  console.log(b3);
	
});

<div id="wrap">
  <p>제이쿼리 선택자1</p>
  <p style="display:none">제이쿼리 선택자2</p>
  <p>제이쿼리 선택자3</p>
</div>
<form action="#">
  <p id="box1">
    <select name="course" id="course">
      <option value="opt1">옵션1</option>
      <option value="opt2" selected>옵션2</option>
      <option value="opt3">옵션3</option>
    </select>
  </p>
  <p id="box2">
    <input type="checkbox" name="color" value="red">빨강
    <input type="checkbox" name="color" value="blue">파랑
    <input type="checkbox" name="color" value="green">초록
  </p>
  <p id="box3">
    <input type="radio" name="gender" value="male">남성
    <input type="radio" name="gender" value="female">여성
  </p>
</form>

왼쪽은 결과값 /  오른쪽은 콘솔에 보이는데 2,3번째줄에 checkbox에 체크를 해도 값이 안보이는건 왜그런것일까...