= 같은 문자열 찾는 것 이외에도 사용할 수 있는 셀렉터는

!= 같지 않다
^= 시작하는 문자열 지정
$= 끝나는 문자열 지정
*= 포함하는 문자열 지정


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
<script>
    $(document).ready(function(){
         //1.input태그(요소)중 type속성을 갖는 녀석들 배경색 변경/         
        $('input[type]').css('background',"#bcbcbc");
 
        //2.input태그(요소)중 type속성이 password인 놈의 글자색 핑크색 크기 30
         $('input[type=password]').css({'color':'pink','fontSize':'30px'});
        
        //여러 속성을 줄때 많이 쓰이는 방법은 메소드 체인
         $('input[type=password]').css('color','pink').css('fontSize','30px');
        
        //3.value의 값이 희동휘 인 요소를 찾아서 글자색을 파란색으로 변경
         $('input[value=희동휘]').css('color','blue');
        
         $('input[value=희동휘]').addClass('input').addClass('bggray');
        
        //4.select태그의 하위 option태그들 중 value속성의 값이 사 로 끝나는 요소를 찾아서 글자색을 green
        $('select option[value$=사]').css('color','green');
        
        //5.select태그의 하위 option태그들 중 value속성의 값이 회 로 시작하는 요소를 찾아서 글자색을 blue로 변경
        $('select option[value^=회]').css('color','blue');
        
        //하위 태그 속성>속성 과 속성 속성
        $('ul>li').css('color','pink');
 
        $('ul li').css('color','pink');
        
    });
</script>
cs


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
49
50
51
52
53
54
55
56
57
58
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //홀수 선택(인덱스는 0부터 시작함)
        $('tr:odd').css('background','gray');
        
        //짝수 선택(인덱스는 0부터 시작함)
        $('tr:even').css('background','green');
        
        //첫번째행
        $('tr:first').css('background','pink');
        
        //5행(인덱스는 0부터 시작함)
        $('tr:eq(5)').css('background','red');
        
        //인덱스가 0보다 큰행(인덱스는 0부터 시작함) (0보다 크거나 같은행은 ge)
        $('tr:gt(0)').css('background','orange');
        
        //숫자의 배수 +1
        $('tr:nth-child(3n+1)').css('background','green');
        
        
    })
</script>
</head>
<body>
    <table>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>주소</th>
        </tr>
        <tr>
            <th>희동휘</th>
            <th>26</th>
            <th>안양</th>
        </tr>
        <tr>
            <th>희동스</th>
            <th>16</th>
            <th>안산</th>
        </tr>
        <tr>
            <th>바동휘</th>
            <th>36</th>
            <th>고양</th>
        </tr>
        <tr>
            <th>희휘</th>
            <th>23</th>
            <th>중국</th>
        </tr>
        <tr>
            <th>희동</th>
            <th>6</th>
            <th>부천</th>
        </tr>
    </table>
cs


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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //         //input요소 중에서 name속성에 name값을 가지는 놈을 선택
        //         $('input[name=name]')
        //         .bind('focus',function(){
        // //             alert('포커스 얻어짐');
        //             $(this).css('background','pink').val('');//focus얻을때 원래 있던값 없애기 값 세팅도 똑같이 val()
        //         })
        //         .bind('blur',function(){
        // //             alert('이벤트 잃음');
        //             //배경색을 원래대로 돌려놓고, 해당 요소에 입력되있는 값을 alert으로 출력
        //             var value = $(this).css('background','white').val();
        //             alert(value);        
        //         })
 
        // //         .mouseover(function(){
        // //             $(this).css('background','black');
        // //         });
        //         $('select[name=job]')
        //         .bind('change',function(){
        //             if($(this).val() != "0" ){
        //                 alert($(this).find('option[value='+$(this).val()+']').text());
        //             }
        //         });
        $('#form').submit(function() {
            //             alert('서밋되나?');
            var idinput = $('input[name=name]');
            if (idinput.val() == '') {
                alert('이름이 없잖아');
                idinput.focus();
                return false;//submit을 막음
            }
            var type = $('select[name=job]').val();
            if (type == "0") {
                alert('직업을 고르라우!!');
                return false;
            } else if (type == "1") {
                $(this).attr('action', '1.do');
                $(this).submit();
            } else if (type == "2") {
                $(this).attr('action', '2.do');
                $(this).submit();
            } else if (type == "3") {
                $(this).attr('action', '3.do');
                $(this).submit();
            } else if (type == "4") {
                $(this).attr('action', '4.do');
                $(this).submit();
            } else if (type == "5") {
                $(this).attr('action', '5.do');
                $(this).submit();
            }
        });
        $('input[type=checkbox].chkAll')
        .bind('click',function(){
            var chkAll = $('input[type=checkbox].chkAll');
            if(chkAll.prop('checked'))
            {
                $('span.chkAll').text('선택해제');
                $('div input[type=checkbox]').prop('checked',true);
            }
            else
            {
                $('span.chkAll').text('전체선택');
                $('div input[type=checkbox]').prop('checked',false);
            }
            
        });
        $('span.chkAll').bin('click',function(){
            $('input[type=checkbox].chkAll').click();
        });
 
    });
