IT Study/Web

[JQuery] 기본 문법

도뿌리 2018. 8. 6. 15:13
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
or
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
or
<script type="text/javascript" src="./jquery/jquery.min.js"></script>
 -->
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
</head>
<body>
<!-- 
Javascript : client 언어(front). web server와 관계가 없다.
CSS : client. 디자인
JQuery : Javascript를 경량화, 간략화 시켜 놓은 것이다.
    document.getElementById("id").innerHTML, value;        ===> Javascript
    $("#id").text() or .val();        ===> JQuery
    Ajax가 JQuery에 포함. DOM조작등을 단순화시켜 놓은 것이다.
 -->    
 
<p>여기가 p태그 입니다.</p> 
 
<!-- id는 단일 -->
<p id="demo">여기가 p태그이며, id는 demo입니다</p>
 
<!-- class는 중복 가능 -->
<p class="cls">여기가 p태그이며, class는 cls입니다</p>
 
<h3 class="cls">여기가 h3태그이며, class는 cls입니다</h3>
 
<pre>
입력: <input type="text" id="id" value="abc">
<button type="button" id="btn" name="btn" onclick="myfunc()">버튼</button>
</pre>
 
<select id="sel" onchange="sell()">
    <option value="apple">사과</option>
    <option value="pear">배</option>
</select>
<script type="text/javascript">
 
/*JavaScript*/
function myfunc() {
    /* var text = document.getElementById("demo").innerHTML;
    document.getElementById("demo").innerHTML = "Hello";
    
    var _text = document.getElementById("id").value;
    document.getElementById("id").value = "World"; */
/* 
    var text = $("#demo").text();
    $("#demo").text("jHello");
    
    var _text = $("#id").val();
    $("#id").val("jWorld");
     */
}
/* JQuery*/
$(function () {
//    alert("실행");
 
//    $("p").hide();
//    $("p#demo").hide();
//    $("#demo").hide();
//    $(".cls").hide();
 
//    alert($('#demo').text());
//    alert($('#sel').val());
 
    $("#btn").click(function () {    //id가 btn인것을 클릭했을때
//        alert("클릭");
//        alert($('#sel').val());
        
        $("#demo").text($("#id").val());
    });
 
});
    
 
</script>
 
 
</body>
</html>
cs


저작자표시 비영리 동일조건