1. jQuery 기본
jQuery 래퍼
// HTML조각 묶기
$(“<P>What’s cooking?</P>”);
// 조각을 도큐먼트 끝에 추가
$(“<P>What’s cooking?</P>”).appendTo(“body”);
//도큐먼트내의 모든 <div>요소를 조작하기 위한 래핑
$(“div”)
// someId란 id를 가진 DOM요소를 래핑
$(“#someId”)
// someClass란 이름을 가진 CSS를 처리하기 위해 타입과 상관없이 모든 요소를 래핑한다.
$(“.someClass”)
jQuery 연산을 연결하기
// id가 somdting인 요소에 CSS를 추가하고 보여준다.
$(‘#something’).addClass(‘someClass’);
$(‘#something’).show();
è $(‘#something’).addClass(‘someClass’).show();
// onload보다 먼저 실행됨
$(document).ready(function);
è $(function);
jQuery 와 Prototype을 함께 사용하기
// $전역이름을 JQuery라이브러기가 로드된 이후 Prototype로 되돌리기
jQuery.noConflict()
// Prototype과 함께 사용할 때 별칭을 선언하여 사용 권고
var $j = jQuery;
이벤트 처리
다운로드 : http://docs.jquery.com/Downloading_jQuery 이곳에서 최신버젼(1.2.6)을 다운로드 받아 소스에 추가한다.
1. HMTL로드시 수행하는 코드
(1)자바스크립트
window.onload = function(){
alert("시작");
}
(2)jQuery
$(document).ready(function(){
alert("시작");
});
2. 객체 클릭시 이벤트 발생(a태그를 클릭했을시 해당 스크립트가 동작한다.)
(1)자바스크립트
<html>
<head>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
window.onload = setObjects;
function setObjects(){
var aTag = document.getElementsByTagName("a")[0];
aTag.onclick = function(){
alert("welcome");
//이벤트 발생을 막는 부분이다.
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
//이벤트 발생 막는 부분 끝
}
}
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
(2)jQuery
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting");
event.preventdefault();
//event는 해당 태그의 이벤트를 넘겨받고 preventdefault()를 적용하면 해당이벤트는 동작하지 않는다.
//고로 링크된 페이지로 이동하지 않는다.
});
});
CSS의 제거.
<html>
<head>
<style type="text/css">
a.test{
font-weight : bold;
}
</style>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").addClass("test"); //a태그에 class로써 test를 추가한다.
$("a").removeClass("test"); //a태그에 class test를 제거한다. (우선 이줄을 제거한 상태에서 실행시켜보자)
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
[출처] 2. jQuery기초(2) (자바를 통하여 세계로) |작성자 세피룸
글자가 천천히 사라지는 효과
<html>
<head>
<style type="text/css">
a.test{
font-weight : bold;
}
</style>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault(); //이벤트 발생을 막는다(링크페이지로 이동안함)
$(this).hide("slow"); //this현재 이벤트가 발생한 객체를 받는다.
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
*********************************************************************************************
<input type="text" size="10"/> 이런식으로 태그를 추가하고 $("a")를 $("input")으로 변경 후 해보자!!
The Magic of jQuery
<html>
<head>
<style type="text/css">
a.test{
font-weight : bold;
}
</style>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
$("a").addClass("test").show().html("foo"); //show()메소드는 a태그를 보여준다. 아래코드에서 class명이 hideme인 a태그를 하나더 추가해보고 테스트 해보면 알 수 있다.
$("a")
.filter(".clickme") //a태그의 class명이 clickme인 것만을 걸러낸다.
.click(function(){
alert("You are now leaving the site.");
})
.end() //첫번째 마법의 끝을 알린다.
.filter(".hideme") //a태그의 class명이 clickme인 것만을 걸러낸다.
.click(function(){
$(this).hide(); //이벤트가 발생한 객체를 숨긴다. (아까 했던 slow를 인자로 주면 천천히 사라진다.)
return false; //링크이벤트를 취소한다.
})
.end();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a><br/>
<a href="http://google.com/" class="clickme">I give a message when you leave</a><br/>
<a href="http://yahoo.com/" class="hideme">Click me to hide!</a><br/>
<a href="http://microsoft.com">I'm a normal link</a>
</body>
</html>
jQuery 1 - Introduction
2008/12/06 21:44
Posted by 필소굿 Posted in " 인터넷&블로그/jQuery "
설치형 Textcube의 새 티켓 "Dojo를 jQuery로 대체하기"와 관련하여 자바스크립트를 좀 더 활용하기 위해 jQuery를 배워보기로 하고, 결과물들을 정리해 봅니다. 오늘은 첫 날이므로 jQuery에 대한 간단한 소개, 간단한 스크립트를 소개하겠습니다(아주 아주 기초적인. 저도 잘 모르기 때문에.).
jQuery 한 줄 소개
jQuery는 자바스크립트/Ajax 프레임웍이며 자체가 한 파일로 이루어져 가벼우며 다수의 플러그인을 사용할 수 있어 확장성도 뛰어나다. 현재 1.2.6버전까지 개발되어 있고 워드프레스에서 적용하고 있으며 prototype에 비해 구문이 쉽고 속도가 빠른 편이라 최근에 각광받고 있다.
jQuery 참고 사이트
- The Write Less, Do More - jQuery
- jQuery Documentation
- Visual jQuery(jQuery 객체 소개)
- jQuery - 위키백과
- jQuery로 Ajax 개발을 단순화 하기
- What is jQuery?
- 개발새발 :: 내가 Prototype에서 jQuery로 옮긴 이유
- [jQuery] jQuery 간단한 소개 및 prototype, yui와 간단 비교
- jQuery - New Wave Javascript
- zbum blog
- jQuery 관련 사이트 모음
jQuery 첫 만남
지금까지 간단히만 자바스크립트를 뚝딱거리다가(팝업 윈도를 만든다거나 책에 있는 Ajax 예제를 그대로 옮겨 쓰면서 class명과 id만 겨우 바꾸는 수준) 제대로 프레임웍을 다뤄 보게 되었습니다. 아직 교재도 없지만서도 jQuery.com의 영문 도큐먼트를 하나씩 천천히 읽어가며 다뤄보겠습니다.
jQuery를 시작하기 위해서는 다른 스크립트와 마찬가지로 html 문서 첫부분에 jQuery.js를 임포트하여야 합니다. js 파일을 해당 서버에 저장할 수도 있겠지만, jQuery.com의 js 파일을 로드해 봅니다.
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
레퍼런스에 의하면 모든 개체들이 로드되고 난 다음에 스크립트를 적용하기 위해 jQuery에서는 'ready event'를 지정하여, 완전히 로드가 된 후 부터 프로그램을 시작합니다.
$(document).ready(function() {
// do stuff when DOM is ready
});
Selector(선택 지시자)
DOM(Document Object Model)에 의하면 모든 태그와 각 태그의 class, id 속성 등으로 접근하려면 일반적인 환경에서는 getElementById 또는 getElementsByTagName 등으로 접근했는데, jQuery에서는 쉽게 $(" ") 형태로 접근합니다.
- 태그 - $("a"), $("div"), $("p") 등
- 클래스 - $(".class"), $("p.class")
- ID - $("#id"), $("div#id")
- 중첩 구조의 표현 - $("#orderedlist").find("li") = $("#orderedlist li")
- 지시자 확실히 알기 - Codylindley.com(추천)
간단히, 이 문단을 클릭해 보면 메시지가 뜨는 예제를 소개하겠습니다.
$(document).ready(function() {
$("p.select").click(function() {
alert("Hello world!");
});
});
ready 이벤트로 문서를 모두 로드한 뒤, p(문단) 중에서 class가 select인 문단을 click하여 { } 사이에 있는 구문(경고창 실행)이 실행되는 구조입니다. 변수를 하나 잡고, 글자가 날까 말까 조마조마하며 썼던 getElementsBy~ 보다 훨씬 간편한 느낌입니다. 이런 접근법으로 지정한 부분의 내용을 추가하거나 CSS를 변경하는 예제입니다.
$(document).ready(function() {
$("#orderedlist").find("li").each(function() {
$(this).append( " BAM! ");
$(this).css("background", "#c3e1a7");
});
});
- one BAM!
- two BAM!
id가 orderedlist인 레이어의 li 태그css에 의해 배경색을 바꾸고, append에 의해 내용을 추가하고 있습니다.
다음은 토글 클릭으로 내용이 보였다 숨는 예제입니다.
$("#sh").toggle(function(){
$(".stuff").hide('slow');
},function(){
$(".stuff").show('slow');
});
click me
opened
위 예제는 다양하게 많이 사용되고 있지요? 간단한 조작으로 좀 더 효과적인 레이어 이동 효과를 줄 수 있네요. 더 많은 효과(페이드, 애니메이션 등)를 위해 jQuery.com의 API > Effect 절을 참고하세요. 다음에 소개할 때에는 좀 더 jQuery의 핵심과 관련있는 내용을 더 찾아보겠습니다. 기다려주세요-:)
jQuery/Core란?
jQuery/Core란 jQuery의 핵심이 되는 것을 의미한다. 그만큼 우리가 jQuery를 사용할 때 많이 사용되는 부분이기도 하다.
하지만 Core라고해서 어려울것은 없고, 의외로 간단하다. Core를 표현하면 "$()"이렇게 된다.
참고로,
jQuery를 표현할 때 두가지가 있는데 한가지는 "jQuery(document).ready()" 이렇게 "jQuery"를 사용하는 방법과 "$(document).ready()" 처럼 "$"로 사용하는 방법이 있다. 이것은 사용자 취향에 맞게 선택해서 사용하면 된다.
정확한 개념을 알고 싶으신 분은 http://docs.jquery.com/Core 여기로 가시면 자세히 알 수가 있다. 하지만 저 처럼 영어에
약하신 분들은 이렇게 이해를 하시면 된다.
그럼 이제 사용법에 대해서 한번 살펴 봅시다.
jQuery 사용법
여기서 사용되는 예제나 API는 http://docs.jquery.com/ jQuery공식 사이트에서 발췌한 것임을 미리 말씀드리고 시작합니다.
1. jQuery( expression, context )
: expression는 String로 표현되고 특정 태그를 찾을때 사용되며, context는 Element나 jQuery으로 인자 값으로 받는다.
즉, $("input:radio", document.forms[0]); 이와 같이 사용된다.
2. jQuery( html )
: jQuery는 인자값으로 html 태그를 받아 그 태그를 HTML페이지에 추가를 할 수가 있다.
즉, 이렇게 $("<div><p>Hello</p></div>").appendTo("body") 사용이 되기도 하고, $("<input/>").attr("type", "checkbox");
이렇게도 사용되기도 한다.
풀이 하자면 첫 번째는 "body"안에 "<div><p>Hello</p></div>"를 삽입(appendTo()는 특정 태그에 사입할 때 사용 )한다는
애기고 두번째는 "input"를 생성하되 "type=checkbox"로 하여 태그를 생성하게 된다. 두번째는 HTML 마지막 부분에 삽입이
된다.
3. jQuery( elements )
: DOM element(s) 를 인자로 받아 그 지역의 elements를 설정할 수가 있다.(한개 혹은 다수를 지정할 수가 있다.)
$(document.body).css( "background", "black" ); -> HTML 배경색을 검정색으로 바꾼다.
$(myForm.elements).hide() -> myForm의 이름을 가진 form안의 elements을 숨긴다.
4. jQuery( callback )
: 이것은 인자값을 함수로 지정을 할 수가 있다는 애기로 jQuery를 처음 시작하는 부분에서 많이 접해 봤을 것이다.
즉, "$(document).ready(function(){....};)" 이 부분
이렇게 사용하는 것은 특정 이벤트가 발생할 때 그 부분을 함수로 처리 하기 위해서 이다. 예를 들어 마우스를 클릭시
경고창을 띄워주고 싶다면 아래와 같이 하면 된다.
"$(document).click(function(){
alert("마우스가 눌려짐!!");
};)"
- jQuery Object Accessors
이번에는 직접 오브젝트를 엑세스할 수 있는 jQuery에 대해서 알아 본다. 뭐, jQuery 홈페이지에 가면 다 나와 있는 것들이긴 하지만 그래도 본좌의 나름 해석판을 듣고 싶다면 계속 봐도 된다. 다만, 본좌도 영어가 짧기 때문에 직접 실행해 봐서 이해 하기도 한 부분도 있고 이리저리 찾아 다니면서 알아낸 것 들도 있다. 그래서 영어 잘하시는 분 들이 봤을 경우 영 아니다 싶으면 자세히 답변을 남겨 주시면 참고하여 수정토록 하겠음...
그럼 오브젝트를 엑세스 할 수 있는 jQuery 에 대해서 알아 봅시다.
1. each( callback )
: 해당 오브젝트에서 어떤 함수처리를 하고 싶을 경우 사용된다. 코드를 직접 보면 이해가 쉽게 된다.
$(document.body).click(function() {
$("div").each(function (i) {
// 클릭 이벤트가 발생 되었을 경우 "div"태그에서만 글 색상을 변경하도록 한다.
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
이 코드를 실행 시키면 클릭 할때마다 색깔이 변경이 된다. 참고로 이 코드는 "body"안의 모든"div"태그를 뜻한다. 특정 "div"
에서만 이벤트가 발생되기를 원하시면 그 태그의 인덱스를 찾아야 할 것이다.
2. size()
: 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다.
$(document.body).click(function () {
$(document.body).append($("<div>"));
var n = $("div").size();
$("span").text("There are " + n + " divs." +
"Click to add more.");
}).click(); // trigger the click to start
3. length()
: 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다. size()와 동일하다.
$(document.body).click(function () {
$(document.body).append($("<div>"));
var n = $("div").length;
$("span").text("There are " + n + " divs." +
"Click to add more.");
}).trigger('click'); // trigger the click to start
4. eq( position )
: 해당 포지션에 위차한 태그를 찾는다. 한마디로 아파트로 비교하자면 몇호실을 찾는지와 같다. "405호실를 청소해라!"라는
명령이 있다면 그 아파트의 "405호실"을 찾아가서 거기만 청소를 하면 된다. 구지 다른곳도 청소할 필요가 없다는 것이다.
position의 위치는 0 부터 시작해서 -1까지다.
$("p").eq(1).css("color", "red"); // "p"태그에서 1(0 부터 시작하므로 두번째를 의미한다.)번지에 해당하는 "p"를 변경한다.
5. get()
: 해당 태그의 Elements 들을 Array형태로 리턴한다. 즉, '$("div").get() 하면 모든 div태그 들을 Array 형태로 리턴한다.'
한마디로 하면 DOM의 Elements를 배열로 리턴하는 것이다.
function disp(divs) {
var a = [];
for (var i = 0; i < divs.length; i++) {
a.push(divs[i].innerHTML);
}
$("span").text(a.join(" "));
}
disp( $("div").get().reverse() ); // div태그의 값들을 읽어 와서 그 값의 순서를 뒤집는다.
// 예를 들어
// <div>1</div><div>2</div><div>3</div> 이 있으면 reverse() 하면 3, 2, 1로 순서가 뒤집히게 된다.
6. get( index )
: index에 해당되는 위치의 element을 가져온다. 즉, 단일 element를 가져 오게 되는 것이다.
$("*", document.body).click(function (e) { // body안의 모든 Elements에서 클릭 이벤트가 발생되면.
e.stopPropagation();
var domEl = $(this).get(0); // 클릭된 태그의 Elements중 0번지에 해당하는 Element를 가져온다.
$("span:first").text("Clicked on - " + domEl.tagName); // 0번지의 태그이름을 출력한다.
});
이해하는데에는 어렵지 않을 것이다. 프로그래밍을 하다보면 위와 비슷한 함수를 많이 접해 보기 때문이다.
7. index( subject )
: subject의 인덱스 번호를 찾는다. 인덱스 번호도 0부터 시작된다.
$("div").click(function () {
// this is the dom element clicked
var index = $("div").index(this); // "div"태그에서 클릭이벤트가 발생 될경우 그 "div"태그의 인덱스 찾아서 리턴한다.
$("span").text("That was div index #" + index);
});
jQuery/Core에 대해서는 여기서 마무를 하겠다. 이 외에도 Data Cash, Plugins에 대한 것도 있지만 아직은 다루지 않겠다.
시간이 짬짬이 날때 마다 글을 남기곤 있지만 회사 일도 바쁘다 보니 쉽게 글을 쓰지 못하는 것도 없지 않아 있다.
이 글을 쓰면서 예제 코드도 함께 올리려고 했는데 너무 도둑놈이 되는것 같아서 간단하게만 소개만 하였다. 뭐 본좌 나름대로
예제소스를 만들어 올리면 되지만...... 그렇게 하려면 시간이 많이 소모가 되고.... 잘못하다가는 회사에서 짤릴까봐 안했음..^^
다음은 Selector에 대해서 알아 볼 것이다. 나의 허접강의는 계속 된다..쭈욱~~~ ^^b
[출처] 4. jQuery 기초(4) jQuery의 마법 (자바를 통하여 세계로) |작성자 세피룸
[출처] 3. jQuery기초(3) (글자가 처천히 사라지는 효과) (자바를 통하여 세계로) |작성자 세피룸
[출처] 1. jQuery 기초 (자바를 통하여 세계로) |작성자 세피룸