소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
//            $('input[type="text"]').css('border','1px solid red');
            $(':text').css('border','1px solid red');//위와 동일한 결과
            $(':password').css('background-color','gray')
            $(':submit').css('background-color','yellow')//전송과 버튼1 버튼이 적용
            $(':reset').css('background-color','gray')//취소 버튼2 버튼이 적용
            $(':checked').css('border','1px solid yellow');//선택자는 선택이됨 css가안먹
            $(':checked').next().css('border','2px solid yellow');
            $(':selected').css('color','red');
            
        });
        
    </script>
</head>
<body>
    <h1>회원가입</h1>
    <form action="">
       <p>
            <label for="id">id</label><input type="text" id="id"/>
       </p>
       <p>
           <label for="pw">pw</label><input type="password" id="pw"/>
       </p>
       <p>
           <select>
                <option>축구</option>
                <option selected='selected'>농구</option>
                <option>야구</option>
            </select>
       </p>
       <p>
           <input type="checkbox" id="chk" checked='checked'/>
           <label for="chk">이용약관 동의</label>
       </p>
        <input type="submit" value="전송">
        <input type="reset" value="취소">
        <button>버튼1</button>
        <button type="reset">버튼2</button>
    </form>
</body>
</html>
cs

결과


저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

부트스트랩 달력 기능  (0) 2018.03.08
ex06.html  (0) 2016.10.07
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06
ex02.html  (0) 2016.10.06

+ Recent posts

티스토리툴바