1
2
3
4
5
6
7
8
<script>
        $('span.chkAll').bin('click',function(){
//             $('input[type=checkbox].chkAll').click();
            $('input[type=checkbox].chkAll').trigger('click');
        }); //위에꺼는 ..span.chkAll 엘리먼트의 click이벤트에서
            //$('input[type=checkbox].chkAll')의 click메소드를 그냥실행
            //아래꺼는 실제 클릭 이벤트를 발생시킴
    });
cs

이벤트 연결함수

1. 각 이벤트 함수에 직접 연결

2. bind함수 이용 (1보다 유연, 이벤트 타입을 동적으로 지정)

3. live함수 이용 (동적으로 생성되는 요소에 사용) -> 1.9deprecated

4. on함수 이용 (동적으로 생성되는 요소에 사용) ->1.7부터 추가됨, bind,live 모두 통합하여 on으로 사용 권장


jquery 숫자만 입력

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    $(function(){
        $('#rrn1').on('keypress',function(event){
            if(event.which && 
                    (event.which > 47 && event.which < 58 
                            || event.which == 8)){
                
            }else{
                event.preventDefault();
return false;
            }
        })
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
<script>
        $('#rrn1').on('keyup',function(){
//             alert('dd');
            if($(this).val().length == 6)
            {
                $('#rrn2').trigger('focus');
                
            }
        });
        
        $('#rrn2').on('keyup',function(){
            if($(this).val().length == 7)
            {    
                
                var ch = $(this).val().slice(0,1);
                var gender = $('#gender');
                if(ch == '1' || ch == '3')
                    gender.text('남자');
                else if(ch == '2' || ch == '4')
                    gender.text('여자');
                
                var isAdult = $('#isAdult');
                var year = $('#rrn1').val().slice(0,2);
                var age;
                if(ch == '1' || ch == '2')
                    age = 116 - year;
                else if(ch == '3' || ch =='4')
                    age = 16 - year;
//                 isAdult.text(age);
                if(age > 20)
                    isAdult.text('성인');
                else
                    isAdult.text('미성년');
            }
        });
    });
</script>
</head>
<body>
<input type="text" id="rrn1" size="6">-<input type="password" id="rrn2" size="7"><p/>
 
성별 : <span id="gender"></span><p/>
성인여부 : <span id="isAdult"></span><p/>
cs


W3Schools Online Web Tutorials

www.w3schools.com/



jQuery

https://jquery.com/


jQuery: The Write Less, Do More, JavaScript Library.
‎Download jQuery · ‎jQuery API Documentation · ‎Plugins · ‎jQuery Learning Center


Ajax : Asynchronous JavaScript and Xml

비동기 요청으로 페이지가 아닌 데이터만 응답받는 통신방식

응답받는 데이터의 유형은 Json 혹은 xml


$('select').load(url,[params],[callbackFunc])

JQuery Ajax기능 중 가장 간단한 함수로 첫번재 인수로 지정한 url에 요청을 보내고 결과를 select된 요소에 삽입함

두번째 인자인 params는 요청 파라미터이고 callbackFunc는 응답 수신 완료후 수행할 메소드 

두번째랑 세번째는 생략가능

jQuery ajax 지원 메소드

1.요소.load(url) : url에 요청을 보내고 결과를 현재 요소에 삽입

2. jQuery.get(url,callbackFunc)

3. jQuery.post(url,data,callbackFunc)

4. jQuery.getJSON(url,data,callbackFunc)


2->get방식으로 url에 요청을 보내고 응답을 받으면 callbackFunc실행

load, get, post, getJSON 인자 같음

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
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/Hello.do")
public class HelloServlet extends HttpServlet{
 
   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
      // TODO Auto-generated method stub
//      super.doGet(req, resp);
      System.out.println("Get요청 들어옴");
      doProc(req, resp);
   }
 
   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
      // TODO Auto-generated method stub
//      super.doPost(req, resp);
      System.out.println("Post요청 들어옴");
      doProc(req, resp);
   }
   protected void doProc(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
       req.setCharacterEncoding("UTF-8");
       resp.setCharacterEncoding("UTF-8");
      PrintWriter writer = resp.getWriter();
      writer.write(req.getParameter("name")+"님 안녕하세요");
      writer.flush();
   }
   
}
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
<%@ 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>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#sendAjax').on('click',function(){
            
//             $('#result').load('Hello.do');
 
//             $.get('Hello.do',function(data)
            $.post('Hello.do',{
                name : $('#name').val()    
            }, function(data){
                alert(data);
            });
        });
    });
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="sendAjax" value="Ajax요청">
<p/>
<div id="result"></div>
</body>
</html>
cs


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

Day83 ajax  (0) 2016.07.15
Day81  (0) 2016.07.13
Day80 jQuery  (0) 2016.07.12
Day79  (0) 2016.07.11
Day78  (0) 2016.07.08

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

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


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

+ Recent posts

티스토리툴바