JQuery

오픈소스 비즈니스 컨설팅
둘러보기로 가기 검색하러 가기

자바 스크립트 라이브러리로 Prototype과 대등한 사용율을 보이고 있는 jQuery를 정리 한다.


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에 따라 선택
  • :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
활성, 선택 여부로 선택
  • :enabled : 활성화된 element
  • :disabled : 비활성화된 element
  • :visible : 눈에 보이는 Element
  • :hidden : 숨겨진 element

  • :selected : 선택된 element
  • :checked : 선택된 체크박스와 라디오 버튼
:animated
  • 현재 애니메이션이 적용된 element
:contains(val)
  • val을 포함하는 element
:header
  • <h1>부터 <h6>까지
:not(filter)
  • filter에 해당하는 element를 제외한 element
:parent
  • 자식을 가지는 element

XPath 정의 Selector

  • XPath : XML Path Language
  • XSLT와 XPointer 기반의 XML 문서 요소들에 대한 구조적인 Addressing 기법 제공
  • XPath 1.0 : 1999.11
  • Ancestor
  • Preceding, Parent, Following
  • Preceding-sibling, Self, Following-sibling
  • Child
  • Descendant
Selector Selector 설명
E/F
  • E element 바로 아래의 F element
E//F
  • E element 아래의 F element
E[@F]
  • 최소 하나의 F element를 포함하는 E element
E/*
  • E element 아래의 모든 element
E/..
  • E element의 부모 element
E[@attr=val]
  • 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
함수 함수 설명
선택
  • 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을 사용하여 필터링 한다.
is(selector)
  • elector에 해당하는 element가 있을 경우 true 반환
map(callback)
  • 모든 element에 대해서 callback 함수를 적용 한다. 함수 내에서 element를 지정하기 위해 this를 사용 한다.
  • Finding
함수 함수 설명
add(selector)
  • 선택된 것을 추가 한다.
find(selector)
  • selector에 해당하는 element
contents()
이전/다음
  • siblings(selector) : 형제 element를 포함한 모든 element
  • next(selector) : 바로 다음 element
  • nextAll(selector) : 모든 다음 element
  • prev(selector) : 바로 이전 element
  • prevAll(selector) : 모든 이전 element
부모/자식
  • parent(selector) : 바로 위 부모 element
  • parents(selector) : root element를 제외한 모든 부모 element
  • children(selector) : 자식 element
  • 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

  • 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

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

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