jQuery Introduction
What is jQuery?
- jQuery는 적게 쓰고 많은 일을 하기 위한 JavaScript Library.
- AJAX call 이나 DOM 등을 아주 간단하게 조작할 수 있게 해준다.
- jQuery의 특징은 다음과 같다.
1. HTML/DOM 조작
2. CSS 조작
3. HTML event methods
4. Effects and animations
5. AJAX
6. Utilities
Why jQuery?
- 많은 JS framework 들이 있지만, jQuery가 가장 유명하다.
- Google, MS, IBM, Netflix 가 jQuery를 사용한다.
- 모든 browser 호환여부는 jQuery lib 에 쓰여 있다. 대부분의 major browser에서 다 돌아간다.
jQuery Install
Adding jQuery to Your Web Pages
- jQuery 사용을 위해서는 jQuery lib 이 필요하다. 그리고 page에 <script src="jquery.js"> 가 추가되어야 한다.
- 참고로 <script> 태그는 <head> 안에 들어있는 것이 좋다.
- 또 다시 참고로 type="text/javascript" 를 기록하지 않는 이유는 JS가 HTML5부터는 기본 표준 script language이기 때문이다.
Basic jQuery Example
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Downloading jQuery
- 2가지 버전의 jQuery가 있다.
1. Production version : live website 용으로 최소화되고, 압축되었다.
2. Development version : 압축되지 않고, readable한 코드들이 있다.
둘 다 jQuery.com에서 다운로드 가능하다.
Alternative to Downloading
- 다운로드 하지 않고도 연결하는 방법이 있는데, CDN( Content Delivery Network ) 를 이용하면 된다. ( src에 url 넣어주기 )
- 구글의 CDN 주소는 http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js 인데, 가운데 /1.8.0/ 버전부분을 빼주면 항상 최신버전으로 링크된다.
- MS의 CDN 주소는 http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js
- Google 이나 MS의 CDN을 쓰는 데서 오는 장점은, cache가 되어 loading time 이 빠르다는 점과 한번 접속하면 가장 가까운 서버에서 support하도록 설계되어 있다.
jQuery Syntax
jQuery Syntax
- jQuery Syntax 는 HTML element를 선택하고 어떤 action을 가하는데 최적화되어 있다.
- syntax
$(selector).action()
- $ sign은 jQuery를 define/acceess 하기 위한 기호
- (selector) 는 HTML element의 query or find 의 역할
- action() 은 HTML element에 행해지는 action
$(this).hide()
$("p").hide() // 모든 <p> element hide
$(".test").hide() // class="test"인 모든 element가 hide
$("#test").hide() // id="test"인 element가 hide
The Document Ready Event
$(document).ready(function(){
// jQuery methods go here...
});
$(function(){
// jQuery methods go here...
});
jQuery Selectors
jQuery Selectors
- HTML element를 선택하고 조작하는것을 도와준다.
- id, classes, types, attributes, attribute value 등을 기준으로 element를 선택할 수 있다. 이 선택은 사실 CSS Selectors를 기반으로 하고 있고, 약간의 custom selector 들이 추가되었다. 모든 jQuery의 selector는 $(조건자) 의 형태로 이루어진다.
The element Selector
- tag name으로 선택한다. 예를 들어 모든 p tag를 선택하고 싶다면
$("p")
The #id Selector
- id로 검색한다.
$("#test")
The .class Selector
- class 이름으로 검색한다.
$(".test")
More Examples of jQuery Selectors
- ${"*"} : 모든 element
- $(this) : 현재 HTML element
- $("p.intro") : class="intro" 인 모든 p element
- $("p:first") : 첫번째 p element
- $("ul li:first") : 첫번째 ul 의 첫번째 li element
- $("ul li:first-child") : 모든 ul의 첫번째 li element
- $("[href]") : href attribute 를 가진 모든 element
- $("a[target='_blank']") : target='_blank' 인 모든 a element
- $("a[target!='_blank']") : target이 '_blank'가 아닌 모든 a element.
- $(":button") : 모든 type="button"인 input element와 button element
- $("tr:even") : 모든 짝수 tr element.
- $("tr:odd") : 모든 홀수 tr element.
Selectors Reference
jQuery Events
jQuery Event Functions
- jQuery 의 event handling methods는 jQuery 의 핵심이다.
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Functions In a Separate File
- 만약 웹사이트가 많은 페이지를 가지고 있다면 jQuery function들은 다른 .js 파일에 넣는 것이 더 좋다.
- <script src="my_jquery_functions.js"> 만 넣어주면 된다.
jQuery Name Conflicts
- jQuery는 $ 를 사용하는데, 가끔 JS lib 들도 function 에 $ 을 사용하여 conflict가 나는 경우가 있다. noConflict()는 selector를 사용할 때 $ 대신 다른 용어를 사용할 수 있게 해준다. ( 하지만 jQuery 가 널리 쓰이기 때문에 이런 일은 적지 않을까 싶다... )
var jq = jQuery.noConflict();
jq(document).
jQuery Events
- $(document).ready(function)
- $(selector).click(function)
- $(selector).dblclick(function)
- $(selector).focus(function)
- $(selector).mouseover(function)
jQuery Event Reference
jQuery Effects - Hide and Show
jQuery hide() and show()
- Syntax:
$(selector).hide( speed, callback );
$(selector).show( speed, callback );
speed = "slow" or "fast" or milliseconds.
callback = hide or show 가 끝난 후에 수행
jQuery toggle()
- hide() 와 show()를 toggle 한다.
- Syntax:
$(selector).toggle( speed, callback );
jQuery Effects Reference
jQuery Effects - Fading
jQuery Fading Methods
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo() Method
- Syntax:
$(selector).fadeIn( speed, callback );
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
jQuery Effects - Sliding
jQuery Sliding Methods
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown(), slideUp(), slideToggle() Method
- Syntax :
$(selector).slideDown( speed, callback );
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
jQuery Effects - Animation
jQuery Animations - The animate() Method
- custom animation 을 적용할 수 있다.
- Syntax
$(selector).animate( {params}, speed, callback };
param= animation 될 CSS properties.
- 기본적으로는 모든 HTML element 는 static position 이 있고, 이동될 수 없다. position 을 조작하려면, CSS position property 를 relative, fixed 또는 absolute 로 설정해야 한다.
$("button").click(function(){
$("div").animate({left:'250px'});
});
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
jQuery animate() - Manipulate Multiple Properties
- comma separate 로 설정해주면 된다.
- 거의 대부분의 CSS property는 animate 가능하다.
- CSS property 는 모두 camel-cased (propertyName 처럼 공백없이 문자로만 표시되며, 단어연결이 대문자시작으로 되는 형태)이어야만 한다.
- color animation 은 core jQuery lib 에는 포함되어 있지 않다. 사용하려면 Color Animations plugin 을 jQuery.com에서 다운받아 사용해야 한다.
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
jQuery animate() - Using Relative Values
- Relative value 도 설정할 수 있다. += -= 등을 사용한다.
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - Using Pre-definede Values
- "show", "hide", "toggle" 의 pre-defined value 도 사용할 수 있다.
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - Uses Queue Functionality
- jQuery 는 기본적으로 animation에 대해 queue 를 운영한다. animation을 여러개를 동시에 돌린다면, 등록되는 순서대로 internal queue 에 쌓아놓고 one by one 으로 돌린다.
jQuery Stopping Animations.
jQuery stop() Method
- Animation을 정지시킨다.
- Syntax:
$(selector).stop( stopAll, goToEnd );
stopAll = queue clear 여부 ( default : false )
goToEnd = animation 종료시점으로 이동할지 ( default : false )
$("#stop").click(function(){
$("#panel").stop();
});
jQuery Callback Functions
jQuery Callback Functions
- JS 는 line by line 으로 수행된다.
- effect가 같이 있는 경우에는 effect가 수행되는 와중에 코드를 계속 실행시킨다. 이럴 경우 error 가 발생할 수 있다.
- effect가 같이 있는 경우의 에러를 방지하기 위해 callback function 이 있다.
- callback function 은 현재 effect가 끝나는 순간 수행된다.
jQuery HTML/DOM Manipulation
Changing HTML Content
- jQuery 의 html() 함수는 content( innerHTML ) 을 변화시킨다.
Adding HTML content
- jQuery의 append() 함수는 선택된 element의 content에 추가한다.
- prepend()
- after()는 뒤에 바로 따라 붙이는 것이 아닌 \n 효과를 주며 추가한다.
- before()
jQuery HTML Method Reference
jQuery CSS Manipulation
jQuery css() Method
- css() 는 jQuery의 CSS 조작을 위한 중요한 함수이다.
- css( property ) : return CSS property value
- css( property, value ) : set CSS property and value
- css( {properties} ) - set multiple CSS properties and values
Return CSS Property
css( property )
- 첫번째로 match 된 녀석의 값을 돌려준다. ( 예를 들어 p 태그를 사용하는 녀석이 여러개 있다면 그 중 해당 property 를 가진 첫번째 p 태그에 대한 갓을 return 한다. )
Set CSS Property and Value
css( property, value )
- All match element의 property에 대한 value 를 바꾼다.
Set Multiple CSS Properties
css( {properties} )
- All match에 대해 여러개의 property 와 value를 동시에 바꾼다.
$("p").css({"background":"yellow","font-size":"200%"});
jQuery height() and width() Methods
- width(), height() 는 첫번째 match 되는 녀석에 대한 값을 return 하고. width( value ) , height( value ) 는 모든 match 되는 녀석의 값을 설정한다.
jQuery CSS Methods Reference
jQuery AJAX
What is AJAX?
- AJAX = Asynchronous JavaScript and XML.
- AJAX는 빠르고 동적인 웹 페이지를 만드는 기술.
- AJAX는 웹 페이지를 서버로부터 적은 양의 데이터를 받아 비동기식으로 업데이트한다. 다시 말하면 전체 reload없이 웹 페이지의 일부만을 변경하는 것을 말한다.
AJAX and jQuery
- jQuery 는 AJAX에 대한 충분히 많은 함수를 제공한다.
- jQuery와 AJAX를 함께 사용하면, server에게 HTTP GET, POST를 이용하여 text, HTML, XML, JSON 등을 요청할 수 있다. 그리고 특정 HTML element에 그 내용을 바로 반영할 수 있다. ( 전체 갱신 없이 )
jQuery load() Method
- jQuery의 load() 함수는 강력한 AJAX 함수이다. server로부터 data를 읽어서 특정 element에 그 내용을 뿌리는 기능이다.
- Syntax:
$(selector).load( URL, data, callback );
jQuery $.ajax() Method
- jQuery의 $.ajax() 함수는 AJAX request를 수행한다.
- Syntax:
$.ajax( options );
- $.ajax() 는 load(), get(), post() 보다 더 많은 기능을 제공하지만 사용하기는 조금 더 어렵다.
- options는 name:value pairs 를 받는데, URL, passwords, data types, filters, character sets, timeout, error function 들을 받는다.
$.ajax({url:"test1.txt",success:function(result){
$("div").html(result);
}});
jQuery AJAX Methods Reference.
jQuery Examples.
'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [Script] $(function(){}) 와 $(document).ready(function(){}) 의 차이. (0) | 2012.09.26 |
|---|---|
| [Script] jQuery Reference Full version. (2) | 2012.09.26 |
| [HTML] HTML DOM( Document Object Model ) Tutorial ( 기초강좌 ) (0) | 2012.09.25 |
| [Script] Backbone.js Tutorial ( 기초강좌 ) - Collection. (3) | 2012.09.25 |
| [Script] Backbone.js Tutorial ( 기초 강좌 ) - Router (5) | 2012.09.25 |
댓글