jQuery ( 선택자 )

 

 

 

 

 

•  태그 선택자

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

 

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

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

        $(document).ready(function(){
          	  // jQuery 선택자는 css 선택자와 같다 !! 
            $("h5").css("color","red");
            $("p").css("color","blue");
            $("h5, p").css("backgroundColor","yellow");

            //document.getElementsByTagName("p").style.color="green";  배열에 스타일적용 X
            const arr = document.getElementsByTagName("p");
            for(let result of arr){
                result.style.color="green";          // 배열요소로 가능하나, 불편하다 .
            }
        });

 

 

 

 

 

 

 

 

 

 

• 클래스 선택자

 

    <h4>클래스 선택자</h4>

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

        $(document).ready(function(){
            $(".item").css("color","orange");           //클래스가 item 인 요소의 글자색 orange 변경
            $(".select").css("backgroundColor","yellowgreen");  //클래스가 select 인 요소의 배경색 yellowgreen 변경
            
                                             // item, select  동시에 가지고있는요소만 글자크기 10px 변경
            $(".item.select").css("fontSize","10px ");
        });

 

 

 

 

 

 

 

 

 

 

 

 

• 아이디 선택자

 

ex) 영어 소문자 + 영어 대문자 + 숫자로만 이루어진 문자열

       글자수는 총 8 ~20 글자사이 ,

       단, 첫글자는 반드시 영어 소문자

    <h3>아이디 선택자</h3>

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

        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").css("color","green");
            }else{
                $("#span1").text("유효하지 않은 문자열").css("color","red");
            }
        })

아이디 선택자

 

 

 

 

 

 

 

 

 

 

 

• 자식, 후손 선택자

 

    <h3>자식, 후손 선택자</h3>
    <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>

        $(function(){
            $(".area > h4 ").css("color","red");           // .area의 자식 h4
            $(".area > ul> .qqq").css("backgroundColor","tomato");  // .area 의 ul 의 .qqq

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

           			 // 사과 요소 선택하여 배경 빨강, 글자흰색 
            $(".area > ul > li> h4").css("backgroundColor","red").css("color","white");
        });

 

 

 

 

 

 

 

 

 

 

 

 

 

• 속성 선택자

 

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

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

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

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

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

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

 

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

        $("#check").on("click",function(){
            //name 속성값이 gender 요소 선택
            const gender= ( $("input[name='gender']:checked"));
            
            console.log ( gender.length);
            // check 안하면  0
            // check 하면   1

            //radio 하나도 선택되지 않은경우
            if(gender.length==0){
                alert("남자 또는 여자중 하나를 선택해주세요")
            }else{
                // 1. 순수 JS
                console.log(gender[0].value);  //  남, 여
                // 2. JS + jQuery 
                console.log(gender.val());     //  남, 여
                // 3. 순수 jQuery
                console.log( $(gender).val()); //  남, 여
                
                alert(gender.val() + "자를 선택하셨슴둥");
            }
        })

속성 선택자

성별: 남자 여자

 

 

 

 

 

 

 

•  prop () 메서드

 

-- attribute  :  type , name , class , id , value  등과 같이 속성값 별도로 입력해야하는 속성.

-- property  :  checked , selected 등과 같이 속성값이 별도로 입력되지 않는 속성

 

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

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

 

    <h3>prop() 메서드</h3>

    취미 : 
    <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>

       $("#btn1").on("click",function(){

            const arr = $("input[name='hobby']");
            let str = "";    // 체크된요소의 value값을 저장할 변수

            console.log( arr.prop("checked"));              
            // 배열명 자체를 적을경우 0번인덱스만 확인가능.  == false

            for (let i=0; i<arr.length; i++){
                console.log(i +" : "+ $(arr[i]).prop("checked"));  // 각 인덱스 체크상태확인

                if( $(arr[i]).prop("checked") ){
                    str += $(arr[i]).val() + " ";  // 체크된요소 value을 str에 저장
                }
            }
            alert(str);            // str 출력
        });

prop() 메서드

취미 : 축구 게임 음악감상