JSP_Jquery
목 차
1. Jquery 설치
2. jquery 사용
1. Jquery 설치
jquery는 javascript 기반으로 만들어진 언어?!이다
설치라기보다는 URL 연결 및 다운로드를 하여 로드 하면된다
jQuery 3.3.1 release notes 클릭을 하게 되면 아래와 같이 2개의 js 파일이 보일 것이다
1번은 가독성 좋게 코딩이 되어 있는 파일이고
2번은 1번을 경량화(띄어쓰기 줄바꿈등을 제거)한 파일이다
파일을 다운 받아서 프로젝트에 넣어도 되고, URL로 연결만 해도 된다
https://code.jquery.com/jquery-3.3.1.min.js 클릭을 하게 되면 아래와 같이 jquery가 정의된 javascript를 볼수 있는데
이것을 ctrl+s를 눌러 저장을 하면 다운로드가 완료 된다
다운로드 받은 jquery를 프로젝트에 추가 한다
html에서는 위와 같이 상황에 맞게 선언 하면 된다
2. jquery 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/aaa.css"/>
<style type="text/css">
/* 외부파일에서 만들었으면 확장자는 CSS */
P{
}
</style>
<!-- URL로 사용 할떄 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Download로 사용 할떄 -->
<!-- <script type="text/javascript" src="jquery-3.3.1.min.js"></script> -->
<script type="text/javascript">
//$(document).ready(function(){} //=> window.onload랑 똑같습니다
$(function() {// => $(document).ready(function(){ }를 줄여서 사용
console.log("ready....");
//모든걸 의미 h1,div,p 모든거 다
$("*").css({background:"red",color:"white"});
//var h1 = document.getElementById("h1"); 2개가 같은 의미
var h1 = $("h1");
console.log(h1);
// h1.text("<p>aaaa</p>");
//h1.innerText("");
h1.html("<p>aaaa</p>");
//h1.innerHtml("");
//클릭 이벤트 생성 방법1
// h1.click(function(){
// console.log("h1 click....");
// $(this).hide();
// });
//클릭 이벤트 생성 방법2
//동적으로 이벤트 부여가 가능
//click가 문자열이니 변수로 바꾸어서 가능
// h1.on("click",function(){
// console.log("h1 click....");
// $(this).hide();
// });
//클릭 이벤트 생성 방법3
h1.bind("click",function(){
console.log("h1 click....");
$(this).hide();
});
//jquery에서는 get/set이 따로 없다
//.text() => get, .text("aa") =>set
//매개변수가 없으면 get이고 매개변수에 값을 넣으면 set이다
//ID 값 set/get
//#name에서 #은 id를 의미 한다
//변경 대상이 id가 name인것이다
var name = $("#name");
name.bind("click",function(){
console.log("name click....");
name.css( "font-size", "+=2" );
});
//class에 값 set
//.a1에서 .은 class를 의미 한다
//변경 대상이 class가 a1인 것들이다
var a1 = $(".a1");
a1.text("javascript");
a1.css({color:"#666"});
a1.on("mouseenter",function(){
$(this).css({"font-size":"40px"});
}).on("mouseleave",function(){
$(this).css({"font-size":"20px"});
});
//튜닝 후
// a1.on("mouseover",function(){
// $(this).css({"font-size":"40px"});
// }).on("mouseout",function(){
// $(this).css({"font-size":"20px"});
// });
console.log(name.text());
//클래스 값 set/get
var a1 = $(".a1");
a1.text("javascript");
a1.css({color:"#666"});
//herf 링크 되지 않도록 break 하기
$("a").on("click",function () {
return false
});
});
</script>
</head>
<body>
<h1 class="aa" id="a1">a</h1>
<h1 class="ab" id="b1">b</h1>
<h1 class="bb" id="c1">c</h1>
<h1 class="bb" id="d1">d</h1>
<div id="name">kim</div>
<div class="a1">jquery1</div>
<p class="a1">jquery2</p>
<span class="a1">jquery3</span>
<p><a href="http://naver.com">naver</a></p>
</body>
</html>
id,class의 구분이 필요 하다
다음과 같이 태그가 작성 되었다고 보자
a
b
c
d
여기서 h1의 모든 텍스트를 변경 하려면
var h1 = $("h1");
h1.text("good");
이렇게 변경하면 a,b,c,d 모두 good으로 변경 될것이다
a,b만 good으로 변경 하고
c,d는 nice로 변경 하고 싶다면
var aa = $(".aa");
aa.text("good");
var bb= $(".bb");
bb.text("nice");
이런식으로 class를 기준으로 변경 하면 된다
a,bc,d를 다르게 다 주고 싶다면
var a1= $("#a1");
a1.text("good");
var b1= $("#b1");
b1.text("nice");
var c1= $("#c1");
c1.text("happy");
var d1= $("#d1");
d1.text("fun");
이렇게 id로 분류 하면 각각의 태그에 값을 다르게 넣어 줄수 있다
class는 그룹, id는 개인 이런식으로 생각 하면 될듯 하다