6일차_jQuery

Jquery

6일차_jQuery

알 수 없는 사용자 2015. 6. 22. 23:18

-------------------------------------------

jQuery

1. jQuery is a JavaScript Library.

2. 사용 용도

- HTML/DOM manipulation

- CSS manipulation

- HTML event methods

- Effects and animations

- AJAX

3. 사용 환경

- 아래 소스를 jQuery 사용 웹페이지에 삽입한 후 jQuery 사용.

- JSP 페이지 템플릿에 미리 등록할 것.

4. 기본 문법

selector를 이용해서 특정 객체를 찾은 다음 action() 에 지정한 내용을 실행하게 된다.

$(selector).action()

//JQuery01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

/* Javascript 버전 */

window.onload=function() {

alert("Hello, Javascript World!");

}

/* jQuery 버전 */

/* $(selector).action(액션내용) */

/* $(selector).event(function() { 액션내용 }) */

/* $(document) 는 HTML 도큐먼트를 객체로 접근하는 명령 */

/* ready() 는 이벤트 메소드로서 HTML 도큐먼트가 브라우저에

로드가 된 상태일 때 실행하게 될 내용(익명함수)을 등록할 수 있다. */

$(document).ready(function() {

alert("Hello, JQuery World!");

});

</script>

</head>

<body>

<div>

<p>jQuery 실행 테스트</p>

</div>

</body>

</html>

5. 도큐먼트 Ready 이벤트

- HTML 도큐먼트가 브라우저에 로드가 된 상태일 때 발생하는 이벤트

- jQuery에서 특정 객체를 접근하려면 메모리에 로드가 완료된 이후에만 가능하기 때문에 Ready 이벤트 후에 객체 접근이 시작된다.

예를 들어,

$(document).ready(function() {

특정객체.이벤트메소드(이벤트 액션);

});

- 다음과 같이 줄임 형태로 표기 가능하다.

$(function() {

특정객체.이벤트메소드(이벤트 액션);

});

6. jQuery 선택자

- 특정 객체를 찾기 위한 방법으로 선택자를 제공한다.

- element Selector : $("태그이름")

- 아이디 선택자 : $("#아이디명")

- 클래스 선택자 : $(".클래스명")

//특정 엘리먼트를 찾아서 내용을 감추거나 보여주는 기능 구현.

//JQuery02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

/* Javascript 버전 */

window.onload=function() {

document.getElementById("showBtn").onclick=function() {

var h1Nodes = document.getElementsByTagName("h1");

var h1Node = h1Nodes[0];

h1Node.style.display = "block";

};

document.getElementById("hideBtn").onclick=function() {

document.getElementsByTagName("h1")[0].style.display = "none";

};

}

/* jQuery 버전 */

