jQuery 선택자 (태그, 클래스, 아이디, 자식/후손, 속성, prop()메소드)

• jQuery 선택자
  - jQuery는 요소를 선택할 때
    $("CSS 선택자") 또는 $(요소가 저장된 변수)의 형식으로 작성
  
  - ★ CSS 선택자로 요소를 선택한 경우
     - id로 선택 시 단일 요소를 반환
     - class, name, 자식/후손 등으로 선택 시 배열로 반환
  
  
• 태그 선택자

<h3>태그 선택자</h3>

<h5>테스트1</h5>
<h5>테스트2</h5>
<h5>테스트3</h5>
<p>테스트4</p>
<p>테스트5</p>
<p>테스트6</p>

// 태그 선택자

// ready() 함수 : 문서가 로딩된 후 마지막에 수행하는 함수
$(document).ready(function(){
   $("h5").css("color", "green");
   
   // 자바스크립트로 했을 경우
   // document.getElementsByTagName('p').style.color = 'yellow';
   // -> 배열에 스타일 적용 불가
   const arr = document.getElementsByTagName('p');
   for(let item of arr){
       item.style.color = 'yellow';
   }
   // -> 배열에서 요소를 하나씩 꺼내어 적용하는 건 가능하나 상대적으로 비효율적
   
   // h5, p 두 태그의 배경색을 동시에 blue로 지정하기
   // jQuery 선택자는 css 선택자와 같음
   $('h5, p').css('backgroundColor', 'blue');
})

See the Pen 24-12-23 jquery 1-3 by Namu (@Namu-the-sans) on CodePen.

---

• 클래스 선택자

<h1 class="item">test1</h1>
<h1 class="item select">test2</h1>
<h1 class="item">test3</h1>
<h1 class="select">test4</h1>

// 클래스 선택자
$(function(){ // ready 함수
   // 클래스가 item인 요소의 글자색을 orange로 변경
   $(".item").css("color","orange");
   
   // 클래스가 select인 요소의 배경색을 green으로 변경
   $(".select").css("backgroundColor", "green");
   
   // 클래스가 item과 select를 동시에 가지고 있는 요소만
   // 글자 크기를 50px로 변경
   $(".item.select").css("fontSize", "50px");
})

See the Pen 24-12-23 jquery 1-4 by Namu (@Namu-the-sans) on CodePen.

---

• 아이디 선택자

<h3>아이디 선택자 예제</h3>
영어 소문자 + 영어 대문자 + 숫자로만 이루어진 문자열<br>
글자수는 총 8~20글자 사이<br>
단, 첫 글자는 반드시 영어 소문자

<input type="text" id="input1">
<span id="span1"></span>

// 아이디 선택자
const regExp = /^[a-z][a-zA-z0-9]{7,19}$/;

