■■■ jQuery(제이쿼리) ■■■
○ 개요
- jQuery 는 빠르고 간결한 Javascript Library
//-- javascript 로 할 수 있는 것은 모두 jQuery 로 가능 (그 반대도 동일)
- HTML Document traversing, 이벤트 처리, 애니메이션,
AJAX 를 단순화하여 빠른 웹 개발을 가능하게 한다.
//-- AJAX : javascript로 비동기 통신기반으로 일종의 기존의 기술을 묶어서 처리하는 개념
//-- 별도의 독립적이고 새로운 기술인 것은 아님
//-- XML, HTML, Https 들을 묶어서 사용하는 것..?
- CSS 규격 지원 : CSS 1~3 와 기본 XPath 지원.
- 다양한 브라우저 지원
- 경량 파일(약 90KB 수준의 파일크기)
- John Resig 에 의해 개발
○ jQuery 를 사용함으로써 얻을 수 있는 장점
- HTML 과 DOM, CSS 의 변경이 간편하다.
- 이벤트 처리가 간편하다.
- 애니메이션 같은 각종 효과를 적용하기 쉽다.
- AJAX, JSON 과 같은 처리가 간편하다
//-- XML : 구조화 된 데이터를 표현하는데 특화된 것
//-- JSON : XML 의 단점
// (실제 안에 들어있는 데이터 ex) 240(신발사이즈)일 때 다만 240 을 수식하는 ~의 신발사이즈 라고 하는 것이 용량을 더 차지함)를
// 좀 보완한 기술로 알아둘 것 (구조적인 표현을 잘해야 함)
<!--
과거에 클라이언트 입장에서(즉, 브라우저 상태에 따라서)
<!--
자바 스크립트 코드
//-->
자바스크립트가 돌아가는 브라우저 : 코드를 인식
자바스크립트가 호환되지 않는 브라우저 : html주석 처리 됨
-->
- 브라우저 호환성을 해결할 수 있다.
---------------------------------------------------------------------------------------------
○ jQuery 다운로드 및 라이브러리 포함
//-- 버전이 높을수록 고도화 된 것은 아니고,
//-- 필요한 기능이 어느 버전에 있느냐에 따라서 해당 버전을 사용하게 되는 것
//-- 소수점은 딱히 신경쓰지 않아도 되며, 사용한 것에 따라 x 점 대~ 사용 참조 같은 식으로 사용
- jQuery 다운로드 --// js 파일 을 다운로드 받는 것~
http://jquery.com/
- jQuery 를 사용하기 위한 라이브러리 포함
//-- 1번으로 사용하면 네트워크에 연결되지않아도 사용가능 (2번은 항상 네트워크 필요)
1. 로컬 PC 저장소에 물리적으로 존재할 때
(즉, 제이쿼리 파일을 다운로드 받은 경우,
특정 디렉터리 안에 들어있는 경우 그 경로까지 지정해 주어야 한다.)
<script type="text/javascript" src="jquery-x.x.x.js"></script>
2. CDN 으로 직접 경로 지정
<script type="text/javascript" src="http://code.jquery.com/jquery.x.x.x.js"></script>
- jQuery UI 를 사용하기 위한 CSS 및 라이브러리 포함.
//-- 클라이언트 파트(웹 브라우저)에서 보여지는 UI 를 쉽게 하도록
1.로컬 PC 저장소에 물리적으로 존재할 때
<link rel="stylesheet" href="jquery-ui.css"></link>
<script type="text/javascript" src="jquery-x.x.x.js"></script>
<script type="text/javascript" src="jquery-ui-x.x.x.custom.min.js"></script>
2.CDN 으로 직접 경로 지정
<link rel="stylesheet" href="http://code.jquery.com/x.x.x/base...css"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery....js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/...-ui.js"></script>
---------------------------------------------------------------------------------------------
○ jQuery 의 사용방법 (2가지)
1. http://jquery.com/ 에서 파일을 다운로드 하여 사용하는 방법
※ 다운로드 받을 수 있는 종류
- 『prodction』 버전
: 소스를 압축해서(불필요한 공백 및 개행 제거)
웹 서버에서 빠르게 실행할 수 있도록 경량화/최소화 한 버전
- 『development』 버전
: 테스트나 디버깅 또는 코드에 대한 분석을 위해
압축을 하지 않고 가독성을 높여 놓은 버전
(공백 및 개행 처리가 포함되어 있음)
2. CDN (Content Delivery Network) 을 통해 사용하는 방법
※ CDN : 웹 페이지를 실행할 때 마다 공개 서버에서 네트워크를 통해
jQuery 를 다운로드 받을 수 있도록 해주는 개념
별도의 파일을 다운로드 받을 필요 없이
『<script type="text/javascript" src="http://code.jquery.com/jquery-x.x.x.js"></script>』
와 같은 구문을 통해 참조하여 포함시키도록 처리한다.
---------------------------------------------------------------------------------------------
○ jQuery 참조 및 학습 사이트
- http://try.jquery.com/
- http://learn.jquery.com/
- http://www.w3schools.com/jquery/
※ jQuery 는 자바스크립트 라이브러리 일종이다.
『wirrte less, do more』를 통해 알 수 있듯이
기존 자바스크립트 문장을 더 적은 라인으로 줄일 수 있다.
또한, 라이브러리 자체도 가볍고 설치도 필요없이 사용할 수 있다.
---------------------------------------------------------------------------------------------
○ jQuery 의 대표적인 선택자 3가지
- 타입 선택자(요소 선택자 : 엘리먼트 선택자)
페이지 상의 모든 <p> 요소를 선택하고자 할 경우 다음과 같이 기술하면 된다.
『$("p")』
- 클래스 선택자
<p class="test"> 와 같이 클래스가 test 인 요소를 선택하고자 할 경우
다음과 같이 기술하면 된다.
『$(".test")』
- 아이디 선택자
<p id="test"> 와 같이 아이디가 test 인 요소를 선택하고자 할 경우
다음과 같이 기술하면 된다.
『$("#test")』
○ 그 외 선택자
- 『$("*")』
: 모든 요소를 선택한다.
- 『$(this)』
: 현재 요소를 선택한다. (이 선택자는 따옴표 없음에 유의할 것)
- 『$("div span")』
: <div> 요소 안에 있는 <span>요소를 선택한다.
- 『$("p.test")』
: <p> 요소 중에서 test 클래스인 요소를 선택한다.
- 『$("p:first")』
: 첫 번째 <p> 요소를 선택한다.
- 『$("ul li:first")』
: 첫 번째 <ul>에서 첫 번째 <li> 요소를 선택한다.
- 『$("ul li:first-child")』
: 모든 <ul>에서 첫 번째 <li> 요소를 선택한다.
- 『$("[href]")』
: href 속성을 가진 모든 요소들을 선택한다.
- 『$("a[target='_blank']")』
: 모든 <a> 요소들 중 target 속성에서 _blank 값을 가진 것들을 선택한다.
- 『$("a[target!='_blank']")』
: 위와 반대로 _blank 값이 없는 것들을 선택한다.
- 『$(":button")』
: 모든 <button> 요소와 모든 <input type="button"> 을 선택한다.
- 『$("tr:even")』
: 모든 짝수 <tr> 요소를 선택한다.
- 『$("tr:odd")』
: 모든 홀수 <tr> 요소를 선택한다.
- 『$("ul > li")』
: <ul> 요소에서 직계 자손인 <li> 요소만 선택한다.
(다중 리스트 구조로 되어 있을 때...)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest01.html</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--
가장 범용적으로 사용되는 라이브러리 CDN 방식 주소
주소를 직접 브라우저 주소창에 검색했을 때, 소스가 나오지 않는다면 직접 다운받아서 입력해야함
-->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--
해당 구문 입력 전 까지는 jQuery 사용 불가능
별도의 script 단을 구성하여 작성을 해야한다
위의 script 단 (문 번호 11번) 은 이미 자체로 완전하며 끝난 구문이다.
사이에 비어보이는 곳에 해당 주소의 소스코드가 들어가게 되는 것
-->
<script type="text/javascript">
// 관찰
// anonymous function 익명함수
$(function()
{
var d=300;
// 메소드 내부에서 다시 익명함수 정의 가능
$("#navigation a").each(function()
{
$(this).stop().animate({"marginTop":"-80px"}, d+=150);
});
$("#navigation > li").hover(function()
{
$("a", $(this)).stop().animate({"marginTop":"-2px"},10);
}
, function()
{
$("a", $(this)).stop().animate({"marginTop":"-80px"},900);
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<ul id="navigation">
<li class="home"><a href="#"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About</span></a></li>
<li class="search"><a href="#"><span>Search</span></a></li>
<li class="podcasts"><a href="#"><span>Podcasts</span></a></li>
<li class="rssfeed"><a href="#"><span>Rss Feed</span></a></li>
<li class="photos"><a href="#"><span>Photos</span></a></li>
<li class="contact"><a href="#"><span>Contact</span></a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
JQTest02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest02.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
.item
{
border : solid 2px red;
color : white;
background : black;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
/*
function test()
{
alert("함수 호출 확인");
}
*/
//jQuery 기본함수
//jquery();
//jquery(document).ready(); //-- 위와 동일한 구문
//-- jquery 라는 말이 반복 -> 줄여서 $ 로 씀
//$(document).ready(); //-- (document).ready 도 기본적으로 사용되기 때문에 생략되게 함
//$();
//-- javascript 엔진에 의해서 해당 페이지가 요청되면 바로 탑재됨
/*
//-- 호출하지 않고 기능하게만 하기 위해서 이름 없는 함수 정의
$(document).ready(function()
{
alert("함수 호출 확인");
// ※ 우리가.. 도는 이 페이지를 이용하는 사용자가
// 뭔가 건드리지 않아도(특별한 이벤트를 발생시키지 않아도)
// 자동으로 처리할 수 있는 영역 구성
});
*/
/*
$(function()
{
alert("함수 호출 확인");
// ※ 우리가.. 도는 이 페이지를 이용하는 사용자가
// 뭔가 건드리지 않아도(특별한 이벤트를 발생시키지 않아도)
// 자동으로 처리할 수 있는 영역 구성
});
*/
$(function()
{
/*
//alert("함수 호출 확인");
//$("h1").click(h1이 클릭되었을 때 수행되어야 할 기능, 동작, 행위);
// ↓
//$("h1").click(h1이 클릭되었을 호출되어야 할 함수 정의);
// ↓
//$("h1").click(이름이 필요없는 함수 정의);
// 이전과는 달리 원격지에서 행동 -> ~ 하겠다 하는 것
$("h1").click(function()
{
//alert("돈 땃쥐 미!");
//alert($(this).html());
// ------- 선택된 해당 객체 -> 즉, 클릭된 h1 태그 객체의 html 을 반환
//$(this).html("어떻게 될까요?");
// 선택된 해당 객체의 글이 () 괄호 안의 내용으로 변경 됨
$(this).html("★"+$(this).html()+"★");
// 클릭을 하면 할수록 별의 갯수가 늘어감
});
*/
/*
//$("h1").on("click", 기능);
$("h1").on("click", function()
{
//alert("클릭");
//alert($(this).html());
$(this).html($(this).html()+"굿");
});
*/
//$("h1").one("click", 기능);
//$("h1").one("click", 함수정의);
//$("h1").one("click", 함수호출);
// 기능 부분에 함수 정의뿐 아니라, 함수호출도 가능
/*
$("h1").one("click", function() // 한 번만 실행
{
//alert("클릭");
//alert($(this).html());
//$(this).html(기능);
$(this).html(function(index, html)
{
//alert(html);
//alert(index);
return html + "★";
});
});
*/
// javascript 에서 다중 속성을 표기할 때
// {속성명:속성값, 속성명:속성값, 속성명:속성값, ...} <- JSON 표기법
//$("h1").on({이벤트1:기능1, 이벤트2:기능2, ...});
/*
$("h1").on(
{
이벤트1:기능1, 이벤트2:기능2
});
*/
/*
$("h1").on(
{
// mouseenter : 어찌하겠다. → 마우스 커서 진입할 때
// mouseleave : 저찌하겠다. → 마우스 커서 빠져나올 때 (떠날 때)
mouseenter:function() {기능구현내용;}
, mouseleave:function() {기능구현내용;}
});
*/
/*
$("h1").on(
{
mouseenter:function() {$(this).addClass("item");}
, mouseleave:function() {$(this).removeClass("item");}
});
*/
/*
$("h1").on(
{
mouseenter:function()
{
$(this).addClass("item");
}
, mouseleave:function()
{
$(this).removeClass("item");
}
});
*/
// hover는 mouseenter, mouseleave 를 둘다 포함하는 기능
// $("h1").hover(기능);
/*
$("h1").hover(function()
{
$(this).addClass("item");
});
*/
$("h1").hover(function()
{
$(this).addClass("item");
}
, function()
{
$(this).removeClass("item");
});
});
</script>
</head>
<body>
<!-- <h1 onclick="test()">이름</h1> -->
<h1>이름</h1>
<h1>땃쥐</h1>
<h1>콩쥐</h1>
<h1>팥쥐</h1>
</body>
</html>
JQTest03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest03.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
div
{
margin: 5px;
padding: 3px;
border: 3px solid black;
border-radius: 10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
// alert("확인"); //-- 실행 안 됨
// $(); //-- 아래와 동일
// 아래 내용이 렌더링 되기 전에 먼저 해당 함수가 먼저 뜨는 것 관찰
// ready 가 되면 해당 함수를 운용해라~
$(document).ready(function()
{
//alert("확인");
// 자바스크립트에 의해 호출 된 것 -- 우리가 호출한 것이 X
//$("div").click(기능);
$("div").click(function()
{
//alert("확인");
//alert($(this).html()); //-- div 내에 여러 개가 있을 경우 태그 까지 전부 다 확인 됨..
//alert($(this).text()); //-- div 내에 여러 개가 있을 경우 태그 제외 후 모든 내용 확인 됨..
//alert($("h1").text()); //-- div 태그 내의 모든 h1 태그 내용들 전부 확인 됨
//alert($("p").text()); //-- div 태그 내의 모든 p 태그 내용들 전부 확인 됨
//alert($("h1", this).text()); //-- 선택된 div태그 내의 h1 태그 내용 확인 됨
//alert($("p",this).text()); //-- 선택된 div태그 내의 p 태그 내용 확인 됨
var h1 = $("h1", this).text();
var p = $("p", this).text();
alert(h1+"/"+p); //-- A강의실/JAVA 수업 중
});
});
</script>
</head>
<body>
<div>
<h1>A강의실</h1>
<p>JAVA 수업 중</p>
</div>
<div>
<h1>B강의실</h1>
<p>JQUERY 수업 중</p>
</div>
<div>
<h1>C강의실</h1>
<p>ORACLE 수업 중</p>
</div>
<div>
<h1>D강의실</h1>
<p>ASP 수업 중</p>
</div>
<div>
<h1>E강의실</h1>
<p>JSP 수업 중</p>
</div>
<div>
<h1>F강의실</h1>
<p>PHP 수업 중</p>
</div>
</body>
</html>