$(document).ready(function() {

//특정 버튼에 click 이벤트를 등록하고 익명함수를 이용해서

//액션을 예약한다.

$("#showBtn").click(function() {

//element Selector를 이용해서 h1 태그를 객체로 접근한다.

//특정 객체에 대해서 보이기 기능 명령 실행

$("h1").show();

});

$("#hideBtn").click(function() {

//id Selector를 이용해서 id 속성이 result인 객체로 접근한다.

//특정 객체에 대해서 숨김 기능 명령 실행

$("#result").hide();

});

</script>

</head>

<body>

<div>

<form>

<input type="button" value="show"

id="showBtn">

<input type="button" value="hide"

id="hideBtn">

</form>

<h1>jQuery와 Javascript 비교 테스트</h1>

</div>

</body>

</html>

--------------------------------------------------

7. 기타 선택자

$("#Lastname") : 아이디 선택자. <태그 id="Lastname">

$(".intro") : 클래스 선택자. <태그 class="intro">

$(".intro, #Lastname") : 그룹 선택자. 두 개 이상의 선택자를 동시 선택.

$("h1") : 엘리먼트 선택자.

$("h1, p")

$("p:first") : 특정태그 중에서 첫 번째 태그 선택.

$("p:last")

$("tr:even") : 특정태그 중에서 짝수 번째 태그 선택.

$("tr:odd") : 특정태그 중에서 홀수 번째 태그 선택.

$("p:first-child")

$("p:first-of-type")

$("p:last-child")

$("p:last-of-type")

$("li:nth-child(1)") : 특정 태그 중에서 특정 번째 태그 선택.

$("li:nth-last-child(1)")

$("li:nth-of-type(2)")

$("li:nth-last-of-type(2)")

$("b:only-child")

$("h3:only-of-type")

$("div > p") : 자식 선택자

$("div p") : 자손 선택자.

$("ul + h3")

$("ul ~ table")

$("ul li:eq(0)") : 특정 태그가 특정 번째 존재하는 경우

$("ul li:gt(0)") : 특정 태그가 특정 번째보다 큰 경우

$("ul li:lt(2)") : 특정 태그가 특정 번째보다 작은 경우

$(":header")

$(":header:not(h1)")

$(":animated")

$(":focus")

$(":contains(Duck)")

$("div:has(p)")

$(":empty")

$(":parent") : 특정 태그의 부모 태그 선택.

$("p:hidden")

$("table:visible")

$(":root")

$("p:lang(it)")

$("[id]") : 속성 id=""가 있는 태그.

$("[id=my-Address]")

$("p[id!=my-Address]")

$("[id$=ess]")

$("[id|=my]")

$("[id^=L]")

$("[title~=beautiful]")

$("[id*=s]")

$(":input") : <input> 태그

$(":text") : <input type="text"> 태그

$(":password")

$(":radio")

$(":checkbox")

$(":submit")

$(":reset")

$(":button")

$(":image")

$(":file")

$(":enabled") : 활성된 상태의 태그

$(":disabled") : 비활성된 상태의 태그

$(":selected") : 선택된 상태의 태그

$(":checked") : 선택된 상태의 태그

$("*") : 모든 태그

-----------------------------------------------------

아이디, 패스워드 입력 폼 검사

//JQuery04.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

/* Javascript 버전 */

window.onload=function() {

document.getElementById("loginBtn").onclick=function() {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

var err = document.getElementById("err");

err.style.display = "none";

if (id.value == ""

|| pw.value == "") {

err.style.display = "inline";

return;

}

};

}

/* jQuery 버전 */

$(document).ready(function() {

$("#loginBtn").click(function() {

$("#err").hide();

if ($("#id").val() == "" || $("#pw").val() == "") {

$("#err").show();

return;

}

});

</script>

</head>

<body>

<div>

ID <input type="text" id="id">

PW <input type="password" id="pw">

</form>

</div>

</body>

</html>

-------------------------------------------------

8. 이벤트 메소드

- $(document).ready() : HTML 도큐먼트가 브라우저에 로드된 상황에 대한 이벤트. jQuery 에서 이벤트 처리는 ready() 이벤트 메소드 안에서 작성.

- click() : 특정 객체에 클릭 이벤트 발생.

- mouseenter() : 특정 객체에 마우스 포인터가 진입하는 이벤트 발생.

- mouseleave() : 특정 객체에 마우스 포인터가 벗어나는 이벤트 발생.

- hover() : 특정 객체에 마우스 포인터가 진입, 벗어나는 이벤트 발생.

예를 들어,

$("#p1").hover(function(){

alert("You entered p1!");

function(){

alert("Bye! You now leave p1!");

});

- focus() : 특정 객체에 포커스가 맞춰진 이벤트 발생.

- blur() : 특정 객체에 포커스가 벗어나는 이벤트 발생.

//JQuery06.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload=function() {

//ID, PW 항목에 대한 빈 항목 검사 과정 추가

document.getElementById("loginBtn").onclick=function() {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

var err = document.getElementById("err");

err.style.display = "none";

if (id.value=="" || pw.value=="") {

err.style.display = "inline";

}

};

$(document).ready(function() {

//ID, PW 항목에 대한 빈 항목 검사 과정 추가

$("#loginBtn").click(function() {

$("#err").css("display", "none");

if ($("#id").val() == ""

|| $("#pw").val() == "") {

//방법1

//$("#err").css("display", "inline").css("color", "red");

//방법2

$("#err").css({"display":"inline", "color":"red"});

}

});

</script>

</head>

<body>

<div>

<form>

ID <input type="text" id="id">

PW <input type="password" id="pw">

<br><span id="err">아이디 또는 패스워드를 채워야 합니다.</span>

</form>

</div>

</body>

</html>

9. jQuery 효과

- hide()/show() : 특정 객체를 화면상에서 감추거나, 보이게 하는 기능.

예를 들어,

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

- toggle() : 특정 객체를 화면 상에서 감추거나, 보이게 하는 기능을 반복.

- fadeIn()/fadeOut()

- slideDown()/slideUp()

10. Callback Functions

- 이벤트 발생시 실행하고자 하는 함수. 익명 함수로 처리한다.

예를 들어,

$(selector).hide(speed,callback);

//Jquery05.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

$(document).ready(function() {

$("button").click(function(){

/* 특정 객체에 대해서 hide 기능 실행 및 콜백 함수 실행 예정 */

$("p").hide("slow",function(){

alert("The paragraph is now hidden");

});

</script>

</head>

<body>

<div>

<p>Target</p>

</div>

</body>

</html>

11. 메소드 체인

- 특정 객체에 두 개 이상의 메소드를 연속 실행하도록 지정 가능.

메소드 체인이 가능한 이유는 메소드 실행 후 자기 자신의 객체를 반환하도록 되어있기 때문이다.

예를 들어,

특정객체.jQuery메소드1().jQuery메소드2().jQuery메소드3();

12. HTML DOM

- text(), html(), val() : 특정 엘리먼트가 가지고 있는 객체의 값을 읽거나, 쓸 수 있는 명령.

- 읽기의 경우

Javascript에서는 특정 객체의 값을 읽어낼 때 , innerText, innerHTML, value 속성을 이용한다.

<form>

이름 <input type="text" id="name">

</form>

위에 정의한 <input> 객체에 입력된 값을 읽어낼 때 아래와 같이 사용합니다.

document.getElementById("name").value;

jQuery에서는 아래와 같이 사용합니다.

$("#name").val();

- attr() : 특정 객체의 속성 값을 쓰거나, 읽는 명령.

특정객체.attr("속성명");

특정객체.attr("속성명", "값");

- 쓰기의 경우는 text(값), html(값), val(값) 형태로 사용한다.

자바스크립트에서는

document.getElementById("아이디").innerHTML = 값;

jQuery에서는

$("#아이디").html(값);

//Jquery06.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload=function() {

var okBtns = document.getElementsByTagName("button");

for (var i=0; i<okBtns.length; ++i) {

var okBtn = okBtns[i];

//alert(okBtn.innerText);

okBtn.onclick=function() {

if (this.innerText == "확인") {

this.innerText = "취소";

} else {

this.innerText = "확인";

}

};

}

};

$(document).ready(function() {

$("button").click(function() {

if ($(this).text() == "확인") {

$(this).text("취소");

} else {

$(this).text("확인");

}

});

</script>

</head>

<body>

<div>

<p>Target</p>

</div>

</body>

</html>

- attr() 메소드를 쓰기의 경우에서 사용하려면

특정객체.attr("속성이름", "값");

특정객체.attr({"속성이름":"값", "속성이름":"값", .... });

-------------------------------------------

문제) 기존 자바스크립트 코드를 jQuery 코드로 변경

<%@page import="com.test.*"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

StringBuilder sb = new StringBuilder();

RegionDAO dao = new RegionDAO();

for(Region r : dao.regionList()) {

sb.append("<tr>");

sb.append(String.format("<td>%s</td>", r.getRegionId()));

sb.append(String.format("<td>%s</td>", r.getRegionName()));

sb.append(String.format("<td><input type=\"button\" value=\"삭제\" class=\"btnDelete\" %s></td>"

, r.getDelCheck()==0 ? "" : "disabled=\"disabled\""));

sb.append("</tr>");

}

<!DOCTYPE html>

<html>

<head>

<title>직원 관리(JSP버전)</title>

//Javascript 버전

window.onload=function(){

document.getElementById("myForm").onsubmit=function(){

//데이터 검증 및 서브밋 액션 과정 추가

var errorMsg = document.getElementById("errorMsg");

var regionName = document.getElementById("regionName");

if(regionName.value==""){

errorMsg.innerHTML = "지역명을 입력하세요.";

return false;

}

return true;

};

var btnDeletes = document.getElementsByClassName("btnDelete");

//alert(btnDeletes.length);

for(var i=0; i<btnDeletes.length; i++){

var btnDelete = btnDeletes[i];

btnDelete.onclick=function(){

//alert("버튼클릭!");

var node = this; //<input> 객체

var pNode = node.parentNode; //<td> 객체

var ppNode = pNode.parentNode; //<tr> 객체

//alert(ppNode.nodeName); //<tr>이 나와야 성공!

var cNode = ppNode.firstChild; //<td> 객체

var text = cNode.firstChild.nodeValue; //지역번호

//삭제 여부 확인 과정 추가

if(confirm(text+"번 지역을 삭제할까요?")) {

//취소, 확인 버튼 나오는데 확인 눌러야 진행된다.

location.href="RegionDelete.jsp?regionId="+text;

}

};

}

};

//jQuery 버전

$(document).ready(function(){

//문제) 서브밋 액션 추가

$("#myForm").submit(function(){

if($("#regionName").val()==""){

alert("지역 이름을 입력하시오!");

return false;

}

return true;

});

//문제) 삭제 버튼 액션 추가

$(".btnDelete").click(function(){

var num = $(this).parent().parent().find("td:first").text();

if(confirm(num+"번 지역을 삭제할까요?")){

//location.href="RegionDelete.jsp?regionId="+num;

$(location).attr("href", "RegionDelete.jsp?regionId="+num);

}

});

</script>

</head>

<body>

<div>

<h1>직원관리 (JSP버전)</h1>

<c:import url="EmployeeMenu.jsp"></c:import>

</div>

지역명* <input type="text" name="regionName" id="regionName">

</form>

<tr>

</tr>

<%= sb.toString() %>

</table>

</div>

</body>

</html>

-----------------------------------------------------

저작자표시