$("#input1").on("input", function(){
   // on() == addEventListener
   // -> 특정 이벤트 발생 시 동작(이벤트 핸들러) 지정
   
   // input 이벤트 : 입력과 관련된 모든 행위
   
   // 1) 작성된 값이 정규 표현식에 맞는 형식인지 검사
   if(regExp.test( $("#input1).val() )){
      // $("#input1).val()
      // : 아이디가 input1인 요소에 작성된 값(value)을 얻어옴
      
      // 2) 정규식 결과에 따라 내용 출력
      $("#span1).text("유효한 문자열 형식 입니다.");
      $("#span1).css("color", "green");
   } else{
      $(#span1).text("유효하지 않은 문자열 형식 입니다.").css("color", "red");
      // method chaining : 하나의 대상에 대하여 여러 메소드를 연달아 작성하는 기술
   }
})

See the Pen 24-12-23 jquery 1-5 by Namu (@Namu-the-sans) on CodePen.

---

• 자식 후손 선택자

<h3>자식, 후손 선택자</h3>

<div class="area">
  <ul>
    <li><h4>사과</h4></li>
    <li>바나나</li>
    <li>딸기</li>
    <li class="qqq">오렌지</li>
    <li class="qqq">멜론</li>
  </ul>

  <h4>테스트1</h4>
  <h4 class="qqq">테스트2</h4>
</div>

// 자식, 후손 선택자
$( () => {
   // 클래스가 area인 요소의 자식 중 h4 글자색 red로 변경
   $(".area>h4").css("color", "red");
})

// 예제
// 클래스가 area인 요소의 후손 중에 ul 후손 중에
// 클래스가 qqq인 요소 배경색 원하는 걸로 바꾸기
$(".area>ul>.qqq").css("backgroundColor", "green");

// 클래스가 area인 요소의 후손 중
// 클래스가 qqq인 요소의 폰트 크기를 30px로 변경
$(".area .qqq").css("fontSize", "30px");

// 내용이 "사과"인 요소를 선택해서
// 배경 빨강색, 글자는 흰색으로 변경
$(".area>ul h4").css("backgroundColor", "red").css("color", "white");

See the Pen 24-12-23 jquery 1-6 by Namu (@Namu-the-sans) on CodePen.

---

• 속성 선택자
  - 요소[속성] : 특정 속성을 가지고 있는 객체 선택
  - 요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택
  - 요소[속성 ~= 값] : 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택
  - 요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택
  - 요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택
  - 요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택

성별 :
<input type="radio" name="gender" id="male" value="남">
<label for="male">남자</label>

<input type="radio" name="gender" id="female" value="여">
<label for="female">여자</label>

<button type="button" id="check">확인하기</button>

// 속성 선택자
$("#check").on("click", function(){
   
   // name 속성값이 gender인 요소 선택
   console.log($("input[name='gender']"));
   
   // name 속성값이 gender인 요소 중 check된 요소를 선택
   // :checked -> check된 요소만 선택
   const gender = $("input[name='gender']:checked");
   
   console.log(gender.length);
   // 아무 것도 check 안 한 경우 : 0
   // check한 경우 : 1
   
   // radio 버튼이 하나도 선택되지 않은 경우
   // "성별을 입력해주세요." 알림창
   if(gender.length == 0){
      alert("성별을 선택해주세요.");
   } else{
      // 1) 체크된 요소를 얻어왔으므로
      //    gender 변수에서 value만 얻어오기 (순수 JS)
      console.log(gender[0].value);
      
      // 2) 체크된 요소를 모두 얻어와도
      //    radio는 한 개만 체크되기 때문에
      //    변수 한 개랑 같다고 해석하여
      //    자동으로 0번 인덱스에 있는 요소의 value를 얻어옴 (JS + jQuery)
      console.log(gender.val());
      
      // 3) 순수 jQuery
      console.log($(gender).val());
      // $(gender) : 체크된 요소만 담긴 배열 + 요소를 선택
      // --> 체크된 radio 버튼을 선택하는 jQuery 선택자
   }
})

---

• prop( ) 메소드
  -  attribute : type, name, class, id, value 등과 같이 속성값을 별도로 입력해야되는 속성
  - property : checked, selected 와 같이 속성값이 별도로 입력되지 않는 속성
  - prop("속성명")  :  해당 속성이 요소에 존재하면 true, 아니면 false
  - prop("속성명", true | false) : 해당 속성을 checked 또는 selected 상태로 변경(true)/해제(false)

취미 :
<input type="checkbox" name="hobby" value="football"> 축구
<input type="checkbox" name="hobby" value="game" checked> 게임
<input type="checkbox" name="hobby" value="music"> 음악감상

<button type="button" id="btn1">확인</button>

// prop() 메소드
$("#btn1").on("click", function(){
   const arr = $("input[name='hobby']");
   
   consloe.log(arr);
   
   let str = ''; // 체크된 요소의 value 값을 누적해서 저장할 변수
   
   console.log(arr.prop("checked"));
   // 배열명으로만 적을 경우 0번 인덱스만 확인 가능함
   
   for(let i=0; i<arr.length; i++){
      
      // 각 인덱스에 저장된 checkbox 요소가
      // 체크되어 있는 상태인지 확인
      console.log(i + " : " + $(arr[i]).prop("checked"));
      
      if($(arr[i]).prop("checked")){
         str += $(arr[i]).val() + " ";
      }
   }
   alert(str);

   $(arr[0]).prop("checked", true);
})

See the Pen 24-12-23 jquery 1-7 by Namu (@Namu-the-sans) on CodePen.