2. jQuery 선택자

   <div>  
        <h4 class="testClass test">테스트1</h4>
        <p>테스트2</p>
        <span id="testId">테스트3</span>
        <ul>
            <li>테스트1</li>
            <li class="testClass">테스트2</li>
            <li class="test">테스트3</li>
        </ul>
    </div>
    


    <script>

        // 1. 태그 선택자 
        $(document).ready(function(){

            // jQuery 선택자는 css 선택자와 같음 
            $("h4").css("color", "red")
            $("p").css("color", "blue")

            // 태그 여러개를 동시에 지정할 수 있다.
            $("h4, p").css("backgroundColor", "yellow")
             

            // * js방식 
            //   document.getElementsByTagName("p").style.color = "violet" -> 불가: 배열엔 스타일을 작성할 수 없어서 FOR문을 사용해야 한다. 
      
      
        // 2. 클래스 선택자 
            $(".testClass").css("fontSize", "30px")

            // 클래스 두 개를 동시에 가진 요소 선택하기 
            $(".testClass.test").css("fontStyle", "italic")


        // 3. 아이디 선택자 
            $("#testId").css("fontWeight", "bold").css("backgroundColor", "pink")

        // 4. 자식, 후손 선택자 
            $("div > ul > li:nth-child(1)").css("backgroundColor", "blue").css("color", "white")
        })
    </script>

 

5. 속성 선택자
  - 요소[속성] : 특정 속성을 가지고 있는 객체 선택

  - 요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택

  - 요소[속성 ~= 값] : 속성 안의 값이 특정 값을 같은 단어로서 포함하는 객체 선택

  - 요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택

  - 요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택

  - 요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택

    성별: 
    <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-btn">확인</button>

    <script>
        $("#check-btn").on("click", function(){

            // name의 속성 값이 gender인 요소 선택 
            const gender = $("input[name='gender']:checked")

            // 버튼이 하나도 선택되지 않은 경우 창 출력 
            if(gender.length == 0) {
                alert("성별을 선택해주세요.")
            } else {
                // 1. 순수 js 방법으로 0번째 인덱스 값 출력
                console.log(gender[0].value)

                // 2. js + jQuery
                 console.log(gender.val())

                // 3. 순수 jQuery
                console.log($(gender).val())

                alert(gender.val() + "자를 선택하였습니다.")
            }            
        })
    </script>

 

prop() 메소드

- prop("속성명") : 해당 속성이 요소에 존재하면 true, 아니면 false

- prop("속성명, true | false ") : 해당 속성을 checked 또는 selected 상태로 변경(true) / 해제(false)

* Attribute: type, name, class, id, value 등과 같은 속성은 값을 별도로 입력해야 함

   Property: checked, selected와 같이 속성값이 별도로 입력되지 않는 속성

   취미 :
    <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", function(){
            const arr = $("input[name=hobby]") // name이 hobby인 요소들
            let str = "" // 체크된 요소 값 누적을 저장할 변수 

            for(let i = 0; i < arr.length; i++) {
                // 각 인덱스에 저장된 checkBox의 요소가 checked 인지 확인하여 맞다면 str에 저장
                if($(arr[i]).prop("checked")) {
                    str += $(arr[i]).val() + "  "
                }
            }
            alert(str)
        })
   
    </script>