2014-04-11 3 views
15

DOM 요소를 검색 할 때 jQuery가 리턴 오브젝트를 작성하는 방법을 이해하려고합니다. 나는 근원을 살펴 봤지만, 이해할 수 있는지 완전히 확신 할 수 없으며, 여기 누군가가 나에게 약간의 통찰력을 줄 수 있기를 바랬다.jQuery 리턴 오브젝트 이해하기

jQuery DOM을 쿼리 할 때 jQuery는 일치하는 DOM 요소를 찾은 다음 요소의 인덱스를 새 객체의 키로 사용하여 일치하는 DOM 요소를 객체로 추가합니다. this 반환

if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { 
    for (match in context) { 
     // Properties of context are called as methods if possible 
     if (jQuery.isFunction(this[ match ])) { 
      this[ match ](context[ match ]);  
      // ...and otherwise set as attributes 
     } else { 
      this.attr(match, context[ match ]); 
     } 
    } 
}  
return this; 

모든 방법을 포함하는 전체의 jQuery 오브젝트를 반환한다. 내가 지금이 시점까지 가지고 있니?

이제는 css, find, ajax, hide 등과 같은 모든 기능이 나타납니다. jQuery.fn 객체에 있습니다. 어떻게 든

(그리고 나는 이것이 내가 보이지 않아요 어디라고 생각합니다),이 기능은하지 DOM 요소 자체에 있지만, 같은 CSS를 사용하여 access.js https://github.com/jquery/jquery/blob/master/src/core/access.js

