jQuery API List - 확장 집합 관련/

Posted by 단순대왕 jQuery : 2014. 7. 31. 14:37

1. 확장된 엘리먼트 관련

확장 집합의 크기 결정

size()


확장 집합에서 엘리먼트 획득하기

get(idx)

=> toArray()

eq(idx)

first()

last()

index(element)


확장 엘리먼트 집합 재편성

add(expression, context): 새로운 엘리먼트를 확장 집합에만 추가한다. 새로운 엘리먼트를 DOM에 

                                    추가하지 않는다. DOM에 엘리먼트를 추가하는 명령어는 append()를 사용한다.

not()

filter() 

-> $('td').filter(function(){return this.innerHTML.match(/^\d+$/)}); 숫자 값을 가진 모든 <td>

slice(): 확장집합의 엘리먼트를 반환하는 get()과는 다르게 새로운 확장 집합을 반환한다.

has()

map(): 확장 집합의 엘리먼트를 순회하면서 콜백 함수를 실행. 반환된 값을 모은다.

-> var allIDs = $('div').map(function(){ return (this.id == undefined) ? null : this.id; }).get();

each()

-> $('img').each(function(){ this.alt = 'image['+n+']의 id는 ' + this.id + ' 이다'; });


'jQuery' 카테고리의 다른 글

jquery JSON - stringify/  (0) 2014.08.29
jQuery 다시 보기  (0) 2014.07.31
jQuery jqXHR 객체  (0) 2014.07.18
jQuery Ajax Sample  (0) 2014.07.17
jQuery Ajax 사용하기  (0) 2014.07.17
  

jQuery API - triggerHandler/ toggle/ proxy/ delegate/

Posted by 단순대왕 jQuery : 2014. 7. 16. 16:38

.triggerHandler()

.triggerHandler( eventType [, extraParameters ] ) Returns: Object

Description: Execute all handlers attached to an element for an event.

The .triggerHandler() method behaves similarly to .trigger(), with the following exceptions: [더보기]


.toggle()

.toggle( [duration ] [, complete ] ) Returns: jQuery

Description: Display or hide the matched elements.


다른 예제] 클릭할 때마다 두 개의 다른 리스너를 바꿔가며 호출

$('#test').toggle(

function(event){ alert("on"); },

function(event){  alert("off"); }

);


$.proxy()

Description: Takes a function and returns a new one that will always have a particular context.

jQuery.proxy( function, context ) Returns: Function

jQuery.proxy( context, function_name ) Returns: Function


.delegate()

.delegate( selector, eventType, handler ) Returns: jQuery

.delegate( selector, eventType, eventData, handler )

Description: Attach a handler to one or more events for all elements that match the selector, 

now or in the future, based on a specific set of root elements.


.delegate() has been superseded by the .on() method. For earlier versions, 

however, it remains the most effective means to use event delegation. 

More information on event binding and delegation is in the .on() method. 

예)

$( "table" ).delegate( "td", "click", function() {

$( this ).toggleClass( "chosen" );

});

is equivalent to the following code written using .on():

$( "table" ).on( "click", "td", function() {

$( this ).toggleClass( "chosen" );

});

'jQuery' 카테고리의 다른 글

jQuery Ajax Sample  (0) 2014.07.17
jQuery Ajax 사용하기  (0) 2014.07.17
jQuery 확장 메소드 만들기  (0) 2014.07.16
jQuery Deprecated API  (0) 2014.07.15
jQuery 사용자 정의 함수 만들기  (0) 2014.07.15
  

jQuery Deprecated API

Posted by 단순대왕 jQuery : 2014. 7. 15. 17:41

Category: Deprecated 1.3

jQuery.boxModel

States if the current page, in the user’s browser, is being rendered using the W3C CSS Box Model. This property was removed in jQuery 1.8. Please try to use feature detection instead.


jQuery.browser

Contains flags for the useragent, read from navigator.userAgent. This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.


Category: Deprecated 1.7

deferred.isRejected()

Determine whether a Deferred object has been rejected.


deferred.isResolved()

Determine whether a Deferred object has been resolved.


.die()

Remove event handlers previously attached using .live() from the elements.

