- jQuery 개요
- Selector
- 사용 문법
- CSS 정의 Selector
- jQuery 정의 Selector
- XPath 정의 Selector
- jQuery 사용법
- Core
- Selectors
- Attributes
- Traversing
- Manipulation
- CSS
- Events
- 자동 실행
- Effects
- Ajax
- Utilities
- Internals
- Form 관리
- jQuery Plugin
- jQuery Plugin 제작
- Form Plugin
- Demensions Plugin
- Live Query Plugin
- UI Plugin
- Splitter Plugin
- jQuery Grid Plugin
- jQuery wdCalendar Plugin
- jQuery 2.1.1
- Properties
- Objects
- Functions
- Sizzle.js
- 참고 문헌
자바 스크립트 라이브러리로 Prototype과 대등한 사용율을 보이고 있는 jQuery를 정리 한다.
홈페이지 : http://jquery.com/
라이센스 :
플랫폼 : JavaScript
매뉴얼 : Visual jQuery 1.2.6
jQuery 개요
2006년 초에 John Resig가 만든 jQuery는 JavaScript로 동적인 작업을 하기를 원하는 사람들에게 많은 도움을 준다. jQuery는 CSS에서 제공하는 문법을 사용하여 HTML 페이지의 Element를 선택하고 그 선택된 Element에 원하는 동작을 수행한다.
Selector
사용 문법
$(selector), jQuery(selector)
selecttor : element, .class, #id
$('selector_1, selector_2') == $('selector_1').add('selector_2')
$(selector, context) : context에서 selector에 해당하는 element 반환
CSS 정의 Selector
jQuery 정의 Selector
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center"
|-
|width="20%" align="center" valign="middle" style="background-color:#eee;"|Selector
|width="80%" align="center" valign="middle" style="background-color:#eee;"|Selector 설명
|-
|align="center" valign="middle" style="background-color:#eee;"|input type에 따라 선택
|valign="middle"|
:checkbox : input element 중 type이 checkbox인 element
:text : input element 중 type이 textx인 element
:file : input element 중 type이 file인 element
:password : input element 중 type이 passwordx인 element
:readio : input element 중 type이 readio인 element
:image: input element 중 type이 image인 element
:button : input element 중 type이 submit, reset, button인 element와 button element
:submit : input, button element 중 type이 submitt인 element
:reset : input, button element 중 type이 reset인 element
:input : input, select, textarea, button element align="center" valign="middle" style="background-color:#eee;" valign="middle" :enabled : 활성화된 element
:disabled : 비활성화된 element
:visible : 눈에 보이는 Element
:hidden : 숨겨진 element
:selected : 선택된 element
:checked : 선택된 체크박스와 라디오 버튼 align="center" valign="middle" style="background-color:#eee;" valign="middle" 현재 애니메이션이 적용된 element align="center" valign="middle" style="background-color:#eee;" valign="middle" val을 포함하는 element align="center" valign="middle" style="background-color:#eee;" valign="middle" <h1>부터 <h6>까지 align="center" valign="middle" style="background-color:#eee;" valign="middle" filter에 해당하는 element를 제외한 element align="center" valign="middle" style="background-color:#eee;" valign="middle" 자식을 가지는 element
|}
XPath 정의 Selector
XPath : XML Path Language
XSLT와 XPointer 기반의 XML 문서 요소들에 대한 구조적인 Addressing 기법 제공
XPath 1.0 : 1999.11
XPath에서 계층 구조
Ancestor
Preceding, Parent, Following
Preceding-sibling, Self, Following-sibling
Child
Descendant
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center"
|-
|width="20%" align="center" valign="middle" style="background-color:#eee;"|Selector
|width="80%" align="center" valign="middle" style="background-color:#eee;"|Selector 설명
|-
|align="center" valign="middle" style="background-color:#eee;"|E/F
|valign="middle"|
E element 바로 아래의 F element align="center" valign="middle" style="background-color:#eee;" valign="middle" E element 아래의 F element align="center" valign="middle" style="background-color:#eee;" valign="middle" 최소 하나의 F element를 포함하는 E element align="center" valign="middle" style="background-color:#eee;" valign="middle" E element 아래의 모든 element align="center" valign="middle" style="background-color:#eee;" valign="middle" E element의 부모 element align="center" valign="middle" style="background-color:#eee;" valign="middle" E element중 attr attribute의 값이 val인 element
|}
jQuery 사용법
Core
0, .get(0) : element의 집합에서 첫번째(0) element
.get() : JavaScript 배열 객체를 반환 한다.
.size() : element 집합의 크기
.index(element) : element의 인덱스 (0, 1, 2, ...)
$(~)
$('html') : html 문을 생성 한다.
jQuery Object Accessors
Data Cache
Plugins
Interoperability
Selectors
Basics
Hierarchy
Basic Filters
Content Filters
Visibility Filters
Attribute Filters
Child Filters
Forms
Form Filters
Attributes
Attr
Class
HTML
Text
Value
Traversing
Filtering
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center"
|-
|width="20%" align="center" valign="middle" style="background-color:#eee;"|함수
|width="80%" align="center" valign="middle" style="background-color:#eee;"|함수 설명 |- |align="center" valign="middle" style="background-color:#eee;"|선택 |valign="middle"|eq(index) : index 번째 element를 반환, index는 0, 1, 2, ...
slice(start, end) : start에서 end까지 추출 한다, start는 0, 1, 2, ...
hasClass(class) : class를 가진 element를 반환
not(selector) : selector에 해당하지 않는 모든 element를 반환 한다.
filter(selector) : selector로 필터링 한다.
filter(func) : Filter로 사용할 function을 사용하여 필터링 한다. align="center" valign="middle" style="background-color:#eee;" valign="middle" elector에 해당하는 element가 있을 경우 true 반환 align="center" valign="middle" style="background-color:#eee;" valign="middle" 모든 element에 대해서 callback 함수를 적용 한다. 함수 내에서 element를 지정하기 위해 this를 사용 한다.
|}Finding
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center"
|-
|width="20%" align="center" valign="middle" style="background-color:#eee;"|함수
|width="80%" align="center" valign="middle" style="background-color:#eee;"|함수 설명 |- |align="center" valign="middle" style="background-color:#eee;"|add(selector) |valign="middle"|선택된 것을 추가 한다. align="center" valign="middle" style="background-color:#eee;" valign="middle" selector에 해당하는 element align="center" valign="middle" style="background-color:#eee;" valign="middle" - align="center" valign="middle" style="background-color:#eee;" valign="middle" siblings(selector) : 형제 element를 포함한 모든 element
next(selector) : 바로 다음 element
nextAll(selector) : 모든 다음 element
prev(selector) : 바로 이전 element
prevAll(selector) : 모든 이전 element align="center" valign="middle" style="background-color:#eee;" valign="middle" parent(selector) : 바로 위 부모 element
parents(selector) : root element를 제외한 모든 부모 element
children(selector) : 자식 element
|}Chaining
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center"
|-
|width="20%" align="center" valign="middle" style="background-color:#eee;"|함수
|width="80%" align="center" valign="middle" style="background-color:#eee;"|함수 설명 |- |align="center" valign="middle" style="background-color:#eee;"|end() |valign="middle"|이전의 확장 집합으로 되돌아 감 align="center" valign="middle" style="background-color:#eee;" valign="middle" 지금 확장 집합과 이전 확장 집합을 하나로 합침
|}
Manipulation
Changin Contents
Inserting Inside
Inserting Outside
Inserting Around
Replacing
Removing
Copying
attr(name), attr(name, value), removeAttr(name)
addClass(~), removeClass(~), toggleClass(~), hasClass(~)
css(name), css(name, value)
$("*").css("border", "1px solid #ff0000"); each(function(pos) {this.~});
insertAfter(~), insertBefort(~), append(~), appendTo(~), prependTo(~)
html(~), add(~), , text(~), empty(), wrapInner(~), remove(), WrapAll(~), wrap(~)
show(), hide()
get(), get(0)
filter(~), end(), slice(s, e)
clone()
width(~), height(~), offset(~)
val(), val(~) bind(eventType, function(event) {~}); unbind(~, ~), one(~, ~)
getScript(url), getScript(url, function)
load(url, parameters, callback = function(data, state))
serialize(), serializeArray()
get(url, parameters, callback), callback = function(data) {~}
post(url, parameters, callback), callback = function(data) {~}
getJSON(url, parameters, function(data, state))CSS
.addClass('~')
CSS
Positioning
Height and Width
Events
Event Handling
Interaction Helpers
Event Helpers
자동 실행
Page가 로드될 때 자동으로 실행될 함수 정의
$(document).ready(function () {
});
$(function (jQuery) {
});
jQuery(document).ready(function ($) {
});Effects
Basics
Sliding
Fading
Custom
Ajax
Ajax Requests
Ajax Events
Misc
Utilities
User Agent
Array and Object operations
Test operations
String operations
Internals
Data Cache
Ajax
Form 관리
입력 데이터 검사
$('form').submit(function() {
var data = $(this).serialize(); //--- Get 방식의 파라메터를 생성
var dataObj = $(this).serializeArray(); //--- jQuery 배열 생성
if($('#txtName').val() == '') {''
alert("이름을 입력하세요.");
return false;
}
else {
return true;
}
});Field값 조회 및 지정,
value = $('field').val();
$('field').val(value);
jQuery("#confirm_terms_of_use").prop("checked", jQuery("#confirm_all").prop("checked"));
Html 또는 Text 조회 및 변경
value = $('element').text();
$('element').text();
value = $('element').html();
$('element').html();HTML 로딩 후 실행
$(function (jQuery) {
});
참고 문헌
jQuery Plugin
jQuery Plugin 제작
pnusplugin 라는 이름의 jQuery Plugin을 제작해 보자.
jquery.pnusplugin.js
(function($) {
//--- this. 현재의 jQuery 개체를 가짐
$.fn.myPlugin = function() {
};
})(jQuery);pnusplugin 사용법
$(~).myPlugin();참고 문헌
Form Plugin
Demensions Plugin
Live Query Plugin
UI Plugin
JavaScript 파일
ui.mouse.js
ui.draggable.js
ui.draggable.ext.jsUI Plugin 함수
draggable(options)
draggableDestroy()
draggableDisable()
draggableEnable()
droppable(options)
droppableDestroy()
droppableDisable()
droppableEnable()
기타 UI
Accordion, Tabs, Table
Calendar, Dialog, SliderSplitter Plugin
참조: [http://methvin.com/splitter/ Splitter Plugin], <- OLD Splitter Plugin
jQuery Grid Plugin
jQuery wdCalendar Plugin
jQuery 2.1.1
Properties
expando
isReady : true. jQuery를 사용할 준비가 됨
guid
readyWait
active
Objects
fn = jQuery.prototype
event 객체 (4058 line)
global : {}
props : altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which
fixHooks : {}
keyHooks :
mouseHooks :
fix :
special :
simulate :
add(elem, types, handler, data, selector) :
remove() :
trigger() :
dispatch(event) :
handlers(event, handlers) :
support
expr
cssHooks
cssNumber
cssProps
easing
timers
attrHooks
propFix
propHooks
valHooks
lastModified
etag
ajaxSettings
offset
Functions
jQuery(selector, context) 생성자 (2708 line)
constructor(selector, context) : jQuery와 동일한 함수
context : context 저장
selector : '', selector 저장
length : 0
jquery : '2.1.1', 버전
인자가 없을 경우 : jQuery 객체를 반환
selector가 함수일 경우
rootjQuery.ready가 있는 경우, window.document 로딩후 함수 실행
rootjQuery.ready가 없는 경우, selector(jQuery) 실행
selector.nodeType이 있는 경우, selector를 context에 저장한 후 반환
기본 함수
isFunction(obj) : true. obj의 type이 함수임
type(obj) : obj의 상세 type을 소문자로 반환
obj가 null인 경우에는 "null" 반환
string, number, boolean
function : function
object : boolean number string array date regexp object error
isArraylike(obj) : true. 배열처럼 사용할 수 있는 객체임
makeArray(arr, results) : results라는 배열에 arr를 추가
merge(first, second) : first에 seconde를 병합하여 반환
Element 관련 함수
ready(wait) : 3391
on(types, selector, data, fn, one)
one(types, selector, data, fn) : event를 1번만 실행
off(types, selector, fn)
trigger(type, data) : 모든 Element에 대해서 event 등록
triggerHandler(type, data) : context에 event 등록
toArray() : this.slice(), 배열 형태의 복사본을 반환
get(num) : 모든 Element 또는 num으로 지정한 Element 반환
pushStack(elems) : ??? merge 먼저 확인
each(callback, args) : ??? each(?, callback, args) 먼저 확인
map(callback) : ??? 142 line
slice :
first :
last :
Sizzle.js
참고 문헌
Plugin
[http://www.aptana.com/ Aptana], Aptana jQuery plugin
YUI, jQuery, dojo, ext, mootools
분류: JavaScript
HTML5
Spring