jaquery 속성 탐색 선택자

📖 속성 탐색 선택자★

속성 탐색 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함여부를 따져 요소를 선택하는 선택자이다. 예를들어 img태그중 경로가 ./img/~~~.jpg와 일치하는
요소가 있는지 찾을 때 사용한다. 폼 요소에 많이 사용한다.

속성과 값에 따른 선택자

선택한 요소 중 지정한 속성과 일치하는 속성이 있는지, 없는지 포함 여부를 따져 요소를 선택한다.

[기본형]

1. $("요소선택[속성명]")
: 선택한 요소 중 지정한 속성명이 있는 요소만 선택한다.
2. $("요소선택[속성명 = 값]")
: 선택한 요소 중 지정한 속성명과 값이 전부 일치하는 요소를 선택한다.
3. $("요소선택[속성명 ^= 값]")
: 선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택한다. 단, 명시한 값은 한 단어로 일치해야 한다.
4. $("요소선택[속성명 $= 값]")
: 선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택한다. 단, 명시한 값은 한 단어로 일치해야 한다.
5. $("요소선택[속성명 *= 값]")
: 선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택한다.
이 선택자는 한 단어로 끝나지 않더라도 해당하는 글자만 포함되어 있으면 위치와 관계 없이 선택한다.
6. $(":type 속성값") / $(":password") ->예를들어 이런식으로 사용할 수있다.
: input태그 중 type속성값이 일치하는 요소만 선택한다.

아래의 이미지와 같이 요소가 변하는 것을 확인 할 수 있다.

input태그의 경우 위와 같이 축약해서 사용할 수 있다.

속성 상태에 따른 선택자

속성 상태에 따른 선택자는 선택한 요소 중 속성 상태에 따라 요소를 선택할 수 있다.

[기본형]

1.$('요소선택:visible / :hidden')
:선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택한다.
2.$(":selected")
:select태그의 option 중 현재 선택된 옵션 요소만 선택한다. 
3.$(":checked")
:checkbox 또는 라디오 버튼 요소 중 체크된 요소만 선택한다.

     #zone1안의 하위요소 중 :selected된 요소를 선택하여 value값을 받아오기
     let z1 = $("#zone1 :selected").val();
     console.log(z1);

     //#zone2안의 하위요소 중 :checked된 요소를 선택하여 value값을 받아오기
     let z2 = $("#zone2 :checked").val();
     console.log(z2);
     //#zone3안의 하위요소 중 :checked된 요소를 선택하여 value값을 받아오기
     let z3 = $("#zone3 :checked").val();
     console.log(z3);
     });