<최종 화면> Jquery는 javascript에서 속성 값으로 하던 것들을 메소드로 제어한다.
JQuery를 이용해서 DOM 요소를 제어 해보자.
<p>, <strong> 요소를 쓰자.
JQuery는 id를 이용해서 찾아서 속성값 대신 메소드로 처리한다.
text와 html의 차이는 요소의 인식이 다르다.
(text는 인식 못함, html은 인식함)
앵커 요소로도 확인해 보자.
입력 필드에 값을 읽고, 써보자. 우선 입력 필드 1개와 버튼 2개를 만들자.
이제 버튼을 눌렀을 때, 기능을 써보자.
요소의 속성 값을 가져오고, 변경해보자.
우선 이미지지와 버튼 1개를 만든다.
버튼을 눌렀을 때, src 속성 값을 읽어와서 값을 변경한다.
스타일도 마찬가지로 가능하다.
리스트를 만들어 보자.
버튼을 누르면, 첫 번째 li의 색을 없애고 다름 li에 색을 준다.
여러 스타일을 적용할때는 class속성으로 제어하자.
div에 d{내용}과 aaa{내용} 스타일이 적용된다.
이제 div에 class="d"만 하여, 버튼을 눌렀을 때 스타일을 적용 해보자.
버튼을 이용해서 요소를 추가, 삭제해보자
추가시 append는 뒤에, prepend는 앞에 추가된다.
before, after도 앞 뒤에 추가 되지만, 요소의 바깥쪽에 추가된다.
empty는 요소 안에 있는 것을 제거 , remove는 요소 자체를 제거하여 안에 있는 것까지도 당연히 제거 된다.
체크 박스를 만들고 선택된 것을 표시 해보자.
체크된 항목을 for문을 이용해 반복해서 표시 해보자.
for문을 사용할 경우 코드가 길어진다. each문을 사용하면 좀더 간결하다.
<복붙용 코드>
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- JQuery 추가 -->
</head>
<body>
<!-- DOM요소 제어 -->
<!-- Javascript에서 속성값으로 하던 것들을 모두 메소드로 처리함 -->
<!-- 주요 메소드 -->
<!-- 1) text(), html() : HTML요소에 텍스트 콘텐츠 읽기 -->
<p id="p1">이 요소의 text에는 <strong>스트롱 요소</strong>가 안에 존재합니다.</p>
<button id="btn1">text()읽기</button>
<button id="btn2">html()읽기</button>
<script>
$('#btn1').click(function(){
alert( $('#p1').text()); //text만 읽어옴
});
$('#btn2').click(function(){
alert( $('#p1').html()); //태그문도 읽어옴
});
</script>
<!-- 1.1) text(), html() : HTML요소에 텍스트 콘텐츠 쓰기 -->
<p id="p2">여기에 text 콘텐츠 작성하기</p>
<button id="btn3">text()쓰기</button>
<button id="btn4">html()쓰기</button>
<script>
$('#btn3').click(function(){
$('#p2').text('text() : 텍스트 추가<a href="">앵커 요소</a>를 쓰면?'); //text만 씀
});
$('#btn4').click(function(){
$('#p2').html('html() : 텍스트 추가<a href="">앵커 요소</a>를 쓰면?');
});
</script>
<hr>
<!-- 2) input요소의 값(value속성) 읽고 쓰기!! -->
<input type="text" id="in1" name="aa" value="Hello world!!">
<button id="btn5">입력필드 값 읽기</button>
<button id="btn6">입력필드 값 쓰기</button>
<script>
$('#btn5').on('click', function(){
alert( $('#in1').val() );
});
$('#btn6').on('click', function(){
$('input[name=aa]').val('nice to meet you.');
});
</script>
<hr>
<!-- 3) 요소의 속성(Attribute)값 읽고 쓰기 -->
<button id="btn7">속성값(attr)을 복사(읽고 쓰기)</button>
<img>
<script>
$('#btn7').on('click',function(){
//이 클릭 이벤트를 발동한 버튼 요소의 이전 요소를 찾아와서
//속성값 중 src 속성의 값을 읽어오기
var src=$(this).prev().attr('src');
// 이 버튼의 다음 요소(img)에서 src속성으로 위의 src변수 값 대입
$(this).next().attr('src',src);
$(this).next().attr('width',300);
$(this).next().attr('height',200);
});
</script>
<!-- 4) 요소의 스타일(css) 읽고 쓰기 -->
<ul class="list">
<li style="color: tomato;">aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<button>리스트의 스타일 이동</button>
<script>
//현재 스타일을 가진 li요소부터 찾아오기
$curr= $('ul.list > li:first');
//ul 다음에 있는 button요소에 이벤트 처리
//현재 스타일을 가진 li요소로 부터 color css값 얻어오기
$curr.css('color', color);
});
</script>
<hr>
<!-- 5) 여러 스타일을 동시에 줄때는 css()를 사용하는 것보다 class 속성을 통해 제어 -->
<style>
.d{
width: 300px;
height: 50px;
border: 1px dotted black;
padding: 10px;
}
.aaa{
background-color: yellow;
border: 2px solid red;
}
</style>
<!-- 클래스 속성 값이 2개 이상을 지정해도 됨 -->
<div class="d">여기는 div요소입니다.</div>
<button id="b8">add class</button>
<button id="b9">remove class</button>
<button id="b10">toggle class</button>
<script>
$('#b8').click(function(){
$('div.d').addClass('aaa');
});
$('#b9').click(function(){
$('div.d').removeClass('aaa');
});
$('#b10').click(function(){
$('div.d').toggleClass('aaa');
});
</script>
<hr>
<!-- 6) html요소 추가 및 제거 -->
<ul id="target" style="border: 1px dotted green;">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<!-- 6.1) 요소의 자식 추가하기 append(), prepend()-->
<button id="b11">append()</button>
<button id="b12">prepend()</button>
<script>
$('#b11').click(function(){ $('#target').append('<li>new</li>'); });
$('#b12').click(function(){ $('#target').prepend('<li>new</li>'); });
</script>
<!-- 6.2) 요소의 형제 추가하기 before(), after()-->
<button id="b13">before()</button>
<button id="b14">after()</button>
<script>
$('#b13').click(function(){ $('#target').before('<p>new<p>'); });
$('#b14').click(function(){ $('#target').after('<p>new<p>'); });
</script>
<!-- 6.3) 요소 삭제 : empty(), remove()-->
<button id="b15">empty()</button>
<button id="b16">remove()</button>
<script>
$('#b15').click(function(){ $('#target').empty(); }); //요소의 자식을 제거
$('#b16').click(function(){ $('#target').remove(); }); //요소 자체가 제거
</script>
<hr>
<!-- JQuery each 문법 -->
<div class="cbs">
<label><input type="checkbox" value="apple">apple</label>
<label><input type="checkbox" value="banana">banana</label>
<label><input type="checkbox" value="orange">orange</label>
<label><input type="checkbox" value="berry">berry</label>
<button id="b17">선택완료</button>
</div>
<h4 id="gg">여기에 선택된 항목들 표시</h4>
<script>
$('#b17').click(function(){
// check되어 있는 checkbox들 선택
// var cbs= $('div.cbs input[type= checkbox]:checked');
// var str="";
// for(var i=0; i<cbs.length; i++){
// str += cbs[i].value+", ";
// }
// $('#gg').html(str);
//jquery each 문법으로 좀더 쉽게 간결하게 [JS의 foreach() 메소드와 같은 능력]
var str="";
$('div.cbs input[type=checkbox]:checked').each( function(){
str +=$(this).val()+", ";
});
$('#gg').html(str);
});
</script>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > JQuery' 카테고리의 다른 글
| jquery에서 ajax 사용 메소드 [ get(), post(), ajax(), load() ] (0) | 2019.12.18 |
|---|---|
| ajax 이용 X 와 ajax 이용O 비교 (GET, POST 방식) (0) | 2019.12.18 |
| JQuery animate (이미지를 이동, 투명도, 크기 변경) (0) | 2019.12.18 |
| JQuery animation (이미지에 대해 다양한 효과) (0) | 2019.12.18 |
| jQuery 적용하기 (파일 다운로드, CDN 방식) (0) | 2019.12.18 |
댓글