[jQuery] 3. 추가선택자

1. 자손선택자(>) ,  후손선택자 ()

    <div style="border: 1px solid black;">
        <ul>자손1
            <li>div의 후손이면서 ul의 자손1</li>
            <li>div의 후손이면서 ul의 자손2</li>
            <li class="ch">div의 후손이면서 ul의 자손3</li>
            <li class="ch">div의 후손이면서 ul의 자손4</li>
            <li>
                <h3>div/ul의 후손이면서 li의 자손</h3>
            </li>
        </ul>

        <h3>자손2</h3>
        <h3 class="ch">자손3</h3>
    </div>

    <script>
        $(function(){
            // div태그의 자식중 h3만 선택하기
            $("div>h3").css("color","lightblue");

            // div태그의 후손중 h3만 선택하기
            $("div h3").css("backgroundColor",'violet');
            $("div li>h3").css("backgroundColor",'red');
            // div>ul>li>h3 == div ul h3 도 똑같은 결과 나옴
            

            // ul자손들중 클래스명이 ch인 것들만 선택
            $("ul>.ch").css('backgroundColor','yellow');

            // li중에서 클래스가 ch인 것들만 선택
            $("li.ch").css('color','green');
        
        
        })
    </script>

 

 

▶ div 태그의 자식중 h3만 선택하기

$(function(){             $("div>h3").css("color","lightblue");         })

 

 

▶ div 태그의 후손중 h3만 선택하기

