1. jQuery란? DOM (DocumentObject Model) 컨트롤을 위한 자바스크립트 라이브러리 또는 dhtml의 끝판왕
jQuery 사이트 : http://jquery.com/
Visual jQuery : http://www.visualjquery.com/
jQuery Plugin 모음 사이트 : http://www.jqueryrain.com/
Other jQuery Document Site : http://jqapi.com
하코사 jQuery 스터디 자료 : http://coding.kr/apps/study/
테스트용 플러그인 : colorbox :
http://www.jacklmoore.com/colorbox/
https://github.com/jackmoore/colorbox
swipebox : http://brutaldesign.github.com/swipebox/
-------- install :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
// doing something
});
</script>
-------- Find(찾고)
2. 셀렉터
- 기본 : element, .class, #id, all(*)
- 계층 : child(>),
- 기본 필터 : :eq(index), :even, :odd, :first, :last, :gt(index), :lt(index), :not(filter)
- 컨텐츠필터 : :contains(text), :empty, :has(selector)
- 속성필터 : : attributeContains - input[name*='man'], attributeEquals - input[name='newsletter']
- 차일드 필터 : :first-child, :last-child, :nth-child(2), :nth-child(even), :nth-child(odd), :nth-child(3n)
- 폼 : :button, :checkbox, :file, :hidden, :image, :radio
- 폼 필터 : :checked, :disabled, :enabled, :selected
3. Attributes
- Attr : get - attr(name), set - attr(name, value) , removeAttr(name), value안에 return 값을 가지는 function을 넣을수도 있음.
- Class : addClass(class), removeClass(class), hasClass(class), toggleClass(class)
- HTML : get - html(), set - html(val)
- Text : get - text(), set - text(val)
- Value : get - val(), set - val(val)
4. Traversing(탐색)
- 필터 : eq(index), filter(expr), not(expr), slice(start, end)
- Finding : children(expr), find(expr), next(expr), prev(expr), closest(expr), siblings(expr)
- Chaining : end(), andSelf()
5. Loop
- .each(function(index, element){})
-------- Doing(실행)
5. Manipulation
- Changing Contents : html(), html(val), text(), text(val)
- Inserting Inside : append(content), appendTo(content), prepend(content), prependTo(content)
- Inserting Outside : after(content), before(content), insertAfter(content), insertBefore(content)
- inserting Around : wrap(html), wrapAll(html), wrapInner(html)
- Replacing : replaceAll(selector), replaceWith(content)
- Removing : empty(), remove(expr)
- Copying : clone(), clone(true)
6. CSS
- CSS : get - css(name), set - css(name, value), css(object)
- Height, Width :
get - height(), width()
set - height(val), width(val)
- Positioning : offset() - offset.left, offset.top
7. Event
- Page Load : ready()
- Event Handling :
set - bind(type, callback_function), one(type, callback_function), live(type, callback_function)
fire - trigger(type, data)
- Interaction helper - hover(over_function, out_function), toggle(function1, function2)
- Event helpers
set - click(fn), change(fn), focus(fn), keyup(fn), submit(fn), ...
fire - click(), dbclick(), focus(), keydown(), submit()
8. Effects
- Basics : show(), hide(), toggle(), show(speed, callback), hide(speed, callback)
- Sliding : slideDown(speed, callback), slideUp(speed, callback), slideToggle(speed, callback)
- Fading : fadeIn(speed, callback), fadeOut(speed, callback), fadeTo(speed, opacity, callback)
9. Ajax
- $.ajax(options)
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(result){
alert( "Data Saved: " + result );
},
error: function(){
}
});
- $('form').serialize()
10. data
- get : .data(name), $.data(elem), $.data(elem, name)
- set : .data(name, value), $.data(elem, name, value)
- remove : .removeData(name), $.removeData(elem), $.removeData(elem, name)
11. Utilities
- user agent : $.browser()
- Array and Object operations :
$.each(arr, fn(index, value){}), $.each(obj, fn(key,value){})
$.extend(target, object1, object2)