var access = jQuery.access = function(elems, fn, key, value, chainable, emptyGet, raw) { 

을 통해,라고 예를 들어, 우리가

jQuery.extend({ 
    css: function(elem, name, extra, styles) {... 

jQuery.fn.extend({ 
css: function(name, value) { 
     return access(this, function(elem, name, value) { 
      var styles, len, 
       map = {}, 
       i = 0; 

      if (jQuery.isArray(name)) { 
       styles = getStyles(elem); 
       len = name.length; 

       for (; i < len; i++) { 
        map[ name[ i ] ] = jQuery.css(elem, name[ i ], false, styles); 
       } 

       return map; 
      } 

      return value !== undefined ? 
       jQuery.style(elem, name, value) : 
       jQuery.css(elem, name); 
     }, name, value, arguments.length > 1); 

내가 나는 우리가 그 호출 jQuery.fn.extend.css 방법에 $('div').css(...)를 호출하는 거지, 거기에서, 액세스 메소드가 호출되는 방법입니다없는 것 같아 acc와는 다른 서명 핵심 jQuery에서 초기화 된 ess 메소드 우리는 지속적으로 jQuery[0],jQuery[1]를 교체하는 경우

또한, 어떻게 내가 가질 수있다 : 그들은 모두 같은 jQuery를 개체를 반환하는 경우

var divs = $('div'); 
var spans = $('span'); 

문서 태그의 두 가지 설정을 유지? 나는 그 물체가 업데이트 될 것이라고 생각했다.

나는 이것이 어떻게 작동하는지 완전히 오해하고 있습니까? JQuery와 DOM 쿼리 할 때 원본을 판독 수집 할 수있는 것과

+0

디버거에서 "단계별"접근은 어떻게됩니까?': /' – Stphane

답변

2

는 JQuery와는 DOM 요소 일치 찾은 다음의 키로서 요소의 인덱스를 사용하여 목적으로 유사한 DOM 요소를 추가 새 개체

예. jQuery 인스턴스는 기본적으로 배열과 같은 객체이다.

if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { 
    for (match in context) { 
     // Properties of context are called as methods if possible 
     if (jQuery.isFunction(this[ match ])) { 
      this[ match ](context[ match ]);  
      // ...and otherwise set as attributes 
     } else { 
      this.attr(match, context[ match ]); 
     } 
    } 
}  
return this; 

하지만이 코드의 부분을 인용에서 발생하지거야. 여기서 볼 수있는 것은 jQuery(html, attributes) signature을 처리하는 코드입니다. 두 번째 인수가 객체이고 첫 번째가 독립형 HTML 태그 인 경우 해당 메소드를 호출하거나 새 컬렉션의 속성을 설정합니다 ( this).

이것을 반환하면 모든 메소드가 포함 된 전체 jQuery 객체가 반환됩니다. 이제는 css, find, ajax, hide 등의 모든 기능이 나타납니다. jQuery.fn 개체에 있습니다.

예. jQuery 생성자가 반환하는 객체는 $.fn prototype object에서이 메소드를 상속받습니다. 어떻게 든

(그리고 나는 이것이 내가 보이지 않아요 어디라고 생각합니다),이 기능 이 아니라 DOM 요소 자체에 있지만, access.js 통해이라고 https://github.com/jquery/jquery/blob/master/src/core/access.js

access 내부 도우미 함수 일뿐입니다. 모든 jQuery 메서드는 jQuery 인스턴스에서 호출됩니다.

예로 CSS를 사용하여, 우리는

jQuery.extend({ 
    css: function(elem, name, extra, styles) {... 

jQuery.css() 방금 ​​계산 CSS 값들을 얻기위한 "정적"내부 도우미 함수있다. 직접 직접 사용하지 마십시오.

jQuery.fn.extend({ 
    css: function(name, value) { 
     return access(this, function(elem, name, value) { 
      … 
     }, name, value, arguments.length > 1); 
    } 

내가 나는 우리가 ('DIV')를 $를 호출 거지 어떻게되어 누락 생각합니다. CSS (...)를 즉 jQuery.fn.extend.css 방법

을 호출하기

jQuery.fn.extend.css 방법이 없습니다. jQuery.fn.extend()에 대한 호출은 jQuery.fn.css 메서드를 정의합니다. 그리고 이것은 여러분이 호출하는 방법 일뿐입니다. 프로토 타입 상 $('div')에 의해 상속되었습니다.

그리고 거기에서 액세스 메소드가 코어 jQuery에서 초기화 된 액세스 메소드 과 다른 서명으로 호출되고 있습니까?

아니, 왜 그렇게 생각하십니까? 우리는 지속적으로 jQuery를 [0], jQuery를 교체하는 경우 또한

// the signature: 
access = function(elems, fn, key, value, chainable, emptyGet, raw) 
// the call: 
access(this, // array-like collection 
     function(…){…}, // callback 
     name, // string 
     value, // whatever 
     arguments.length > 1 // boolean whether it's a getter 
     // undefined, implicit 
     // undefined, implicit 
    ) 

, [1]

아니, 우리가하지? 어디서 봤니?

어떻게 내가 가질 수 있다는 것입니다 : var divs = $('div'); var spans = $('span'); 문서 태그의 두 가지 설정을 유지는 같은 jQuery를 객체를 반환 모두 을 경우?

아니요. 두 호출 모두 새 jQuery 인스턴스를 작성합니다.

개체가 업데이트 될 것으로 생각했습니다.

아니요, jQuery 인스턴스는 꽤 변하지 않습니다.

+0

Bergi에게 감사드립니다. 그래서 당신이 dom 쿼리를 할 때마다 jQuery가 새로운 jQuery 인스턴스를 생성한다고 생각하는 것이 맞습니까? 그건 나에게 매우 효율적으로 보이지 않는다. – pedalpete

+1

글쎄, 어쨌든 DOM 쿼리는 그렇게하지 않아야한다. 새로운 jQuery 인스턴스의 오버 헤드는 실제로 쿼리 자체에 비해 매우 작으며 불변 콜렉션을 생성하면 체인 및 기능 구성이 쉬워집니다. 돌연변이로 인해 추한 벌레가 생길 수 있습니다. – Bergi

+0

설명해 주셔서 감사합니다. 실제로 jQuery를 사용하지는 않지만 jQuery와 비슷한 시스템을 구축하면 스타일을 따라 배우기를 원합니다. – pedalpete

관련 문제