=> use of .die() (and its complementary method, .live()) is not recommended. 

Instead, 

=> use .off() to remove event handlers bound with .on()


jQuery.sub()

Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.


.live()

Attach an event handler for all elements which match the current selector, now and in the future.

=> Use .on() to attach event handlers.

$( selector ).live( events, data, handler );        // jQuery 1.3+

$( document ).delegate( selector, events, data, handler );      // jQuery 1.4.3+

$( document ).on( events, selector, data, handler );              // jQuery 1.7+


.selector

A selector representing selector passed to jQuery(), if any, when creating the original set.


Category: Deprecated 1.8

.andSelf() 

Add the previous set of elements on the stack to the current set.


deferred.pipe()

Utility method to filter and/or chain Deferreds.


.error()

Bind an event handler to the “error” JavaScript event.


.load()

Bind an event handler to the “load” JavaScript event.


.size()

Return the number of elements in the jQuery object.


.toggle()

Bind two or more handlers to the matched elements, to be executed on alternate clicks.


.unload()

Bind an event handler to the “unload” JavaScript event.


Category: Deprecated 1.10

 .context

The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.


'jQuery' 카테고리의 다른 글

jQuery API - triggerHandler/ toggle/ proxy/ delegate/  (0) 2014.07.16
jQuery 확장 메소드 만들기  (0) 2014.07.16
jQuery 사용자 정의 함수 만들기  (0) 2014.07.15
jQuery 확장  (0) 2014.07.15
jQuery Utility API  (0) 2014.07.15
  

jQuery Utility API

Posted by 단순대왕 jQuery : 2014. 7. 15. 10:39

$.fx.off 

- 효과를 활성화하거나 비활성화한다.

$.support 

- 지원하는 기능의 세부사항을 제공한다.

$.browser 

- 상세한 브라우저 정보를 제공한다.

$.trim(value) 

- 문자열 다듬기. 공백 문자열을 제거하고 결과를 반환

- $('#someField').val($.trim($('#someField').val())); 

$.each(container, callback) 

- 프로퍼티와 컬렉션 순회

- $.each(anArray, function(배열의 인덱스 또는 객체 프로퍼티 이름, 배열의 아이템 또는 프로퍼티 값){

   });

* DOM 엘리먼트 확장 집합의 엘리먼트를 순회하는 each() method도 있음

$.grep(array, callback, invert) 

- 배열 필터링

- 콜백 함수의 반환 값은 값이 $.grep() 함수의 값으로 반환된 새로운 배열로 수집될지 아닐지 결정

- var zips = $.grep(

   orgArray, 

   function(현재 데이터 값, 원본 배열의 인덱스){ return value.match(/^\d{5}(-\d{4})?$/) != null;}, 

   true);

$.map(array, callback)

- 배열 변환하기

- 함수 호출로 반환된 값은 새로운 배열로 수집

- var oneBased = $.map([0,1,2,3,4], function(현재 데이터 값, 원본 배열의 인덱스){return value+1;});

$.inArray(value, array)

- 전달된 값이 처음 나타나는 위치 인덱스를 반환

