02. jQuery 선택자

1) 태그 선택자

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

<script>
  // ready()함수 : 문서가 로딩된 후 마지막에 수행하는 함수
  $(document).ready(() => {
    // jQuery 선택자는 css 선택자와 같다
    $("h5").css("color", "red");
    $("p").css("color", "blue");
    // document.getElementsByTagName("p").style.backgroundColor = "yellow";
    // -> 배열에 스타일을 적용할 수 없다
  
    const arr = document.getElementsByTagName("p");
    for(let el of arr){
      el.style.backgroundColor = "yellow";
    }
    // -> 배열에서 요소를 하나씩 꺼내서 적용하는건 가능하나 비효율적이다
    // h5, p 두 태그 동시에 배경색 yellow 지정 가능.
    $("h5, p").css("backgroundColor", "yellow");
  });
</script>

2) 클래스 선택자

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

<script>
  $(() => {
    // 클래스가 item인 요소의 글자색을 orange로 변경
    $('.item').css('color', 'orange');
  
    // 클래스가 select인 요소의 배경색을 yellowgreen으로 변경
    $('.select').css('backgroundColor', 'yellowgreen');
  
    // item, select를 동시에 둘다 가지고 있는 요소만 글자크기를 10px로 변경
    $('.item.select').css('fontSize', '10px');
  })
</script>

3) 아이디 선택자

영어 소문자 + 영어 대문자 + 숫자로만 이루어진 문자열
글자수는 총 8~20글자 사이
단, 첫글자는 반드시 영어 소문자
<input type="text" id="input1">
<span id="span1"></span>

<script>
  const regExp = /^[a-z][a-zA-Z\d]{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 : 한개의 대상에 대하여 여러 메소드를 연달아 작성하는 기술
    }
  });
</script>

4) 자식, 후손 선택자

<div class="area">
  <ul>
    <li><h4>사과</ht></li>
    <li>바나나</li>
    <li>딸기</li>
    <li class="qqq">오렌지</li>
    <li class="qqq">멜론</li>
  </ul>
  
  <h4>테스트1</h4>
  <h4 class="qqq">테스트2</h4>
</div>

<script>
  $(() => {
    $(".area > h4").css("color","red");

    $(".area > ul > .qqq").css("backgroundColor","tomato");

    $(".area .qqq").css("fontSize", "30px");

    $(".area > ul > li > h4").css("backgroundColor","red").css("color","white");
  });
</script>

5) 속성 선택자

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

성별 :
<input type="button" name="gender" id="male" value="남">
<label for="male">남자</label>
<input type="button" name="gender" id="female" value="여">
<laebe for="female">여자</label>

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

<script>
  $("#check").on("click", () => {
    // name 속성값이 gender인 요소선택
    // check 된 요소를 선택
    const gender = $("input[name='gender']:checked");
    
    // 변수 gender는 Javascript 방식의 변수이다
    // ➡️ 이후 gender를 단순하게 호출하게 되면 Javascript 방식으로 사용해야 한다
    
    console.log(gender.length);
    // 아무것도 check 안함 : 0
    // 하나 check : 1
    
    // radio 버튼이 하나도 선택되지 않은 경우
    if(gender.length == 0) {
      alert("성별을 선택해주세요")
    } else {
      // 1) 체크된 요소를 모두 얻어왔으므로
      // 배열 형태로 저장된 gender 변수에서
      // 0번 인덱스의 value만 얻어오기 (순수 JS)
      console.log(gender[0].value);
    
      // 2) 체크된 요소를 모두 얻어와도 radio는 1개만 체크되기 때문에
      // 변수 한개랑 같다고 해석하여 자동으로 0번 인덱스 요소의 value를 얻어옴
      // JS + jQuery
      console.log(gender.val());
    
      //3) 순수 jQuery
      console.log($(gender).val());
      // $(gender) : 체크된 요소만 담긴 배열 + 요소를 선택해라 기호
      // ➡️ 체크된 radio 버튼을 선택하는 jQuery 선택자
    
      alert(gender.val() + '자를 선택하셨습니다');
    }
  });
</script>

6) 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>

<script>
  $("#btn1").on("click", () => {
    const arr = $("input[name='hobby']");
    let str ="";
    
    console.log(arr.prop("checked")); // ➡️ false
    // 배열명을 적을 경우 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() + " ";
        // 체크된 요소의 value 값을 얻어와 str 변수에 누적
      }
    }
    
    alert(str);
  });
</script>