$(function(){             // div태그의 후손중 h3만 선택하기             $("div h3").css("backgroundColor",'violet');   // ⓐ             $("div li>h3").css("backgroundColor",'red');   // ⓑ             // div>ul>li>h3 == div ul h3 도 똑같은 결과 나옴         })

 

 

 

 

▶ul자손들 중 클래스명이 ch인 것들만 선택

$(function(){             // ul자손들중 클래스명이 ch인 것들만 선택             $("ul>.ch").css('backgroundColor','yellow');         })

 

 

 

▶ li중에서 클래스가 ch인 것들만 선택

$(function(){             // li중에서 클래스가 ch인 것들만 선택             $("li.ch").css('color','green');         })

 

결과화면

 

 

---

2. 속성선택자

- 선택자[속성] : 특정 속성을 가지고있는 모든 요소 선택
- 선택자[속성=특정값] : 속성값이 특정값과 "일치"하는 모든 요소 선택 
- 선택자[속성~=특정값] : 속성값이 특정값을 "단어로써 포함"하는 모든 요소 선택(공백을 기준으로 구분)
- 선택자[속성^=특정값] : 속성값이 특정값으로 "시작"하는 모든 요소 선택
- 선택자[속성$=특정값] : 속성값이 특정값으로 "끝"하는 모든 요소 선택
- 선택자[속성*=특정값] : 속성값이 특정값으로 "포함"하는 모든 요소 선택

 

 

    <input type="text">
    <input type="number" class="test test1">
    <input type="radio">
    <input type="checkbox">
    <input type="button" value="button" class="test2">

    <script>
        $(function(){
            // input요소중 class 속성을 가지고 있는 모든 요소 선택
            $("input[class]").css('backgroundColor','red');

            // input요소중 type속성의 속성값이 text인 요소에 value 속성에 값 추가
            $("input[type=text]").val('이고래');  
            

            // input요소중 클래스명에 'test'라는 값을 단어로써
            // 포함하는 모든 요소 선택후 value 속성에 값 추가
            $("input[class~=test]").val(1234);

            // input요소들중 type속성에 속성값이 ra로 시작하는 모든 요소 선택
            $("input[type^=ra]").attr('checked',true);


            // input요소들중 type속성에 속성값이 box로 끝나는 모든 요소 선택
            $("input[type$=box]").attr("checked",true);
            
            // => .attr() : html 속성들과 관련된 기능을 수행

            // input태그들 중 클래스명에 st2라는 단어가 포함된 요소 모두 선택
            $("input[class*=st2]").css("width","50px").css("height", "50px").val("버튼")   // 메소드 체이닝

        })
    </script>

 

▶ input value 속성에 값 추가

$("input[type=text]").val('추가할 값');  

 

 

▶ 선택한 요소에 checked 속성 추가후 true 값 반환

$("input[type^=ra]").attr('checked',true);

 

결과화면

 

 

---

3. 입력양식 선택자(input태그의 type속성에 따라서 요소를 선택)

☞ :type 속성값으로 표기

 

    기본 : <input type="text" name="" id=""><br>
    버튼 : <input type="button" value=""> <br>
    체크박스 : <input type="checkbox" name="" id="">  <br>
    첨부파일 : <input type="file" name="" id="">  <br>
    비밀번호 : <input type="password">  <br>
    라디오버튼 : <input type="radio" name="" id=""> <br>
    제출버튼 : <input type="submit" value="제출">

 

 

▶ 모든 type이 text인 것은 배경색으로 "red"로 표기

$(":text").css('backgroundColor','red');

 

 

▶ 부여하고자 하는 스타일이 여러개일 경우 객체형태 ( {속성명: 속성값, 속성명: 속성값})로 제시한다.

const style = {width:"200px", height:"200px"};             $(":button").css(style).val("왕버튼");

 

 

▶ 라디오 버튼 : check속성 추가, 가로길이 50px, 세로길이 50px, 배경색 : 노란색

 

 

▶ 첨부파일 : 배경색을 파란색, 글자색을 흰색, 테두리 없애기

 

 

▶ 제출버튼 : 선택한 요소에 경계내부로 마우스가 들어가는 순간 발생하는 이벤트

 

 

☞ ①번 방법과 ②번으로 하는 방법이 있는데, ②번으로 하는 방식이 더 유용하다.

☞ 그 이유는 맨아래에 "제출"버튼에 마우스를 갖다댔을 때 console 부분을 보면 자동으로 pinkStyle이 생기고, 마우스를 떼면 사라지는 것을 볼 수있다.

 

 

 

 

☞ 하지만....이보다 더 간단하게 사용할 수 있는 방법이 있다!!! 바로 hover를 사용하면 된다.

- hover는 jQuery에만 존재한다! hover를 사용함으로써 mouseenter와 mosuerout을 사용하지 않아도된다.
- hover : mouseenter + mouseout

 

    <script>
        $(function(){
            $(":text").css('backgroundColor','red');

            // $(":button").css('width','200px').css('height','200px').val('왕버튼');
            // => 부여하고자하는 스타일이 여러개일 경우 객체형태( {속성명: 속성값, 속성명: 속성값})로 제시한다.
            const style = {width:"200px", height:"200px"};
            $(":button").css(style).val("왕버튼");


            // 라디오버튼 : checked속성 추가, 가로길이 50px, 세로길이 50px, 배경색 : 노란색
            $(":radio").attr("checked",true).css({width:"50px", height:"50px",backgroundColor:"yellow"});


            // 첨부파일 : 배경색을 파란색, 글자색을 흰색, 테두리 없애기
            $(":file").css({backgroundColor:"blue", color:"white", border:"none"})


            // 제출버튼 : 선택한 요소에 경계내부로 마우스가 들어가는 순간 발생하는 이벤트

            // hover는 jQuery에만 존재한다! hover를 사용함으로써 mouseenter와 mosuerout을 사용하지 않아도된다.
            // hover : mouseenter + mouseout
            $(":submit").hover(
                
                function(){
                    // mouseenter에 대한 이벤트 발생시 실행할 함수
                    $(this).addClass("pinkStyle");
                } ,
                function(){
                    // mouseout에 대한 이벤트 발생시 실행할 함수
                    $(this).removeClass("pinkStyle");
                }
            )
        })
    </script>

 

 

▶ 결과 화면

 

---

4. 상태선택자(checked, selected, disabled, enabled)

1) checked 상태 선택자(radio, checkbox)

- 체크되어있는 입력 양식을 선택

- input : checked

 

    취미 :
    <!-- input:checkbox[name=hobby]*3 -->
    <input type="checkbox" name="hobby" value="게임">
    <input type="checkbox" name="hobby" value="영화">
    <input type="checkbox" name="hobby" value="음악">

 

    <script>
        $(function(){
            $(":checkbox").change(function(){
                // console.dir($(this).prop("checked"));    // 클릭하면 true 값 반환, 해제하면 false 값 반환됨
                // console.dir($(this).prop("checked", false));    // 체크표시가 안뜸
                // console.dir($(this).prop("name"));    // 클릭하면 name 값 반환
                console.dir(this);

                $("input:checked").css({width:"50px", height:"50px"}); // input 요소들 중에서 체크가 된 상태인것만 불러옴

                if($(this).prop("checked")){
                    // $(this).css({width:"50px", height:"50px"});     // if 값 설정
                }else{
                    $(this).css({width:"", height:""});
                }

            })
        })
    </script>

 

▶console.dir($(this).prop("checked"));

 

☞ check를 하면 true값이 반환되고, 해제하면 false 값 반환됨

 

 

▶ console.dir($(this).prop("checked", false));

☞ 아무리 체크버튼을 눌려도 체크가 안됨

 

 

▶ console.dir($(this).prop("name"));

 

☞ 클릭하거나 해제하면 name 값 출력됨

 

▶ $("input:checked").css({width:"50px", height:"50px"});

☞ input 요소들 중에서 체크가 된 상태인것만 불러옴

 

 

▶ if($(this).prop("checked")){} else{}

☞ check 하면 true, 해제하면 false일 경우 if값

 

 

check 할 경우

check 체크 해제 시

 

 

---

5. selected 상태선택자(select>option)

- option 객체 중에서 선택된 태그를 선택하는 선택자

- option : selected

 

    국가 :
    <select name="national">
        <option value="x">선택안함</option>
        <option value="ko">한국</option>
        <option value="us">미국</option>
        <option value="js">일본</option>
    </select>

    <button onclick="test();">확인</button>
    <br>

    선택한 나라 : <label id="result"></label>

    <script>
        $("select[name=national]").change(function(){
            $("#result").html($("select>option:selected").html());
        })

        // => 확인 버튼을 클릭안해도 바로 화면에 뜸
        
        function test(){
            // 현재 선택된 목록값 가져옴

            console.log($("select[name=national]").val());
            console.log($("select>option:selected").val());  // 위에 코드와 결과 같음
            
            console.log($("select[name=national]").html());   // option 태그 모두 가져옴
            console.log($("select>option:selected").html());  // 미국을 선택한다면 "미국" 출력

        }
    </script>

 

 

 

☞ 확인 버튼을 클릭안해도 "선택한 나라"에 값이 출력되는 것을 볼 수 있다.