03. 입력양식 필터 선택자1_- input 태그의 type 속성에 따라 문서 택체 선택하는 방법

 

    <div id="test" class="div1">
        텍스트 상자 : <input type="text">
    </div>
    <div class="div1">
        버튼 : <input type="button" value="버튼">
    </div>
    <div class="div1">
        체크 박스 : <input type="checkbox">
    </div>
    <div class="div1">
        파일 : <input type="file">
    </div>
    <div class="div1">
        이미지 : <input type="image" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
    </div>
    <div class="div1">
        패스워드 : <input type="password">
    </div>
    <div class="div1">
        라디오 : <input type="radio">
    </div>
    <div class="div1">
        리셋버튼 : <input type="reset">
    </div>
    <div class="div1">
        submit : <input type="submit">
    </div>

    <style>
        .div1 {
            margin-bottom: 20px;
        }
        
        .test1 {
            color: blue;
            background-color: brown;
            transition: all 1s;
        }
        
        .test2 {
            color: blueviolet;
            background-color: tan;
            transition: all 1s;
        }
    </style>

    <script>
        $(function() {
            // input:type으로 찾아서 선택한다!
            // text
            $('input:text').css('background-color', 'red');
            $('input:text').mousedown(function() {
                // class 변경법 1
                // $('#test').attr('class', 'test1');

                // class 변경법 2 (클래스가 더해지는 것, 기존 div1 클래스값 유지 됨)
                $('#test').addClass('test1');
            });
            $('input:text').mouseup(function() {
                // $('#test').attr('class', 'div1');
                $('#test').removeClass('test1');
            });//**텍스트 박스 눌러보면 달라짐!!!!!!!!!!!***

            // 버튼
            $('input:button').attr('value', '왕왕버튼').css('width', '300px').css('height', '100px');

            // chcekbox
            $('input:checkbox').attr('checked', true);
            $('input:checkbox').css({
                'width': '50px',
                'height': '50px'
            }); // css json객체로 주는 법

            // file
            $('input:file').css('background-color', 'yellow');

            // image
            $('input:image').mouseenter(function() {
                $(this).attr('src', 'https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png')
            });
            // image
            $('input:image').mouseout(function() {
                $(this).attr('src', 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png')
            });

            // password
            $("input:password").css("backgroundColor", "red");

            // 라디오
            $("input:radio").attr("checked", true);

            // 리셋
            $("input:reset").mousedown(function() {
                $("body").css("backgroundColor", "red");
            });

            // 서밋
            $("input:submit").mousedown(function() {
                $("body").css("backgroundColor", "blue");
            });
        });
    </script>

 

텍스트 상자 :

버튼 :

체크 박스 :

파일 :

이미지 :

패스워드 :

라디오 :

리셋버튼 :

submit :

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."