jQuery 02. 기타선택자

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

<div>
        <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").css("color","skyblue");
            $("ul>li>h3").css("color","brown");
            // 변경값이 여러개일 경우 .으로 연이어서 호출하거나, 객체에 담아서 전달
            $("ul>.ch").css("backgroundColor","yellow").css("color","blue"); 
            $("ul>.ch").css({backgroundColor:"yellow",color:"pink"});
        })
    </script>

* 자손선택자(>)와 후손선택자( )

자손1
• div의 후손이면서 ul의자손1
• div의 후손이면서 ul의자손2
• div의 후손이면서 ul의자손3
• div의 후손이면서 ul의자손4

• div, ul의 후손이면서 li의 자손

자손2

자손3

 

 

2. 속성선택자 

        선택자[속성] : 특정속성을 가지고 있는 모든 요소 선택 

        선택자[속성=특정값] : 속성값이 특정값과 "일치"하는 요소들 선택 

        선택자[속성~=특정값] : 속성값에 특정값을 "단어로써 포함"하는 요소들 선택 

        선택자[속성^=특정값] : 속성값이 특정값으로 "시작"하는 요소들 선택

        선택자[속성$=특정값] : 속성값이 특정값으로 "끝"나는 요소들 선택 

        선택자[속성*=특정값] : 속성값에 특정값을 "포함"하는 요소들 선택

 

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

    <script>
        $(function(){
           $("input[class]").css("backgroundColor","pink"); //input요소들중에서 class가지고있는
           $("input[class~=test]").attr("value","1234");
           $("input[type^=ra]").attr("checked",true);
		   $("input[class*=st2]").css({width:"100px",height:"100px"}).val("왕버튼");
        })

    </script>

 

 

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

    텍스트상자 : <input type="text"> <br>
    일반버튼 : <input type="button"> <br>
    체크박스 : <input type="checkbox"> <br>
    첨부파일 : <input type="file"> <br>
    비밀번호 : <input type="password"> <br>
    라디오버튼 : <input type="radio"><br>
    초기화버튼 : <input type="reset"> <br>
    제출버튼 : <input type="submit"> 

    <script>
        $(function(){
            $(":text").css("backgroundColor","red");
           //$(":button").css({width:"100px",height:"100px"}).val("왕버튼");
           // $(":checkbox").attr("checked",true);
            $(":file").css("backgroundColor","yellowgreen");
            $(":password").css("backgroundColor","yellow");
            $(":radio").attr("checked",true).css({width:"50px",height:"50px"});
            $(":reset").css({backgroundColor:"blue",color:"white", border:"none"}).val("취소")
           // $(":submit").click(function(){alert($(":password").val())}); //val : 그냥 호출하면 밸류값을 가지고 오고 전달하면서 호출시 값을 변경할 수있음 
          
           //$(":submit").click(function(){alert($(":text").val())}); 
           //val메소드 이용시 유의점 : 선택된 요소가 여러개일경우 기본적으로 첫번째요소의 value값을 반환시켜줌  
           
           $(":submit").click(function(){
                alert($(":text").eq(1).val()); // eq(인덱스) : 배열의 인덱스번호 입력 
           })

          /*  // mouseenter : 선택된 요소의 경계 내부로 마우스가 들어가는 순간 발생하는 이벤트 
           $(":submit").mouseenter(function(){  //$(this) : 현재 이벤트가 발생된 요소
                //$(this).css("backgroundColor","purple");
                $(this).addClass("test");
                //.addClass() :선택된요소에 클래스를 추가해주는 메소드 
           })

           // mouseout : 선택된 요소 경계 외부로 마우스가 나갈때 발생하는 이벤트
           $(":submit").mouseout(function(){
                //$(this).css("backgroundColor","");
                $(this).removeClass("test");
                //.removeClass(): 선택된 요소에 클래스를 제거시켜주는 메소드 

           }) */

           // hover : mouseenter + mouseout 
           $(":submit").hover(function(){$(this).addClass("test")},function(){$(this).removeClass("test")})
        })
    </script>

텍스트상자 :
일반버튼 :
체크박스 :
첨부파일 :
비밀번호 :
라디오버튼 :
초기화버튼 :
제출버튼 :

 

4. 상태(checked, selected, disable, enable)선택자 

- checked선택자(radio, checkbox)

 취미 :  
    <input type="checkbox" name="hobby" value="game"> 
    <label>게임</label>
    <input type="checkbox" name="hobby" value="movie">
    <label>영화</label>
    <input type="checkbox" name="hobby" value="music">
    <label>음악</label>
    <br>
	 <button type="button" id="btn">실행확인</button>
    <script>
        $(function(){
             $("#btn").click(function(){
                $("input:checked").css({width:"50px",height:"50px"});
             })
            $(":checkbox").change(function(){
                //console.log("값변경됨!")
                console.log($(this).prop("checked")) //prop() : 해당 속성값을 알고자할때 메소드 

                if($(this).prop("checked")){
                    $(this).css({width:"50px",height:"50px"});
                    $(this).next().css("font-size","2em")

                }else{
                    $(this).css({width:"",height:""});
                    $(this).next().css("font-size","");

                }
            })
        })
    </script>

취미 : 게임 영화 음악