http://blog.naver.com/topsaga/140155551418
1. jQuery Selectors
2. jQuery Events
3. jQuery Effects
4. jQuery HTML
5. jQuery CSS
6. jQuery AJAX
7. jQuery 기타
입니다.
[배우기 전에 기본 지식]
- HTML - CSS- Javascript
[what?]
javascript 함수들로 이루어진 라이브러리
[특징]
- HTML 엘리먼트 선택/ 조작
- HTML 이벤트 함수
- HTML DOM traversal과 수정
- javascript 효과 및 에니메이션
- CSS 조작
- AJAX
- Utilities
[웹페이지에 jQuery 라이브러리 추가하기]
jQuery 라이브러리는 javascript 파일로 저장되어 있고, 모든 jQuery 메서드를 담고 있습니다.
다음과 같은 마크업으로 웹페이지에 추가할 수 있습니다.
| <head> <script type="text/javascript" src="jquery.js"></script> </head> |
<script>태그가 <head></head>안에 있어야 한다는 점에 주의하세요.
[jQuery 다운로드]
jQuery는 두 가지 버전이 있습니다. 하나는 작게 축소한 버전이고, 또 하나는 압축하지 않은 버전입니다.
압축하지 않은 버전은 디버그나 내용확인을 위한 것입니다.
두 버전 모두 http://www.jquery.com 에서 다운로드할 수 있습니다.
jQuery 라이브러리를 (개발용)로컬컴퓨터나 서버에 다운로드를 하지 않고 구글이나 MS에 있는 jQuery 라이브러리로 사용할 수도 있습니다.
이 때는 아래와 같이 소스를 삽입하여 사용하면 됩니다.
[구글]
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
[MS]
<head>
<script type="text/javascript" src="http://ajax.miscrosoft.com/ajax/jquery-1.4.2.min.js"></script>
</head>
[jQuery 기본 예제]
다음의 예제는 jQuery의 hide() 메소드를 설명하고 있습니다.
이 hide() 메소드는 HTML문서에 있는 모든 <p>태그를 감춥니다.
| <html> |
[Document Ready Function]
모든 jQuery 메소드가 document.ready() 함수 안에 있다.
| $(document).ready(function() { |
jQuery 메소드가 document.ready() 함수안에 넣는 이유는
jQuery 코드가 문서가 로딩이 끝나기 전(혹은 문서가 준비되기 전)에 실행되는 것을 막기 위한 것입니다.
문서가 완전히 로드되기 전에 함수가 실행된다면 오류가 날 수 있는 몇 가지 경우가 있습니다.
- 존재하지 않는 엘리먼트를 감추려고 할 때
- 로드되지 않은 이미지의 사이즈를 얻으려고 할 때
[별도 파일로 jQuery 함수 관리하기]
웹사이트가 수많은 페이지로 만들어졌고 손수 코딩한 jQuery 함수들을 관리하기 쉽게 하려면,
별도의 .js 파일에다 자신의 jQuery 함수를 넣으면 됩니다.
지금까지의 예제에서는 함수들을 <head> 부분에 직접 입력을 했지만, 때로는 별도 파일에 이 함수들을 넣어두는 것이 좋습니다. 아래처럼요.
| <head> |
jQuery 문법
jQuery에서는 HTML 엘리먼트를 선택하고 그 엘리먼트에 “액션”을 수행할 수 있습니다.
기본 문법은, $(selector).action()
- $ jQuery라는 것을 정의
- (selector) “질의하거나 찾을” HTML 엘리먼트를 의미
- jQuery action() 엘리먼트가 수행할 액션
[예제]
$(this).hide() 해당 HTML 엘리먼트를 감추게 하는 jQuery hide() 메소드
$(“#test").hide() id가 test인(id="test") 엘리먼트를 감추게 하는 jQuery hide() 메소드
$(“p").hide() 모든 <p> 엘리먼트를 감추게 하는 jQuery hide() 메소드
$(“.test").hide() class가 test인(class="test") 모든 엘리먼트를 감추게 하는 jQuery hide() 메소드
※jQuery는 XPATH와 CSS selector 문법을 혼합해서 사용합니다.
[jQuery Name Conflicts]
jQuery는 단축표시로 $를 사용합니다.
어떤 javascript 라이브러리에서도 역시 $표시를 사용하고 있습니다.
jQuery의 noConflict() 메소드를 사용하면 자신이 원하는 어떤 다른(예를 들어, jq) 이름으로 $표시를 대체할 수 있습니다.
jQuery Selectors
- jQuery selectors는 여러개 또는 한 개의 HTML 엘리먼트를 선택하고 조작할 수 있게 합니다.
jQuery를 이용하여 효과를 주기 원하는 엘리먼트를 정확하게 선택하는 방법을 배우는 것이다.
jQuery selector는 엘리먼트 이름, 특성이름, 또는 content로 HTML 엘리먼트를 선택할 수 있게 합니다.
※ HTML DOM에 따르면, selectors는 DOM 엘리먼트를 그룹단위 혹은 개별 node 단위로 조작할 수 있게 합니다.
[jQuery Element Selectors]
jQuery는 HTML 엘리먼트를 선택할 때 CSS selector를 이용합니다.
$(“p")는 모든 <p> 엘리먼트를 선택합니다.
$(“p.intro")는 class="intro" 인 모든 <p> 엘리먼트를 선택합니다.
$(“p#demo")는 id="demo" 인 모든 <p> 엘리먼트를 선택합니다.
[jQuery Attribute Selectors]
jQuery는 XPath 표현을 사용하여 특정 특성(attribute)을 가진 엘리먼트를 선택합니다.
$(“[href]")는 href 특성을 가진 모든 엘리먼트를 선택합니다.
$(“[href='#']")는 href의 값이 ‘#’인 모든 엘리먼트를 선택합니다.
$(“[href!='#']")는 href 특성이 ‘#’이 아닌 모든 엘리먼트를 선택합니다.
$(“[href$='.jpg']”)는 href 특성이 ‘.jpg'로 끝나는 모든 엘리먼트를 선택합니다.
[jQuery CSS selectors]
jQuery CSS selector는 HTML 엘리먼트의 CSS 속성을 바꿀 수 있습니다.
아래의 예제는 모든 p 엘리먼트의 배경색을 노란색으로 바꾸는 예제입니다.
$(“p").css("background-color","yellow");
[추가적인 예제]
$(this) → 현재 HTML 엘리먼트
$(“p") → 모든 <p> 엘리먼트
$(“p.intro") → class="intro"인 모든 엘리먼트
$(“p#intro") → id="intro"인 모든 엘리먼트
$(“p#intro:first") → id="intro"인 첫 번째 엘리먼트
$(“.intro") → class="intro"인 모든 엘리먼트
$(“#intro") → id="intro"인 첫 번째 엘리먼트
$(“ul li:first") → 첫 번째 ul의 첫 번째 li 엘리먼트
$(“ul li:first-child") → 모든 ul의 첫 번째 li 엘리먼트
$(“[href$='.jpg']") → ".jpg"로 끝나는 href 특성을 가진 모든 엘리먼트
$(“div#intro .head") → id="intro"인 div 엘리먼트 안의 class="head"인 모든 엘리먼트
jQuery Selectors References
[출처] jQuery Selectors References|작성자 기냥이
[jQuery Events]
jQuery는 맞춤형으로 event를 핸들링할 수 있습니다.
jQuery 이벤트 핸들링 메소드는 jQuery의 핵심 함수입니다.
이벤트 핸들러는 HTML에서 "어떤 일이 생겼을 때" 호출되는 메소드입니다.
"어떤 이벤트가 발생했을 때“(보통 영어로 ‘triggered(or fired) by an event’)라는 말이 자주 사용됩니다.
보통 jQuery 코드를 head 부분의 이벤트 핸들러 메소드에 삽입합니다.
| <html> |
예>
$(document).ready(function) → 문서 로딩이 끝났을 때 호출
$(selector).click(function) → 선택된 엘리먼트를 클릭했을 때 호출
$(selector).dblclick(function) → 선택된 엘리먼트를 더블클릭했을 때 호출
$(selector).focus(function) → 선택된 엘리먼트에 포커싱이 됐을 때 호출
$(selector).mouseover(function) → 선택된 엘리먼트에 마우스오버했을 때 호출
jQuery Effects
먼저 아래의 예제들을 하나씩 클릭해서 보시죠.
[예제]
jQuery hide() 단순 형태의 jQuery hide() 메소드
jQuery hide() 텍스트 일부분만 가리기
jQuery slideToggle() 간단한 슬라이드 효과
jQuery fadeTo() 간단한 fadeTo() 메소드
jQuery animate() 간단한 animate() 메소드
[jQuery Hide and Show]
문법 :
$(selector).hide(speed,callback)
$(selector).show(speed.callback)
jQuery에서는 hide()와 show() 메서드를 사용해서 HTML 엘리먼트를 숨기거나 보여지게 할 수 있습니다.
예){적용예제보기}
$(“#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });
hide()와 show() 메서드에는 두가지 변수(옵션)을 줄 수 있습니다. 바로 속도와 콜백.
속도변수는 숨기기/보이기의 속도를 나타내주고, “slow", "fast", "normal", 또는 밀리세컨값을 가질 수 있습니다.
예){적용예제보기}
$(“button").click(function(){ $("p").hide(1000); });
콜백 변수는 hide 함수(또는 show 함수)가 끝나고 난 직후에 수행될 함수의 이름을 나타냅니다.
다음다음번 강좌에서 이 콜백 변수에 대해서 알아보겠습니다.
[jQuery Callback Functions]
javascript 구문은 줄단위로 수행됩니다.
하지만 애니메이션의 경우에는 애니메이션이 끝나지 않아도 다음 행의 코드가 수행될 수 있기 때문에 에러가 날 수도 있습니다.
콜백함수를 만들어서 이런 것을 방지할 수 있습니다.
콜백함수는 현재의 애니메이션(혹은 효과)이 끝난 후에야 실행됩니다.
[jQuery Callback Example]
기본적인 문법은 :
$(selector).hide(speed,callback)
콜백 변수에는 감추기 효과가 끝난 후에 수행될 함수가 들어갑니다.
예 - 콜백이 있을 경우
$(“p").hide(1000,function(){
alert("이 부분은 이제 사라질 것입니다“);
});
콜백 변수에 아무 값이 없다면 alert창은 감추기 효과가 끝나기 전에 나타날 것입니다.
예 - 콜백이 없을 경우
$(“p").hide(1000);
alert("이 부분은 이제 사라질 것입니다“);
[jQuery Slide - slideDown, slideUp, slideToggle]
jQuery slide 메소드는 선택한 엘리먼트의 높이를 점차적으로 변경시킵니다.
jQuery의 slide 메소드에는 다음과 같은 것들이 있습니다.
- $(selector).slideDown(speed,callback)
- $(selector).slideUp(speed,callback)
- $(selector).slideToggle(speed,callback)
speed 변수에는 "slow", "fast", "normal", 또는 밀리초의 값이 들어갑니다.
callback 변수는 이 함수가 실행되고 난 직후에 실행되는 함수의 이름이 들어갑니다.
예 - slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
예 - slideUp()
$(".flip").click(function(){
$(".panel").slideUp();
});
예 - slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});
[jQuery Fade - fadeIn, fadeout, fadeTo]
jQuery fade 메소드는 선택한 엘리먼트의 투명도를 점차적으로 변화시킵니다.
jQuery에서 가능한 fade 메소드는 아래와 같습니다.
- $(selector).fadeIn(speed,callback)
- $(selector).fadeOut(speed,callback)
- $(selector).fadeTo(speed,opacity,callback)
speed 에는 “slow", "fast", "normal", 혹은 밀리초의 값을 넣을 수 있습니다.
fadeTo()메소드에서는 opacity변수로 설정한 투명도로 변경이 됩니다. (0~1의 값)
callback 변수는 이 함수가 완료된 후에 실행된 함수의 이름이 들어갑니다.
예 - fadeTo()
$(“button").click(function(){
$("div").fadeTo("slow",0.25);
});
예 - fadeOut()
$(“button").click(function(){
$("div").fadeOut(4000);
});
[jQuery Custom Animations]
애니메이션 효과를 주기 위한 jQuery 메서드의 문법은 다음과 같습니다.
$(selector).animate( {params} , [duration] , [easing] , [callback] )
여기서는 params가 중요한 변수입니다. 이것은 animate될 CSS 속성을 정의합니다. 동시에 여러 가지 속성을 정의할 수 있습니다.
animate( {width:"70%", opacity:0.4, marginLeft:"0.6in", fontSize:"3em"} );
두 번째 변수는 duration입니다. 이것은 애니메이션의 속도를 결정합니다. 여기에 들어갈 수 있는 값은 “fast", "slow", "normal", 또는 밀리초입니다.
예)
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:300}, "slow");
$("div").animate({width:300}, "slow");
$("div").animate({height:100}, "slow");
$("div").animate({width:100}, "slow");
});
});
</script>
예)
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"100px"}, "slow");
$("div").animate({fontSize:"3em"}, "slow");
});
});
</script>
[jQuery Effects]
jQuery로 사용할 수 있는 함수들을 아래와 같이 정래해봤습니다.
$(selector).hide() → 선택한 엘리먼트 감추기
$(selector).show() → 선택한 엘리먼트 보이기
$(selector).toggle() → 선택한 엘리먼트 토글(숨기고 보이고..)
$(selector).slideDown() → 선택한 엘리먼트 slide-down(보이기)
$(selector).slideUp() → 선택한 엘리먼트 slide-up(감추기)
$(selector).slideToggle() → 선택한 엘리먼트 토글(slide-up & slide-down)
$(selector).fadeIn() → 선택한 엘리먼트 점차적으로 보이기(fade in)
$(selector).fadeOut() → 선택한 엘리먼트 점차적으로 숨기기(fade out)
$(selector).fadeTo() → 선택한 엘리먼트를 특정 투명도로 점차적으로 숨기기(fade out)
$(selector).animate() → 선택한 엘리먼트 애니메이션 효과주기
[출처] jQuery 강좌 6 - jQuery Effects 2탄|작성자 기냥이
jQuery는 HTML 엘리먼트와 특성들을 변경시키고 조작할 수 있는 강력한 메소드(함수)를 가지고 있습니다.
[HTML 내용 바꾸기]
$(selector).html(content)
html()메소드는 일치하는 HTML 엘리먼트의 내용을 변경시킵니다.
예)
$(“p").html("W3Schools");
[HTML 내용 추가하기]
$(selector).append(content)
append() 메소드는 일치하는 HTML 엘리먼트 안에 내용을 추가시킵니다.
$(selector).prepend(content)
prepend() 메소드는 일치하는 HTML 엘리먼트 안의 내용 앞쪽에 컨텐츠를 추가시킵니다.
예 - append()
$(“p").append("W3Schools");
예 - prepend()
$("p").prepend("W3Schools");
$(selector).after(content)
after() 메소드는 일치하는 모든 엘리먼트 뒤쪽에 HTML 내용을 삽입합니다.
$(selector).before(content)
before() 메소드는 일치하는 모든 엘리먼트 앞쪽에 HTML 내용을 삽입합니다.
예 - after()
$("p").after(" W3Schools");
예 - before()
$("p").before("W3Schools ");
[HTML 내용을 조작하는 jQuery 메소드 정리]
$(selector).html(content) → 선택한 엘리먼트의 HTML 내용을 변경한다
$(selector).append(content) → 선택한 엘리먼트의 HTML에 내용을 추가한다
$(selector).after(content) → 선택한 엘리먼트의 뒤쪽에 HTML을 추가한다
jQuery Effects Methods References
[출처] jQuery Effects Methods References|작성자 기냥이
jQuery 강좌 9 - jQuery CSS 조작(Manipulation) 
[출처] jQuery 강좌 9 - jQuery CSS 조작(Manipulation)|작성자 기냥이
[jQuery css() 메소드]
jQuery에는 CSS를 조작할 때 한 가지 매우 중요한 메소드가 있습니다. 바로 css()메소드입니다.
css() 메소드는 세가지 다른 문법을 가지고 있고, 이들은 서로 다른 일을 수행합니다.
- css(name) - CSS 속성값(property value)을 리턴합니다.
- css(name, value) - CSS 속성과 값을 설정합니다.
- css({properties}) - 여러 CSS 속성과 값을 설정합니다.
[CSS 속성 리턴]
css(name)은 첫 번째 매치되는 엘리먼트의 CSS 속성값을 리턴할 때 사용합니다.
예)
$(this).css("background-color');
[CSS 속성과 값을 설정하기]
css(name,value)는 매치되는 모든 엘리먼트의 CSS 속성을 설정합니다.
예)
$(“p").css("background-color","yellow");
[여러 CSS 속성과 값 설정하기]
css({properties})는 선택한 엘리먼트에 대해서 한 개 이상의 CSS 속성/값을 쌍으로 설정합니다.
예)
$(“p").css({"background-color":"yellow", "font-size":"200%"});
[jQuery height() / width() 메소드]
jQuery에는 사이즈를 조절할 수 있는 두가지 중요한 메소드가 있습니다.
- height()
- width()
[사이즈 조작 예제]
height() 메소드는 매칭되는 모든 엘리먼트의 높이를 설정합니다.
예)
$(“#div1").height("200px");
width() 메소드는 매칭되는 모든 엘리먼트의 너비를 설정합니다.
예)
$(“#div2").width("300px");
[jQuery CSS 메소드 정리]
$(selector).css(name) → 처음 매칭되는 엘리먼트의 스타일 속성값을 얻습니다
$(selector).css(name,value) → 일치하는 엘리먼트의 첫 스타일 속성값을 설정합니다.
$(selector).css({properties}) → 매칭되는 엘리먼트의 여러 개의 스타일 속성을 설정합니다.
$(selector).height(value) → 매칭되는 엘리먼트의 높이를 설정합니다.
$(selector).width(value) → 매칭되는 엘리먼트의 너비를 설정합니다.
[출처] jQuery 강좌 9 - jQuery CSS 조작(Manipulation)|작성자 기냥이
jQuery는 AJAX 개발을 위한 풍부한 라이브러리를 제공합니다.
[출처] jQuery 강좌 10 - jQuery AJAX|작성자 기냥이
[AJAX란 무엇인가]
AJAX = Asynchronous JavaScript and XML.
(AJAX = 비동기식 자바스크립트 & XML)
AJAX는 웹페이지를 빠르고 다이나믹하게 만드는 기술입니다.
AJAX는 화면 뒤에서 적은 양의 데이터를 서버와 교환하여 비동기적으로 웹페이지를 업데이트할 수 있게 합니다.
다른 말로 하면, 전체 웹페이지를 새로고침하지 않고 웹페이지의 일부분만을 업데이트하는 것이 가능하다는 얘기입니다.
AJAX에 대해서는 제 블로그에서 기초적인 부분을 다뤘습니다. 참고하세요.
[AJAX와 jQuery]
jQuery는 AJAX 웹 개발을 할 때 다양한 메서드를 제공합니다.
jQuery AJAX를 사용하면, HTTP Get 방식과 HTTP Post 방식 모두를 사용하여 원격 서버로부터 TXT, HTML, XML, JSON 데이터를 요청할 수 있습니다.
또한 웹페이지에서 선택한 HTML 엘리먼트에 원격데이터를 직접 로드할 수 있습니다!
[적게 쓰고 많은 일을 한다]
jQuery load() 메서드는 간단한 (하지만 매우 강력한) AJAX 함수입니다.
이 메서드는 다음과 같은 문법으로 사용합니다.
$(selector).load(url,data,callback)
selector는 변경시킬 HTML 엘리먼트를 정의합니다. 그리고 url 변수는 데이터를 가지고 있는 웹 주소를 나타냅니다.
서버에 데이터를 보내기만 할 것이라면 data 변수를 사용합니다.
수행이 완료된 후에 어떤 함수를 실행시키려면 callback 변수를 사용합니다.
[Low Level AJAX]
Low level AJAX 함수의 문법은 $.ajax(options) 로 사용합니다.
$.ajax는 load, get, post와 같은 더 높은 레벨의 함수보다 더 많은 기능을 제공하지만 사용 또한 어렵습니다.
option 변수는 name|value와 같이 한 쌍의 형태로 url, password, 데이터 타입, 필터, 문자열 세트, timeout 및 에러 함수를 정의합니다.
[jQuery AJAX 메소드 정리]
$(selector).load(url,data,callback) → 선택한 엘리먼트에 원격 데이터를 로드시킨다
$.ajax(options) → XMLHttpRequest 오브젝트에 원격 데이터를 로드시킨다
[출처] jQuery 강좌 10 - jQuery AJAX|작성자 기냥이