-개발환경-
| IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0) Tomcat : Tomcat v8.0 Server JQuery : jquery-3.6.0.min.js |
-설정-
|
설정에는 두가지 방법이 있는데 , |
-jquery01_시작.html-
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
//이미지 사이즈변경
function imgSize(){
//$('img').css('width','400px');//너비 높이중 하나만 지정할 경우, 나머지는 자동비율조정됨
//$('img').css('height','2000px');
//$('img').css({'width':'100px','height':'500px'}); //폭,높이를 한번에 이렇게도 사용가능
$('img').css({'width':'100px','height':'500px'}).css('opacity','0.5');
}
//필터링 메소드
function highLight(){
//document.getElementById('list').style.backgroundColor='tomato'; //javascript 표현식
$('#list').css('backgroundColor','tomato');//윗 js와 같은의미의 jquery 표현
//document.getElementsByTagName('li')[1].style.backgroundColor='chocolate';//javascript 표현식
//$('li').eq(1).css('backgroundColor','chocolate'); //윗 js와 같은의미의 jquery 표현
$('#list > li').slice(2,5).css('backgroundColor','chocolate');//인덱스 2부터 4까지
}
function addImg(){
//$('div').append( '<img src="./images/img03.jpg"/>' );
//$('div').prepend( '<img src="./images/img01.jpg"/>' );
//$('div').before( '<img src="./images/img01.jpg"/>' );
//$('div').after( '<img src="./images/img01.jpg"/>' );
$('div').append( '<img src="./images/img03.jpg"/>' );
$('div').prepend( '<img src="./images/img01.jpg"/>' );
$('div').before( '<img src="./images/img04.jpg"/>' );
$('div').after( '<img src="./images/img05.jpg"/>' );
}
function hideImg(){
/*
var imgs=document.getElementsByTagName('img');
for (var i=0;i<imgs.length;i++){
imgs[i].style.display= 'none';
} */ // javascript로 구현시
//$('img').first().css('display','none');
//$('img').first().hide();
//$('img').hide(); // 왼쪽위로 사라진다, 모든이미지 display : none
//$('img').hide(100); // 인자로 1000은 1초 ,즉 ms단위
//$('img').fadeOut(1000); // (투명도로)천천히 사라진다.
//$('div').slideUp(1000); // 위로사라짐
//$('img').hide(1000);
$('img').slideUp(1000);
}
function showImg(){
/*
var imgs=document.getElementsByTagName('img');
for (var i=0;i<imgs.length;i++){
imgs[i].style.display= 'block';
}*/ //javascript로 구현시
//$('img').first().show();
//$('img').show(); //이미지 전체보이기
//$('img').fadeIn(1000); // (투명도로) 천천히 현상된다.
$('img').slideDown(1000); // 핵심개념으로, hideImg 와 showImg는 태그를 맞춰줘야함.
}
function toggleImg(){
//$('img').toggle(1000); //단순토글
//$('img').fadeToggle(1000); //투명도 이용한 토글
$('div').slideToggle(1000); //슬라이드 토글
}
</script>
</head>
<body>
<h2>jQuery</h2>
<p>
<ul id="list">
<li>셀렉터 표현식</li>
<li>DOM 탐색 메소드</li>
<li>DOM 검색 메소드</li>
<li>이벤트 메소드</li>
<li>이펙트 메소드</li>
<li>AJAX 메소드</li>
<li>기타 등등</li>
</ul>
</p>
<p>
<button type="button" onclick="imgSize()">이미지 크기 변경</button>
<button type="button" onclick="highLight()">리스트 선택</button>
<button type="button" onclick="addImg()">이미지 추가</button>
<button type="button" onclick="hideImg()">이미지 숨기기</button>
<button type="button" onclick="showImg()">이미지 보이기</button>
<button type="button" onclick="toggleImg()">이미지 토글</button>
</p>
<div>
<img alt="피카츄" src="./images/img02.jpg"/>
</div>
</body>
</html>
|
cs |
-Description
16 : 두개의 css문장을 엮을수 있음. opacity= 투명도
22 : id 속성값이 list인 css 스타일을 변경하려는데 , 배경색을 토마토로 변경.
25 : eq(1)은 특정 태그들 중에서 인덱스가 1인 요소를 꺼내오라는 의미
27 : id 속성값이 list인 태그의 자식들중 li 태그를 모으는데 , slice(2,5) 로 인하여 [2,5) 인덱스에 속하는 태그들만
꺼내와서 배경색을 쵸콜릿으로 만듬
31~38 : jQuery 명령어로 태그의 추가가 이루어짐
57 : 슬라이드효과를 img 태그에서 1초동안 일어나게 하는 명령어
main GUI :
-요약-
Javascript와 JQuery 비교
id 속성에서 속성값으로 'id'를 가진 태그의 배경색을 'tomato'로 변경해보세요.
//javascript 작성법
//=> document.getElementById('id').style.backgroundColor='tomato';
//jquery 작성법 = > $('선택자').메소드()
//=> $('#id').css('backgroundColor','tomato');
페이지가 로드되자마자 무언갈 수행되게 해주는 onload(Javascript기준) 메소드 작성해보세요.
//javascript의 onload
//=> onload = function() {};
or
// => window.onload= function(){}; // window는 생략가능
//jquery의 onload
//=> $(document).ready(function() { });
or
//=>$(function() {}); //이와 같이 써도 됨
개념
JQuery
//태그의 추가 명령어
//선택된 태그의 내부에 추가
// .append() : 선택된 태그 내부의 마지막에 추가한다
// .prepend() : 선택된 태그 내부의 첫 번째에 추가한다.
//선택된 태그 외부의 윗 부분 or 아랫부분에 추가
// .before() : 선택된 태그 외부의 위쪽에 추가한다.
// .after() : 선택된 태그 외부의 아래쪽에 추가한다.
// 필터링 메소드
// .first() : 선택된 요소 중 첫 번째 요소를 선택한다.
// .last() : 선택된 요소 중 마지막 요소를 선택한다.
// .eq(index) : 선택된 요소 중 index 번째 요소를 선택한다.
// .slice() : 선택한 요소 중 전달받은 인덱스 범위에 해당하는 요소만 선택한다.
// .filter() : 선택된 요소 중 전달받은 선택자에 해당된거나, 함수 호출 결과가 참인 모든 요소를 선택한다.
// .not() : 선택된 요소 중 전달받은 선택자에 해당된거나, 함수 호출 결과가 거짓인 모든 요소를 선택한다.
// .has() : 선택된 요소 중 전달받은 선택자에 해당되는 요소의 모든 자손 요소를 선택한다.
// .is() : 선택된 요소 중 전달받은 선택자에 해당되는 요소가 하나라도 존재하면 true를 리턴한다.
// .map() : 선택한 요소 집합의 각 요소마다 콜백 함수를 실행하고 리턴값으로 구성된 객체를 리턴한다.
// 요소의 표시와 숨김
// .hide() : 선택한 요소의 css를 자동으로 조정해서 사라지게 한다.
// .show() : 선택한 요소의 css를 자동으로 조정해서 표시되게 한다.
// .toggle() : 선택한 요소의 css를 자동으로 조절해서 hide(), show() 메소드가 번갈아 적용된다.
// hide(), show() 메소드의 인수로 시간(밀리초)을 설정하거나 "slow", "fast"와 같은 예약어를 전달해 속도를 설정할 수 있다.
// 페이드 효과
// .fadeIn() : 선택한 요소의 css 중 opacity 속성의 값을 높여가며 나타나게 한다.
// .fadeOut() : 선택한 요소의 css 중 opacity 속성의 값을 줄여가며 사리지게 한다.
// .fadeToggle() : fadeIn(), fadeOut() 메소드가 번갈아 적용된다.
// fadeIn(), fadeOut() 메소드의 인수로 시간(밀리초)을 설정하거나 "slow", "fast"와 같은 예약어를 전달해 속도를 설정할 수 있다.
// 슬라이드 효과
// slideUp() : 선택한 요소의 css 중 height 속성의 값을 낮춰가며 사라지게 한다.
// slideDown() : 선택한 요소의 css 중 height 속성의 값을 높여가며 나타나게 한다.
// slideToggle() : slideUp(), slideDown() 메소드가 번갈아 적용된다.
// slideUp(), slideDown() 메소드의 인수로 시간(밀리초)을 설정하거나 "slow", "fast"와 같은 예약어를 전달해 속도를 설정할 수 있다.
-마침글-
단순문법공부는 boring하다..
인용
'21년이전 > 국비-JQuery+JAVA-SCRIPT' 카테고리의 다른 글
| Jquery-메뉴에 특수효과 주기 (0) | 2021.03.29 |
|---|---|
| Jquery-form연습3 (0) | 2021.03.29 |
| Jquery-속성선택자 (0) | 2021.03.25 |
| JQuery-선택자 (0) | 2021.03.25 |