</script>
</head>
<body>
    <form id="form">
        이름 : <input type="text" name="name">
        직업 : <select name="job">
            <option value="0">--직업선택--</option>
            <option value="1">회사원</option>
            <option value="2">개발자</option>
            <option value="3">의사</option>
            <option value="4">노가더</option>
        </select>
        <br>
            <input type="checkbox" class="chkAll">
            <span class="chkAll">전체선택</span>
            <br>
            <div id="subChk">
                <input type="checkbox">HTML
                <input type="checkbox">JavaScript
                <input type="checkbox">CSS3
            </div>
        <br>
        <input type="submit" value="제출ㅋ">
    </form>
</body>
</html>
cs


' IOT 기반 응용 SW과정 > Web Programing' 카테고리의 다른 글

Day83 ajax  (0) 2016.07.15
Day82  (0) 2016.07.14
Day80 jQuery  (0) 2016.07.12
Day79  (0) 2016.07.11
Day78  (0) 2016.07.08 
<meta name="viewport" content="width=device-width, initial-scale=1">
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Student</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#kb-container {
        width: 940px;
        margin: 0px auto;
        padding: 20px;
        border: 1px solid #bcbcbc;
        background-color: gray;
      }
      #kb-header {
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid #bcbcbc;
        background-color: gray;
      }
      #kb-content {
        width: 580px;
        padding: 20px;
        margin-bottom: 20px;
        float: left;
        border: 1px solid #bcbcbc;
        background-color: gray;
      }
      #kb-sidebar {
        width: 260px;
        padding: 20px;
        margin-bottom: 20px;
        float: right;
        border: 1px solid #bcbcbc;
        background-color: gray;
      }
      #kb-footer {
        clear: both;
        padding: 20px;
        border: 1px solid #bcbcbc;
        background-color: gray;
      }
      @media screen and (max-width:480px) {
        #kb-container {
          width: auto;
        }
        #kb-content {
          float: none;
          width: auto;
        }
        #kb-sidebar {
          float: none;
          width: auto;
        }
      }
}
</style>
</head>
<body>
    <div id="kb-container">
      <div id="kb-header">
        <h1>Student</h1>
      </div>
        <div id="kb-sidebar">
        <center>
            <input type="button" value="학생추가" onclick="location.href='joinForm.do'"><br>
            <input type="button" value="모든학생보기" onclick="location.href='studentList.do'"><br>
            <input type="button" value="회원정보수정" onclick="location.href='studentSearchForm.do'">    
        </center>
        </div>
        <div id="kb-content">
        <h2>사진</h2>
        <img src="이미지 주소">
      </div>
      <div id="kb-footer">
        <p>Copyright : LKB</p>
      </div>
    </div>
</body>
</html>
cs


' IOT 기반 응용 SW과정 > Review' 카테고리의 다른 글

jQuery select option value  (0) 2016.07.26
jsp 마우스 액션  (0) 2016.07.07
MyBatis_Spring <student>  (0) 2016.06.09
三周整理考试  (0) 2016.04.04
套装  (0) 2016.04.04

+ Recent posts

티스토리툴바