JAVA 교육/Jquery
Jquery 사용법
- -
jQuery
10) javascript 의 for 문과 jQuery등의 each
▶each 반복문
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>javascript의 for문과 jquery등의 each</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css"/>
<style>
body,button {
font:20px "Noto Sans KR",sans-serif;
}
#displayList {
margin:20px;
width:400px;
height:300px;
background:#81D4FA;
padding:20px;
list-style: none;
}
</style>
</head>
<body>
<button id="startBtn">7단!</button>
<ul id="displayList"></ul>
</body>
</html>▶ 출력된 화면
▶ jQuery문
<script src="js/jquery.js"></script>
<script>
//each 반복문
$("#startBtn").click(function test(){
var dan=7;
for(i=1; i<=9; i++){
$("<li>").text(dan+"*"+i+"="+(dan*i)).appendTo("#displayList");
/*<li> 태그를 만들어라 text() 내용 displayList위치에 */
/*appendTo() 는 계속해서 추가 해 준다
-->appendTo()가 댓글 형태이다*/
}
});//click() end
</script>
▶jQuery문 추가 해서 7단형식이 ul칸에 li록이 생기게 추가해 준다
-- $("li") :id 가 li 인 태그를 찾아라
-- $("<li>") :<li>를 생성 만들어라
-- .text() :내용
-- .appendTo(): ("위치") 에
(버튼을 누를 때마다 text내용이 추가 된다)
appendTo() 는 나중에 만들 댓글 형태이다 
jQuery 의 each문
$("#startBtn").click(function test(){
var dan=7;
for(i=1; i<=9; i++){
$("<li>").text(dan+"*"+i+"="+(dan*i)).appendTo("#displayList");
}
$("li").each(function(){
var result=$(this).text();
alert(result);
})
});//click() end//->$.each(배열,function(){})
//->$.(배열).each.(,function(){})
▶ alert 화면 출력
11) this 연습
HTML
<!DOCTYPE html >
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>복습</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css"/>
<style>
.btn {
border:none;
color:#fff;
width:120px;
height:50px;
cursor: pointer;
font:100 24px 'Noto Sans KR',sans-serif;
}
.btn:hover {
font-weight: 900;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
dl {
width:300px;
height:200px;
border:1px solid #616161;
padding:10px;
margin: auto;
}
dt,dd {
margin:7px;
font-size:18px;
text-align: left;
color:#616161;
}
dt {
font-weight: 900;
font-size:22px;
text-align: center;
}
#color {
display: inline-block;
width:50px;
height:30px;
background:#999;
text-align: center;
}
#exBox {
width:400px;
height:300px;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
text-align: center;
padding:20px;
background: #fff;
position: fixed;
left:50%;
top:50%;
margin:-170px 0 0 -220px;
}
/*CSS추가*/
#pinkBtn {background: hotpink}
#blueBtn {background: blue}
#greenBtn {background: green}
</style>
</head>
<body>
<button id="openBtn" class="btn">버튼</button>
<div id="exBox">
<p>
<button id="pinkBtn" class="btn">멋진 핑크</button>
<button id="blueBtn" class="btn">쿨한 파랑</button>
<button id="greenBtn" class="btn">네온 녹색</button>
</p>
<dl>
<dt>클릭한 버튼정보</dt>
<dd>클릭한 버튼의 index : <span id="index">?</span></dd>
<dd>클릭한 버튼의 뒷배경색 : <span id="color">?</span></dd>
<dd>클릭한 버튼의 글자 : <span id="text">?</span></dd>
</dl>
</div><!--//exBtn -->
</body>
</html>▶ 출력된 화면
jQuery문
<script src="js/jquery.js"></script>
<script>
$("#exBox .btn").click(function(){
var idx=$(this).index();
//alert(idx);
$("#index").text(idx);
var color=$(this).css("background-color");
$("#color").text(color);
var txt=$(this).text();
$("#text").text(txt);
})
</script>▶ 출력된 화면
12) 요소의 탐색
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요소의 탐색</title>
<style type="text/css">
table {
border-collapse:collapse;
font:bold 50px Arial, Helvetica, sans-serif;
margin: auto;
}
table td {
padding:20px 35px;
}
</style>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
<body>
</html>▶ 출력된 화면
jquery를 넣으면
<script src="js/jquery.js"></script>
<script>
//DOM구조에서 원하는 요소까지 이동하고 찾아가는 것
$("td").eq(2)
.css("background","red")
.prev()
.css("background","yellow")
.parent() //첫번째 tr
.next() //두번째 tr
.children() //두번째 자손 td들 -> 4 5 6
.eq(1) //<td>5</td>
.css("background","blue");
</script>▶ 출력된 화면
13) 요소의 생성
요소를 생성하는이유
:댓글의 더보기등의 무한 스크롤링하기
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>요소의 생성</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css"/>
<style>
button {
border:none;
color:#fff;
padding:10px 18px;
cursor: pointer;
font:100 24px 'Noto Sans KR',sans-serif;
background:#00ACC1;
}
button:hover {
font-weight: 900;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
#box {
width:400px;
min-height:400px;
padding:30px;
background:#64B5F6;
font:500 20px "Noto Sans KR",sans-serif;
}
table {
border-collapse: collapse;
margin: 10px;
}
td {
border:1px solid #424242;
padding:10px 16px;
}
</style>
</head>
<body>
<p>
<button id="createBtn">테이블 생성</button>
</p>
<div id="box"></div>
</body>
</html>▶ 출력된 화면
jquery 를 넣어 주면
<script src="js/jquery.js"></script>
<script>
//요소를 생성하는 이유
//->댓글의 더보기등의 무한 스크롤링하기 위해
$("#createBtn").click(function(){
//1)
var table="";
table+="<table border = '1'>";
table+="<tr>";
table+=" <td>대한민국</td>";
table+="</tr>";
table+="</table>";
$("#box").text(table);//순수 문자열
$("#box").html(table);
//2)
var $table=$(<table></table>);
var $tr1 =$("<tr><td>사과</td><td>바나나</td></tr>");
var $tr2 =$("<tr>");
var $tr3 =$("<td>수박</td>");
var $tr4 =$("<td>").text("메론");
//$tr2 에 $ td3, $td4를 마지막에 자식으로 추가
$tr2.append($td3,$td4);
//$table 에 자식으로 추가
$table.prepend($tr2,$tr1);
$("#box").append($table);
});
</script>
//요소생성 및 추가
append(), appendTo() 요소를 끝에 추가
prepend(), prependTo() 요소를 앞에 추가
부모. append(자식)
자식.append(부모)
14) 자바스크립트 기반 오픈 소스
자바스크립트의 내장객체 Date() 의 복잡성을 단순, 다양하게 사용하기 위한 자바스크립트기반 오픈소스
자바스크립트 기반 오픈 소스
jquery.js
moment.js
bootstrap.js
angular.js
node.js
<script src="js/jquery.js"></script>
<script src="js/moment-with-locales.js"></script>
<script>
//자바스크립트의 내장객체 Date() 의 복잡성을
// 단순, 다양하게 사용하기 위한 자바스크립트기반 오픈소스
//JavaScript
/*
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var fullDate="";
fullDate+=year+"년"+month+"월"+date+"일";
fullDate+=hour+"년"+min+"분"+sec+"초";
$("#time").text(fullDate);
*/
//2)moment.js 오픈 소스 활용해서
var now=moment();//moment.js 라이브러리 시작
/*
alert(now.year());
alert(now.month());
alert(now.date());
*/
moment.locale("ko");//한글날짜 형식으로 지정
var fullDate=now.format("YYYY년MM월DD일 hh시 mm분 ss초");
$("#time").text(fullDate);
</script>
15) 아날로그 시계
HTML
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>15_아날로그시계.html</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<style>
#wrap {
width:600px;
height:600px;
position: fixed;
left:50%;
top:50%;
margin:-300px 0 0 -300px;
font-family: bon,sans-serif;
}
#wrap h1 {
height:80px;
font-size:50px;
text-align: center;
line-height: 80px;
font-weight: 700;
color:#424242;
}
#clock {
width:500px;
height:500px;
background:url(img/Clock-face.png);
background-size:100% 100%;
margin: auto;
position: relative;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<div id="wrap">
<h1><i class="fa fa-clock-o"></i> 시계</h1>
<div id="clock">
<div id="hour" class="hand"></div>
<div id="min" class="hand"></div>
<div id="sec" class="hand"></div>
</div>
</div>
</body>
</html>아날로그 시계
CSS 추가
/*1) CSS추가 시분초이미지가 출력되는 위치 지정*/
.hand{
width: 500px;
height: 500px;
position: absolute;
left: 0;
top: 0;
}
/*2) CSS 추가 시분초 이미지 출력*/
#hour{ background: url("img/hour_hand.png");}
#min{ background: url("img/minute_hand.png");}
#sec{ background: url("img/second_hand.png");}
jQuery 문
<script src="js/jquery.js"></script>
<script src="js/moment-with-locales.js"></script>
<script>
//최초 함수 호출
showTime();
function showTime(){
//alert(moment().year());
var now=moment();
var hour=now.hour();
var min=now.minute();
var sec=now.second();
//3) 초, 분, 시침 이미지 각도 꺽기
//한바퀴(360도)를 60번
$("#sec").css("transform","rotate("+(6*sec)+"deg)");
$("#min").css("transform","rotate("+(6*min)+"deg)");
//$("#hour").css("transform","rotate("+(30*hour)+"deg)");
$("#hour").css("transform","rotate("+(30*hour+0.5*min)+"deg)");
}//showTime() end
//4) 1초마다 주기적으로 함수 호충
setInterval(showTime,1000);
</script>16) 날짜 자동 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>16_날짜 자동생성</title>
</head>
<body>
<select id="year"></select>년
<select id="month"></select>월
<select id="date"></select>일
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/moment-with-locales.js"></script>
<script>
//날짜 데이터 자동 생성
//최초로 한수 한번만 호출
createYearMonth();
function createYearMonth(){
//1) 1월~12월 생성후 추가
for(m=1; m<=12; m++){
$("<option>").text(m).appendTo("#month");
}//for end
//2) 현재년도 -5년 현재년도 +5년까지 출력
var nowYear=moment().year();
for(y=nowYear-5;y<=nowYear+5;y++){
//3) 현재 년도를 미리 seleected
if(y==nowYear){
/*
$("<option>").text(y)
.attr("selected","selected")
.appendTo("#year");
*/
$("<option>").text(y)
.prop("selected",true)
.appendTo("#year");
}else{
$("<option>").text(y).appendTo("#year");
}//if end
}//for end
//4)'일' 생성하는 함수 호출
createDate();
}//createYearMonth() end
function createDate(){
//text() :일반적인 요소의 문자열값 얻어올때
//val() : <input> <select> <textarea>등의
// 폼과 관련된 값(컨트롤요소) 언더올때
//5) 기존 '일'' 출력된값 지우기
$("#date").empty();
//6)목록에서 사용자가 선택한 년도를 얻어옴
var year=$("#year").val();
//7) 목록에서 사용자가 선택한 월 얻어옴
var month=$("#month").val();
//8) endOf() : moment.js 에서 해당월의 마지막 일을 얻어옴
var endDay= moment(year+"-"+month).endOf("month").date();
//alert(endDay);
//9) '일 추가'
for(d=1;d<=endDay;d++){
$("<option>").text(d).appendTo("#date");
}
}//createDate() end
//10) 사용자가 년 월을 변경 했을때(이벤트발생)
// '일'을 바꾸는 함수를 호출
$("#year,#month").change(createDate);
</script>▶화면 출력
'JAVA 교육 > Jquery' 카테고리의 다른 글
| 2019/08/30 JQuery (0) | 2019.08.30 |
|---|
Contents
소중한 공감 감사합니다