jQuery - 설치 및 기초 표현방식
2020. 7. 27. 17:12ㆍjQuery
|
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//jQuery : javascript 이용해서 기능을 함수들로 정의
//https://jQuery.com/
//Download the uncompressed, development jQuery 3.5.1
//js/jquery-3.5.1.js
//1. jQuery 사용
//2. 대상선택.함수() 대상선택 하는 방법
//3.함수() 모양 .css() .attr() 내용 .html() .append()
//4. 배열 .each() 이벤트 .click() .mouseover()
//5. 효과 hide() show() toggle()
//6. 비동기방식 .ajax() .getJSON()
jQuery(document).ready(function () {
alert("준비1");
});
$(document).ready(function () {
alert("준비2");
});
$(function () {
alert("준비3");
});
</script>
</head>
<body>
<h1>js_jQuery1/test1.jsp</h1>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//대상 .함수()
//전체 대상선택
$('*').css('color','red');
//태그 대상 선택
$('h1').css('color','blue');
//#이름 대상선택 id="이름"
$('#ta').css('color','green');
// .이름 대상선택 class="이름"
$('.ta2').css('color','orange');
//태그[속성=값] 같다 태그[속성~=값] 포함
//태그[속성^=값] 시작값 태그[속성$=값] 끝값
$('input[type=text]').css('color','yellow');
//태그:odd 홀수 태그:even 짝수 태그:first 처음 태그:last 마지막
$('tr:odd').css('background','yellow');
$('tr:even').css('background','pink');
$('tr:first').css('background','skyblue');
});
</script>
</head>
<body>
<h1>js_jQuery1/test2.jsp</h1>
<table border="1">
<tr><td>번호</td><td>제목</td></tr>
<tr><td>1</td><td>제목1</td></tr>
<tr><td>2</td><td>제목2</td></tr>
<tr><td>3</td><td>제목3</td></tr>
<tr><td>4</td><td>제목4</td></tr>
</table>
<input type="text" value="아이디">
<input type="password" value="123">
<h1 id="ta">js_jQuery2/test3.jsp</h1>
<h1 class="ta2">js_jQuery3/test4.jsp</h1>
내용
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//대상.함수() .css()
var col=$('h3').css('color');
// alert(col);//rgb(0,0,0)
//h3태그 대상 css() 글자색 'yellow' 변경
$('h3').css('color','yellow');
//h3 대상 0번째 1번째 2번째 선택해서 글자색 변경
//배열 변수
// var color=['red','green','blue'];
// $('h3').css('color',function(index){
// alert(index);// 0,1,2
// alert(color[index]);//'red','green','blue'
// return color[index];
// });
//color background 두개 속석 적용
// $('h3').css('color','red').css('bakcground','pink');
// $('h3').css({
// color:'blue',
// background:'skyblue'
// });
var color1=['red','green','blue'];
var color2=['yellow','orange','pink'];
$('h3').css({
color:function(index){
return color1[index];
},
background:function(index){
return color2[index];
}
} );
});
</script>
</head>
<body>
<h1>js_jQuery1/test3.jsp</h1>
<h3>head-0</h3>
<h3>head-1</h3>
<h3>head-2</h3>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//대상.함수() .attr() 태그 속성
var s=$('img').attr('src');
// alert(s);
//img 대상 width 변경300
$('img').attr('width',300);
//첫번째 이미지 width 100 두번째 이미지 width 200 세번째 이미지 width 300
$('img').attr('width',function(index){
// var a=[100,200,300];
// return a[index];
return (index+1)*100;
});
//img 속성 width 500 , height 300
$('img').attr({
width:500,
height:300
});
//width 200 300 400 height 100 200 300
$('img').attr({
width:function(index){
return (index+2)*100;
},
height:function(index){
return (index+1)*100;
}
});
});
</script>
</head>
<body>
<h1>js_jQuery1/test4.jsp</h1>
<img src="1.jpg" width="200" height="100">
<img src="2.jpg" width="200" height="100">
<img src="3.jpg" width="200" height="100">
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//대상.html() // 대상에 글자를 가져오기, 넣기
// var h = $('h3').html();
// alert(h);
// $('h3').html('아이디중복입니다.');
// $('h3').html(function(index){
// return '결과'+index;
// });
//a=a+1
//function(index,oldhtml)
// *head-0*
$('h3').html(function(index,oldhtml){
// alert(oldhtml);
return '*'+oldhtml+'*';
});
});
</script>
</head>
<body>
<h1>js_jQuery1/test5.jsp</h1>
<h3>head-0</h3>
<h3>head-1</h3>
<h3>head-2</h3>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//대상.append() 대상 뒤부분에 추가
$('body').append('<h3>내용추가<h3>');
//'table' 태그 뒤부분에 1 안녕하세요
$('table').append('<tr><td>1</td><td>안녕하세요</td></tr>');
$('table').append('<tr><td>2</td><td>반갑습니다</td></tr>');
//2초마다 반복
setInterval(function () {
// div태그 대상에 첫번째 이미지를 뒷부분에 추가 $('img').first()
$('div').append($('img').first());
}, 2000);
});
</script>
</head>
<body>
<h1>js_jQuery1/test6.jsp</h1>
<div>
<img src="1.jpg" width="200" height="100">
<img src="2.jpg" width="200" height="100">
<img src="3.jpg" width="200" height="100">
<img src="4.jpg" width="200" height="100">
<img src="5.jpg" width="200" height="100">
</div>
<table border="1">
<tr><td>번호</td><td>제목</td></tr>
</table>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.high_0{background: yellow;}
.high_1{background: orange;}
.high_2{background: blue;}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//each()반복
//1. 태그 대상
//2. 변수 대상
//3. 파일결과 대상
$('h3').each(function (index) {
$(this).addClass('high_'+index);
});
});
</script>
</head>
<body>
<h1>js_jQuery1/test6.jsp</h1>
<h3 class="high_0">head-0</h3>
<h3 class="high_1">head-1</h3>
<h3 class="high_2">head-2</h3>
</body>
</html>
|
cs |
처음에 주석 처리된 곳을 보고 사이트에 접속하여서 jQuery를 일단 다운을 받고 프로젝트 안에 폴더를 하나 만들어서 그곳으로 다운로드한 파일을 이동해주고 그 주소를 활용하여서 다른 곳에서 계속 불러 쓰는 개념으로 사용한다고 배웠다.
일단 문법자체는 간단하지만 생소해서 그런지 css가 더 편하게 느껴졌다. 한 화면에서 비동기적으로 다른 곳으로 이동하지 않고 처리할 수 있는 장점이 있고 간단하게 사용 가능하다. script src="../js/jquery-3.5.1.js" 스크립트를 사용하여 주소를 입력해주고 불러쓰면 되는 데 사용법 자체는 깔끔하고 간단하다. 좀 더 보면서 문법에 얼른 익숙해지면 css보다 간단하게 사용할 수 있겠지란 생각으로 보아야겠다. $ 표시를 jQuery를 써야 하는 곳에 대신 써주면 되는 아주 간단한 방법으로 처음 해보았는데 확실히 편하게 느껴졌다. 필요할 때마다 jQuery를 적어주기엔 너무 번거로우니 편하긴 편하였다.
function의 사용법이 생소해서 익숙해지는데 시간이 조금 필요할 것 같다.
'jQuery' 카테고리의 다른 글
| jQuery - XML (0) | 2020.07.29 |
|---|---|
| jQuery - 결과가져오기 (0) | 2020.07.29 |
| jQuery - Login 할 때 duplication ID check (0) | 2020.07.29 |
| jQuery - inner_pade (0) | 2020.07.28 |
| jQuery - click,append,submit (0) | 2020.07.28 |