JQuery 문서 원본 보기
←
JQuery
둘러보기로 가기
검색하러 가기
문서 편집 권한이 없습니다. 다음 이유를 확인해주세요:
요청한 명령은 다음 권한을 가진 사용자에게 제한됩니다:
사용자
.
이 문서는 편집하거나 다른 명령을 할 수 없도록 보호되어 있습니다.
문서의 원본을 보거나 복사할 수 있습니다.
자바 스크립트 라이브러리로 [[Prototype]]과 대등한 사용율을 보이고 있는 jQuery를 정리 한다. *홈페이지 : http://jquery.com/ :*[http://jqueryui.com/ jQuery UI] :*[http://api.jquery.com/ jQuery API], [http://plugins.jquery.com/ JQuery Plugin] :*Mobile ::*http://jquerymobile.com/, http://dealinium.com/deal/deal-of-the-day ::*http://www.jqtouch.com/ *다운로드 : http://docs.jquery.com/Downloading_jQuery :*[http://code.jquery.com/jquery-1.4.2.js jQuery 1.4.2] :*[http://code.jquery.com/jquery-1.4.2.min.js jQuery 1.4.2 min] *라이센스 : *플랫폼 : JavaScript *매뉴얼 : [http://visualjquery.com/ Visual jQuery 1.2.6] :*[http://docs.jquery.com/Main_Page Documentation] :*[http://docs.jquery.com/Tutorials Tutorials] <br> ==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=== *[[CSS3#CSS3_Selectors|CSS3 Selectors]] ===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;"|:animated |valign="middle"| *현재 애니메이션이 적용된 element |- |align="center" valign="middle" style="background-color:#eee;"|:contains(val) |valign="middle"| *val을 포함하는 element |- |align="center" valign="middle" style="background-color:#eee;"|:header |valign="middle"| *<h1>부터 <h6>까지 |- |align="center" valign="middle" style="background-color:#eee;"|:not(filter) |valign="middle"| *filter에 해당하는 element를 제외한 element |- |align="center" valign="middle" style="background-color:#eee;"|:parent |valign="middle"| *자식을 가지는 element |} ===XPath 정의 Selector=== *XPath : XML Path Language :*XSLT와 XPointer 기반의 XML 문서 요소들에 대한 구조적인 Addressing 기법 제공 :*XPath 1.0 : 1999.11 *[http://api.jquery.com/category/selectors/#XPath_Selectors XPath Selectors] *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;"|E//F |valign="middle"| *E element 아래의 F element |- |align="center" valign="middle" style="background-color:#eee;"|E[@F] |valign="middle"| *최소 하나의 F element를 포함하는 E element |- |align="center" valign="middle" style="background-color:#eee;"|E/* |valign="middle"| *E element 아래의 모든 element |- |align="center" valign="middle" style="background-color:#eee;"|E/.. |valign="middle"| *E element의 부모 element |- |align="center" valign="middle" style="background-color:#eee;"|E[@attr=val] |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;"|is(selector) |valign="middle"| *elector에 해당하는 element가 있을 경우 true 반환 |- |align="center" valign="middle" style="background-color:#eee;"|map(callback) |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;"|find(selector) |valign="middle"| *selector에 해당하는 element |- |align="center" valign="middle" style="background-color:#eee;"|contents() |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;"|andSelf( |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 로딩 후 실행 <pre style="font-family: monospace, Courier; padding: 1em; border: 1px solid rgb(221, 221, 221); color: black; background-color: rgb(249, 249, 249); line-height: 1.3em; font-size: 14px;">$(function (jQuery) { });</pre> *참고 문헌 :*[http://www.sqler.com/390796 jQuery Event] ==jQuery Plugin== ===jQuery Plugin 제작=== pnusplugin 라는 이름의 jQuery Plugin을 제작해 보자. *jquery.pnusplugin.js (function($) { //--- this. 현재의 jQuery 개체를 가짐 $.fn.myPlugin = function() { }; })(jQuery); *pnusplugin 사용법 $(~).myPlugin(); *참고 문헌 :*[http://honey83.cafe24.com/101 플러그인/저작, 2010.3] ===Form Plugin=== *http://jquery.com/plugins/project/form ===Demensions Plugin=== ===Live Query Plugin=== ===UI Plugin=== *http://jquery.com/docs/jquery.com/ui *JavaScript 파일 ui.mouse.js ui.draggable.js ui.draggable.ext.js *UI Plugin 함수 :*draggable(options) :*draggableDestroy() :*draggableDisable() :*draggableEnable() :*droppable(options) :*droppableDestroy() :*droppableDisable() :*droppableEnable() *기타 UI Accordion, Tabs, Table Calendar, Dialog, Slider *참고 문헌 :*http://docs.jquery.com/ui :*http://jquery.com/plugins ===Splitter Plugin=== *참조: [http://methvin.com/splitter/ Splitter Plugin], <- [http://methvin.com/jquery/splitter/default.html OLD Splitter Plugin] ===jQuery Grid Plugin=== *[http://www.trirand.com/blog/ jQuery Grid Plugin] ===jQuery wdCalendar Plugin=== *[http://www.web-delicious.com/jquery-plugins-demo/wdCalendar/docs/index.htm 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=== ==참고 문헌== *[[HTML5]] *[[CSS3]] *[[JavaScript]] *Plugin :*[http://paramquery.com/ jQuery Grid Plugin] *[http://www.sqler.com/378488 jQuery 강좌, 2011.05] *[http://younghoe.info/1078 jQuery vs. dojo] *[http://www.aptana.com/ Aptana], [http://www.bitstorm.org/edwin/jquery/ Aptana jQuery plugin] *[http://oblivion83.egloos.com/2891500 JQuery 관련 링크 모음] *YUI, jQuery, dojo, ext, mootools *[http://mytory.textcube.com/category/javascript/jQuery JavaScript/jQuery] *[http://blog.naver.com/PostView.nhn?blogId=seogi1004&logNo=110085431616&beginTime=0&jumpingVid=&from=search&redirect=Log&widgetTypeCall=true jQuery 추천 플러그인 50선, 2010.5] [[Category:JavaScript]] [[Category:HTML5]] [[Category:Spring]]
JQuery
문서로 돌아갑니다.
둘러보기 메뉴
개인 도구
로그인
이름공간
문서
토론
변수
보기
읽기
원본 보기
역사 보기
더 보기
검색
주요 메뉴
오픈소스 컨설팅
오픈소스
오픈소스 라이선스
오픈소스 커뮤니티
오픈소스 종류
오픈소스 현황
오픈소스 한글화
문자셋과 인코딩
Storage
Network
보안
고가용성
모니터링
오픈 API
오픈 서비스
Cloud
BigData
Android
산사랑 노트
둘러보기
인기 문서
최근 수정 문서
모든 문서
모든 분류
임의 문서
위키 사용법
자매 사이트
CMS
오비컨 홈페이지
오비컨 CMS
블로그
데모 - SuiteCRM
산사랑의 Twitter
산사랑의 Facebook
친구 사이트
공개SW 포털
OLIS
한국공개소프트웨어협회
AppCenter 지원본부
OLC
PSEG
개발자 블로그
블로터
개인 메뉴
메뉴 수정
양식함
도구
여기를 가리키는 문서
가리키는 글의 최근 바뀜
특수 문서 목록
문서 정보