jQuery 구조 함수 init 매개 변수 분석
init: function( selector, context, rootjQuery ) {
...
}
이 방법은 세 개의 매개 변수를 받아들이는 것을 볼 수 있는데, 그 앞의 두 개의 매개 변수는 jQuery 방법으로 전달된 것이다
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
Selector는 원칙적으로 임의의 값을 입력할 수 있지만 모든 값이 의미가 있는 것은 아니다. undefined,DOM 요소, 문자열, 함수, jQuery 대상, 일반JavaScript 대상 등 몇 가지 유형만 유효하다. 이 매개 변수는 보통 기입하지만 기입하지 않아도 틀리지 않는다.
console.log($());
//[constructor: function, init: function, selector: "", jquery: "1.7.1", size: function…]
Context는 실행 상하문이나 실행 범위로 전송되지 않거나 DOM 요소, jQuery 대상, 일반 자바스크립트 대상 중 하나로 전송될 수 있습니다
파라미터 루트jQuery: 문서 대상을 포함하는 jQuery 대상입니다. 문서에 사용됩니다.getElementById () 검색에 실패했습니다. selector는 선택기 표현식이고 context가 지정되지 않았으며, selector가 함수인 경우 $(document) 입니다.
다음은 매개 변수에 따라 12가지 상황으로 나누어 하나씩 토론한다
1.selector는 false로 변환할 수 있습니다.
// Handle $(""), $(null), or $(undefined)
if ( !selector ) {
return this;
}
원본 코드의 주석은 이미 매우 명확하게 쓰여 있으며, 이 세 가지 상황일 때 직접적으로 Return은 어떠한 처리도 하지 않는다
2. 매개 변수 selector는 DOM 요소입니다.
예를 들어 $(document)이라는 쓰기
// Handle $(DOMElement)
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
}
dom 요소라면 노드 형식이 있을 것입니다. 이 노드를 jquery 대상의 첫 번째 요소로 만들고 상하문context에 값을 부여합니다.length 속성은 jQuery의 원형 속성입니다. 기본값은 0입니다.
//The default length of a jQuery object is 0
length:0, 여기에 요소가 하나 생기면 length 속성을 1로 수정합니다.return this 작업은 함수를 실행한 후에도 jQuery 대상이 되도록 합니다. 그러면 $(document) 와 유사하게 실행할 수 있습니다.each () 라는 체인이 호출되었습니다.최종적으로 얻은 이와 같은 {0:document,context:document,length:1...}대상, 사실 모든 상황은 마지막에 이런 형식의 대상이 된다. jQuery의 원형 속성과 방법을 제외하고는 얻은dom 노드를 아라비아 숫자에 따라 순서대로 배열하기 때문에 우리는 $(selector)[0]의 형식으로 $(selector)를 대체할 수 있다.get(0)으로dom 대상을 가져옵니다.예를 들면 다음과 같습니다.
<div/>
<div/>
<div/>
<script src="jquery-1.7.1.js"/>
<script>
console.log($('div'));
/*[div, div, div, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "div", constructor: function, init: function…]
0: div
1: div
2: div
context: document
length: 3
prevObject: jQuery.fn.jQuery.init[1]__proto__: jQuery[0]
selector: "div"
.
*/
</script>
</code></pre>
</div>
<p><strong>3. “body”</strong></p>
<p> body <br/> </p>
<div class="jb51code">
<pre><code>
// The body element only exists once, optimize finding it
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
</code></pre>
</div>
<p> 3 , ，$(‘body',document) “ ” <br/> </p>
<div class="jb51code">
<pre><code>
console.log($('body',document));
/*
jQuery.fn.jQuery.init[1]
0: body
context: document
length: 1
prevObject: jQuery.fn.jQuery.init[1]
selector: "body"
__proto__: jQuery[0]
*/
</code></pre>
</div>
<p> $('body') , ， body document ， document。 document.body ， document.body ？ js html ， ：</p>
<p><strong>$(function(){...})</strong></p>
<p> </p>
<p><strong>$(document).ready(function(){...})<br/> </strong> <br/> ，dom 。 html ：<br/> </p>
<div class="jb51code">
<pre><code>
<title/>
<script src="jquery-1.7.1.js"/>
<script>
$('body')
</script>
<div/>
<div/>
<div/>
</code></pre>
</div>
<p> jQuery selector、context document.body<br/> </p>
<div class="jb51code">
<pre><code>
console.log(selector+context+document.body);
// The body element only exists once, optimize finding it
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
</code></pre>
</div>
<p> ， ， bodyundefinednull null。 jQuery undefined ， document.body null ？ ， html </p>
<p> ， 。</p>
<p> ， 。</p>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
