ready()함수 : 문서가 로딩된 후 마지막에 수행하는 함수

$(document).ready(function() {});

특정 이벤트 발생 시 동작(이벤트 핸들러)지정

(input 이벤트 : 입력과 관련된 모든 행위)
$("#input1").on("input", function() {});
-> on() == addEventListener

아이디가 input1인 요소에 작성된 값(value)을 얻어옴

$("#input1").val();

---

method chaining

한개의 대상에 대하여 여러 메소드를 연달아 작성하는 기술
// ex) char gender = sc.next().toUpperCase().charAt(0);

$("#span1").text("유효하지 않은 문자열 형식입니다.").css("color", "red");

---

jQuery 선택자 css 선택자와 같다!

$("h5").css("color", "red");

클래스가 item, select를 동시에 둘다 가지고 있는 요소

$(".item.select").css("fontSize", "10px");

-> 배열에서 요소를 하나씩 꺼내서 적용하는건 가능하나 불편하다!
h5, p 두 태그 동시에 배경색 yellow 지정 가능
$("h5, p").css("backgroundColor", "yellow");

---

배열에 스타일 적용할 수 없다.

document.getElementsByTagName("p").style.backgroundColor = "yellow";

  $("#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() + '자를 선택하셨습니다.');
            }
        });

속성 선택자

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