"JQuery"의 두 판 사이의 차이
둘러보기로 가기
검색하러 가기
잔글 (→Objects) |
잔글 |
||
300번째 줄: | 300번째 줄: | ||
*Ajax | *Ajax | ||
− | ==Form 관리== | + | == Form 관리 == |
+ | |||
*입력 데이터 검사 | *입력 데이터 검사 | ||
+ | |||
$('form').submit(function() { | $('form').submit(function() { | ||
− | + | var data = $(this).serialize(); //--- Get 방식의 파라메터를 생성 | |
− | + | var dataObj = $(this).serializeArray(); //--- jQuery 배열 생성 | |
− | + | ||
− | + | if($('#txtName').val() == '') {'' | |
− | + | alert("이름을 입력하세요."); | |
− | + | return false; | |
− | + | } | |
− | + | else { | |
− | + | return true; | |
− | + | } | |
}); | }); | ||
*Field값 조회 및 지정, | *Field값 조회 및 지정, | ||
+ | |||
value = $('field').val(); | value = $('field').val(); | ||
$('field').val(value); | $('field').val(value); | ||
+ | jQuery("#confirm_terms_of_use").prop("checked", jQuery("#confirm_all").prop("checked")); | ||
+ | |||
*Html 또는 Text 조회 및 변경 | *Html 또는 Text 조회 및 변경 | ||
+ | |||
value = $('element').text(); | value = $('element').text(); | ||
$('element').text(); | $('element').text(); | ||
327번째 줄: | 333번째 줄: | ||
*참고 문헌 | *참고 문헌 | ||
+ | |||
:*[http://www.sqler.com/390796 jQuery Event] | :*[http://www.sqler.com/390796 jQuery Event] | ||
2016년 7월 20일 (수) 18:08 판
자바 스크립트 라이브러리로 Prototype과 대등한 사용율을 보이고 있는 jQuery를 정리 한다.
- 홈페이지 : http://jquery.com/
- jQuery UI
- jQuery API, JQuery Plugin
- Mobile
- 라이센스 :
- 플랫폼 : 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
Selector | Selector 설명 |
input type에 따라 선택 |
|
활성, 선택 여부로 선택 |
|
:animated |
|
:contains(val) |
|
:header |
|
:not(filter) |
|
:parent |
|
XPath 정의 Selector
- XPath : XML Path Language
- XSLT와 XPointer 기반의 XML 문서 요소들에 대한 구조적인 Addressing 기법 제공
- XPath 1.0 : 1999.11
- XPath Selectors
- XPath에서 계층 구조
- Ancestor
- Preceding, Parent, Following
- Preceding-sibling, Self, Following-sibling
- Child
- Descendant
Selector | Selector 설명 |
E/F |
|
E//F |
|
E[@F] |
|
E/* |
|
E/.. |
|
E[@attr=val] |
|
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
함수 | 함수 설명 |
선택 |
|
is(selector) |
|
map(callback) |
|
- Finding
함수 | 함수 설명 |
add(selector) |
|
find(selector) |
|
contents() | |
이전/다음 |
|
부모/자식 |
|
- Chaining
함수 | 함수 설명 |
end() |
|
andSelf( |
|
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
- Page가 로드될 때 자동으로 실행될 함수 정의
$(document).ready(function () { }); $(function (jQuery) { });
- Event Handling
- Interaction Helpers
- Event Helpers
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();
- 참고 문헌
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
- 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
- 참고 문헌
Splitter Plugin
- 참조: 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
- jQuery vs. dojo
- Aptana, Aptana jQuery plugin
- JQuery 관련 링크 모음
- YUI, jQuery, dojo, ext, mootools
- JavaScript/jQuery
- jQuery 추천 플러그인 50선, 2010.5