jQuery의 선택기 및 컨텍스트의 여러 호출 방법에 대한 코드 예제에 대한 자세한 설명

먼저 다음 HTML 코드를 제공합니다:

<p id="parent" class="parent">
	 <p class="child">
	  child1
	</p>
	<p class="child">
	child2
	</p>
</p>
<p id="parent1" class="parent">
	 <p class="child">
	  child1
	</p>
	<p class="child">
	child2
	</p>
</p>

호출 방법 1: 두 번째 매개변수 컨텍스트는 DOM 요소입니다

var doms=$(".child",$("#parent")[0]);
console.log(doms);

이 때 두 번째 매개변수는 DOM 개체입니다. 인쇄 [p.child, p.child , prevObject: jQuery.fn.init[1], context: p#parent, selector: ".child"]
호출 방법 2: 두 번째 매개변수 컨텍스트는 jQuery 객체

var doms=$(".child",$($("#parent")[0]));
console.log(doms);

이때, 출력된 결과는 위와 같습니다. 첫 번째 경우와 동일합니다. [p.child, p.child, prevObject: jQuery.fn.init[1], context: p#parent, selector: ".child"]
Calling method 3: 두 번째 매개변수는 DOM 배열

var doms=$(".child",[document.getElementById("#parent"),document.getElementById("#parent1")]) 
console.log(doms);

호출 방법 4: 두 번째 매개변수는 jQuery 객체의 배열

var doms=$(".child",$(".parent")) 
console.log(doms);

이 방법의 결과는 세 번째 방법과 정확히 같습니다!
호출 방법 5: 전달된 매개변수 in은 함수이고, 준비된 함수가 호출되면 함수가 호출됩니다

 $(function()
  {
    console.log("dom ready");
  })

이제 소스 코드에서 이러한 상황을 분석합니다.

DOM이 전달되면

else if ( selector.nodeType ) {
		this.context = this[0] = selector;
		this.length = 1;
		return this;
		// HANDLE: $(function)
		// Shortcut for document ready
		}

DOM 요소가 전달되면 요소는 jQuery 객체에 직접 배치되는 동시에 길이도 늘어납니다!

jQuery 객체가 전달되면

if ( selector.selector !== undefined ) {
			this.selector = selector.selector;
			this.context = selector.context;
		}

jQuery 객체가 전달되면 jQuery 매개변수의 선택기와 컨텍스트도 직접적으로 적용됩니다. 새로 생성된 jQuery 객체에 캡슐화됩니다! 호출 방법은 $($ ('')) 와 같습니다.

함수가 전달되면

 else if ( jQuery.isFunction( selector ) ) {
			return typeof rootjQuery.ready !== "undefined" ?
			rootjQuery.ready( selector ) :
				// Execute immediately if ready is not present
				selector( jQuery );
		}

함수가 전달되면 $(에 직접 배치됩니다. document).ready()를 사용하여 실행을 기다립니다. Ready 함수가 없으면 바로 실행합니다(jQuery 프레임워크를 사용하면 Ready가 존재합니다!)
DOM 배열이나 jQuery 객체가 전달되면

return jQuery.makeArray( selector, this );

jQuery를 통해. makeArray 모든 매개변수를 객체로 캡슐화할 수 있지만 이 함수는 두 번째입니다. 각 매개변수의 기본값은 배열 객체이지만, 여기에서 jQuery 객체가 전달되면 최종 반환 결과는 jQuery 객체입니다. 따라서 이런 방식으로 전달한 모든 DOM 배열 또는 jQuery 객체를 새로운 jQuery 객체로 캡슐화하고 반환합니다. 이러한 방식의 호출은 다음과 같습니다.

 var $doms=$([document.getElementById('ql'),document.getElementById('fkl')]);
   //把上面的DOM数组封装到新创建的jQuery对象上
   console.log($doms);

다음 호출 방법은 가장 일반적으로 사용되는 방법입니다. 이 메서드에는 선택한 개체의 컨텍스트가 포함됩니다.

              else if ( !context || context.jquery ) {
				return ( context || rootjQuery ).find( selector );
			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return this.constructor( context ).find( selector );
			}

이 메서드는 $('li',$('ul')) 과 같습니다. 두 번째 매개변수가 jQuery 개체인 경우 find 메서드를 직접 호출하고, 그렇지 않으면 먼저 호출합니다. 두 번째 매개변수를 입력합니다. 매개변수가 2개인 DOM 개체는 jQuery 개체로 캡슐화되고 find 메서드가 호출되어 검색됩니다. 호출 메서드는 다음과 같습니다.

 var doms=$(".child",$(".parent")) ;
   //这时候我们会选择class为parent元素下的所有的class为child的元素集合
   //作为jQuery对象返回
   console.log(doms);

분명히 우리가 전달한 두 번째 매개변수는 jQuery 개체이므로 query의 경우 두 번째 매개변수가 DOM 배열이면 DOM 배열이 jQuery 객체로 캡슐화되어 쿼리를 위한 컨텍스트로 사용됩니다!

이번에 언급하고 싶습니다. 다시 이 호출 메소드(두 번째 매개변수는 DOM 배열일 수 있음)

var doms=$(".child",$(".parent")) 
console.log(doms);

이때 수행되는 것은 jQuery 객체의 find 인스턴스 메소드(Sizzle을 호출하여 완료)이므로 반환되는 것은 의 모든 하위 요소입니다. 선택기를 만족하는 DOM 배열의 각 DOM 객체. 그러나 이는 중복되지 않습니다!

위 내용은 jQuery의 선택기 및 컨텍스트의 여러 호출 방법에 대한 코드 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!