📝 jQuery 선택자

jQuery는 요소를 선택할 때 아래 형식으로 작성한다.

$("CSS 선택자") 또는 $(요소가 저장된 변수)

• CSS 선택자로 요소를 선택한 경우
  - id로 선택 시 단일 요소 반환
  - class, name, 자식/후손 등으로 선택 시 배열로 반환

  
  

📌 jQuery 참고 함수

💡 ready()

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

💡 on()

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

input 이벤트 : 입력과 관련된 모든 행위

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

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

📌 태그 선택자

jQuery 선택자는 css 선택자와 같다.

🔎 코드로 살펴보기

• html

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

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

• js

// 태그선택자

// ready() 함수 : 문서가 로딩된 후 마지막에 수행하는 함수
$(document).ready(function(){

    // jQuery 선택자는 css 선택자와 같다!
    $("h5").css("color", "red");

    $("p").css("color", "blue");

    // 자바스크립트로 했을 때
    // document.getElementsByTagName("p").style.color = "blue";
    // -> 배열에 스타일을 적용할 수 없다.
     
    const arr = document.getElementsByTagName("p");
    for(let item of arr){
        item.style.color = "yellow";
    }

    // -> 배열에서 요소를 하나씩 꺼내서 적용하는 것은 가능하나 불편하다.

    // h5, p 두 태그 동시에 배경색을 green으로 지정하기
    $("h5, p").css("backgroundColor", "green");
});

🔎 출력 화면

---

📌 클래스 선택자

🔎 코드로 살펴보기

• html

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

• js

// 클래스 선택자
$(document).ready(function(){
    // 클래스가 item인 요소의 글자색을 orange로 변경
    $(".item").css("color", "orange");

    // 클래스가 select인 요소의 배경색을 yellowgreen으로 변경
    $(".select").css("backgroundColor", "yellowgreen");

    // 클래스가 item, select를 동시에 가지고 있는 요소만
    // 글자 크기를 50px로 변경
    $(".item.select").css("fontSize", "50px");
})

🔎 출력 화면

---

📌 아이디 선택자

🔎 코드로 살펴보기

• html

    영어 소문자 + 영어 대문자 + 숫자로만 이루어진 문자열<br>
    글자수는 총 8~20글자 사이<br>
    단, 첫 글자는 반드시 영어 소문자

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

• js

// 아이디 선택자
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").text("color", "green");

    } else{
        $("#span1").text("유효하지 않은 문자열 형식입니다.").css("color", "red");
  
        // method chaining : 하나의 대상에 대하여 아래 메소드를 연달아 작성하는 기술
    }
})

🔎 출력 화면

---

📌 자식, 후손 선택자

🔎 코드로 살펴보기

• html

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

• js

// 자식, 후손 선택자

// 제일 간단한 형태의 ready 함수
$(function(){
    // 클래스가 area인 요소의 자식 중 h4 글자색을 red로 변경
    $(".area > h4").css("color", "red");

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

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

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

🔎 출력 화면

---

📌 속성 선택자

💡 요소[속성]

특정 속성을 가지고 있는 객체 선택

💡 요소[속성 = 값]

속성 안의 값이 특정 값과 같은 객체 선택

💡 요소[속성 ~= 값]

속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택

💡 요소[속성 ^= 값]

속성 안의 값이 특정 값으로 시작하는 객체 선택

💡 요소[속성 $= 값]

속성 안의 값이 특정 값으로 끝나는 객체 선택

💡 요소[속성 *= 값]

속성 안의 값이 특정 값을 포함하는 객체 선택

🔎 코드로 살펴보기

• html

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

• js

// 속성 선택자
$("#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

    // 변수 gender는 Javascript 방식의 변수이다.
    // -> 이후 gender를 단순하게 호출하게 되면
    //    Javascript 방식으로 사용해야 된다.

    // radio 버튼이 하나도 선택되지 않은 경우
    // "남자 또는 여자 중 하나를 선택해 주세요" 알림창 출력
    if(gender.length == 0 ){
        alert("남자 또는 여자 중 하나를 선택해 주세요.");

    } else{

        // 1) 체크된 요소를 모두 얻어왔으므로
        //    배열 형태로 저장된 gender 변수에서
        //    0번 인덱스의 value만 얻어오기 (순수 JS)
        console.log(gender[0].value);

        // 2) 체크된 요소를 모두 얻어와도
        //    radio는 1개만 체크되어 있기 때문에
        //    변수 1개랑 같다라고 해석하여
        //    자동으로 -번 인덱스 요소에 있는 value를 얻어옴(JS + jQuery)
        console.log(gender.val());

        // 3) 순수 jQuery
        console.log( $(gender).val() );
        // $(gender) : 체크된 요소만 담긴 배열 + 요소를 선택해라 기호
        // --> 체크된 radio 버튼을 선택하는 jQuery 선택자

        alert( $(gender).val() + "자를 선택하셨습니다.");
    }
})

🔎 출력 화면

---

📌 prop() 메소드

💡 attribute

type, name, class, id, value 등과 같이 속성값을 별도로 입력해야되는 속성

💡 property

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

💡 prop("속성명")

해당 속성이 요소에 존재하면 true, 아니면 false

💡 prop("속성명", true | false)

해당 속성을 checked 또는 selected 상태로 변경(true)/해제(false)

🔎 코드로 살펴보기

• html

    취미 :
    <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 src="js/02_jQuery선택자.js"></script>

• js

// prop() 메소드
$("#btn1").on("click", function(){

    const arr = $("input[name='hobby']");

    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")){
            // 체크된 요소의 value 값을 얻어와 str 변수에 누적
            str += $(arr[i]).val() + " ";
        }
    }

    alert(str);
})

🔎 출력 화면