jQuery
=> JavaScript 라이브러리
=> js 파일
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
작동하는지 확인
=> jQuery는 $로 시작함
=> jquery를 명시하지 않아 작동하지 않는다.
외부링크
내부링크
보통 외부, 내부 링크 둘다 명시해서 사용
document.ready 생략 가능
자바스크립트와 제이쿼리를 혼용해서 사용한다.
=> 두 버튼이 똑같이 작동한다.
이벤트
div 중 out 클래스에 적용
"p:first" / "p:last" 와 ("p").first() / ("p").last() 같다.
스크립트에 코드 추가
css
animate
animate와 css 차이
slide
slideUp() / slideDown() / slideToggle() / stop()
Toggle slide 클릭 => 열리고 닫히고
닫힐때 style="display:none;"으로 설정됨
열릴때 style="display:block;"으로 설정됨
[오늘의 공지사항] 클릭 => 천천히 열림
Stop sliding 클릭 => 열리고 닫히는게 멈춤
패널 영역 클릭 => 빠르게 닫힘
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue
jqueryui.com
문제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#remotecon { position: absolute; right: 10px; top: 10px;
width: 150px; height: 100px; border: 3px solid black; }
.remotetext { text-align: center; background: khaki; }
img { width: 30px; height: 30px; }
table { margin: auto; height: 80px; vertical-align: middle; }
.number { width: 50px; }
.number p { width: 50px; background: yellow; font-size: 20px; }
</style>
<script src="jquery-1.12.1-ui.js"></script>
<script src="jquery-3.5.1.min.js"></script>
<script>
size=100;
n=15;
$(function(){
$("#add").click(function(){
size+=30
n+=3
$("#text").css({"font-size":size+"%"})
$("#p").text(n)
})
$("#sub").click(function(){
size-=30
n-=3
$("#text").animate({"font-size":size+"%"})
$("#p").text(n)
})
})
</script>
</head>
<body>
<div id="remotecon">
<div class="remotetext">리 모 콘</div>
<div>
<table>
<tr>
<th><img id="add" src="resources/images/add.png"></th>
<th class="number"><p id="p">15</p></th>
<th><img id="sub" src="resources/images/sub.jpg"></th>
</tr>
</table>
</div>
</div>
<div id="text">
<h1>오늘의 소설</h1>
<h5>오늘도 덥다</h5>
<h5>내일도 덥다</h5>
<h5>모래는 바다 </h5>
</div>
</body>
</html>
'Java > 자바 기반 웹 개발자 과정 필기' 카테고리의 다른 글
| [200519.57일차] JSP 3 - cookie, session (0) | 2020.05.19 |
|---|---|
| [200518.56일차] JSP 2 (0) | 2020.05.18 |
| [200514.55일차] JSP 1 - 환경설정, 표현식, 선언문 등 (0) | 2020.05.14 |
| [200512.53일차] JavaScript 3 (0) | 2020.05.12 |
| [200511.52일차] JavaScript 2 (0) | 2020.05.11 |
| [200508.51일차] JavaScript 1 (0) | 2020.05.08 |
| [200507.50일차] CSS 3 (0) | 2020.05.07 |
