02. jQuery 선택자

☑️ 태그 선택자

$(document).ready(function(){
	$("h5").css("color","red");
    $("p").css("color", "blue);
     
    $("h5, p").css("backgroundColor", "pink");
}

!참고

// document.getElementsByTagName("p").style.backgroundColor = "yellow";
// -> 배열에 스타일 적용할 수 없다

const arr = document.getElementsByTagName("p");
console.log(arr); // HTMLCollection p

for (let a of arr) {
	a.style.backgroundColor = "yellow";
}
// -> 배열에서 요소를 하나씩 꺼내서 적용하는건 가능하나 불편하다!

☑️ 클래스 선택자

$(document).ready(function(){
  $(".item").css("fontSize", "18px");
  $(".item.select").css("color", "orange");
});

☑️ 아이디 선택자

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

	<script>
      const regExp = /^[a-z][a-zA-Z0-9]{7,19}$/;

      $("#input1").on("input", function () {
        // on() == addEventListner
        // : 특정 이벤트 발생 시 동작(이벤트 핸들러) 지정
        // 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 : 한 개의 대상에 대하여 여러 메소드를 연달아 작성하는 기술
          // ex) char gender = sc.next().toUpperCase().charAt(0);
        }
      });
    </script>

☑️ 자식, 후손 선택자

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

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

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

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

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

☑️ 속성 선택자

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

성별 : 
<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>

<script>
	$("#check").on("click", function () {
	// name 속성값이 gender인 요소 선택
	// check된 요소를 선택
		const gender = $("input[name='gender']:checked");
		// 변수 gender는 Javascript 방식의 변수이다
        // -> 이후 gender를 단순하게 호출하게 되면
        // Javascript 방식으로 사용해야 한다

        console.log(gender.length);
        // 아무것도 check 안함 : 0
        // 하나 check : 1

        console.log(gender);

        // 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>

☑️ prop() 메소드

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

<script>
      $("#btn1").on("click", () => {
        const arr = $("input[name='hobby']");

        let str = "";
        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() + " ";
            // 체그된 요소의 value값을 얻어와 str 변수에 누적
          }
        }
        alert(str);
      });
    </script>