- var index = $.inArray(2, '1,2,3,4,5]);

$.makeArray(Object)

- 전달된 유사 배열 객체를 자바스크립트 배열로 변환

- 유사 배열 객체: var images = document.getElementsByTagName("img"); // NodeList

$.unique(array)

- DOM 엘리머트 배열이 주어지면, 원본 배열에서 고유한 엘리먼트로만 구성된 배열을 반환

$.merge(array1, array2)

- 두 번째 배열의 값들을 첫 번째 배열에 추가하고, 그 결과를 반환

- 첫 번째 배열을 수정되어 반환

- $.merge([1,2,3,4,5], [6,7,8,9,0]);

$.extend(deep, target, source1, source2, ... sourceN)

- target에 전달된 객체를 함께 전달된 나머지 객체의 프로퍼티를 사용하여 확장

- deep: 깊은 복사 또는 얕은 복사를 결정

- target: 원본 객체의 프로퍼티를 복사하여 프로퍼티가 추가되는 객체

- source: target 객체에 추가되는 프로퍼티를 가진 하나 이상의 객체

var object1 = {  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97 };

var object2 = {  banana: { price: 200 },  durian: 100};

$.extend( object1, object2 );

// {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

// 중복되는 객체가 있으면 object2 기준, object1 + object2

$.extend( true, object1, object2 );

// {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

// 중복되는 프로퍼티가 있으면 object2 기준, object1 + object2

$.extend( false, object1, object2 );

// {"apple":0,"banana":{"weight":52,"price":100},"cherry":97}

// 중복되는 모든 값에 object1 기준, object1

$.param(param, traditional)

- 쿼리 문자열로 인코딩 (encodeURIComponent())

- $.param({'a thing':'it&s=value', 'another thing':'another value'});

// a+thing=it%26s%3Dvalue&another+thing=another+value

- traditional: 중첩된 구조의 쿼리 문자열을 구성

$.isArray(o)

- o가 자바스크립트 배열이면 true/ 유사 배열이면 false

$.isEmptyObject(o)

- o가 자바스크립트 프로퍼티가 없는 객체이면 true

$.isFunction(o)

- o가 자바스크립트 함수이면 true

$.isPlainObject(o)

- o가 객체 리터럴({}) 이나 new Object()로 생성되었다면 true

$.isXMLDoc(node)

- node가 XML 문서이거나, XML 문서 안에 위치한 노드일 경우 true

$.noop

- 아무것도 하지 않는다.

$.contains(container, containee)

- 엘리먼트가 또 다른 엘리먼트의  DOM계층에 포함되어 있는지 검사

$.data(element, name, value)

- 전달된 엘리먼트에 데이터를 명시한 이름으로 저장하거나 가져온다.

- value: 값이 생략되면 전달된 이름에 맞는 데이터를 가져온다.

- $('div').data("test", {first:'16', last:'pizza'});

  $('span.first').text($(div).data(test).first);

$.removeData(element, name)

- 전달된 엘리먼트에 저장된 데이터를 제거한다.

$.proxy(function, proxy)

$.proxy(proxy, property)

- 함수가 호출될 때 객체를 미리 함수에 바인딩할 수 있다.

- 바인딩된 객체는 해당 함수의 컨텍스트가 된다.

- function: 프록시 객체로 미리 바인딩될 함수

- proxy: 프록시 함수 컨텍스트로 바인딩될 객체

- property: 바인드된 함수를 포함하는 프록시로 전달된 객체에 위치한 프로퍼티의 이름

- $('#testButton, #buttonContainer').click(

    function(){  say(this.id);  }

);

$('#testButton, #buttonContainer').click(

    $.proxy(function(){  say(this.id);  }, $('#controlPanel')[0]) 

);

- $.proxy()를 가장 빈번하게 사용하는 예는 객체의 메소스를 핸들러로 바인딩하려는 때이며, 메소드를

  지닌 객체가 마치 메소드를 직접 호출한 것과 동일하게 핸들러의 함수 컨텍스트로 할당

- var o = {  id:'o', hello:function(){alert(this.id);  }

- $(해석가능한  표현식).click(o.hello); // 함수 컨텍스트는 o가 아닌 현재 버블링 엘리먼트

- $(해석가능한 표현식).click(  $.proxy(o.hello, o)  ); // 함수 컨텍스트는 o

또는

- $(해석가능한 표현식).click(  $.proxy(o, 'hello')  ); // 함수 컨텍스트는 o

$.parseJSON(json)

- 전단된 JSON 문자열을 파싱하여, 그 결과(객체)를 반환한다.

$.globalEval(code)

- 전역 컨텍스트에서 전달된 자바스크립트 코드를 평가한다.

$.getScript(url, callback)

- 동적으로 스크립트 로드하기

- url 매개변수가 명시한 서버에 GET 요청을 사용하여 스크립트를 가져오며, 성공시 콜백함수 실행


'jQuery' 카테고리의 다른 글

jQuery 확장 메소드 만들기  (0) 2014.07.16
jQuery Deprecated API  (0) 2014.07.15
jQuery 사용자 정의 함수 만들기  (0) 2014.07.15
jQuery 확장  (0) 2014.07.15
jQuery 새로운 기술이 아니라 새로운 생각  (0) 2014.07.14
  
 «이전 1  다음»