주 콘텐츠 제목
주 제목
🎜>
jQuery.prototype.init 선택기 생성자 소스 코드 아이디어 analyze_jquery
- WBOY원래의
- 2016-05-16 17:42:091511검색
1. 소스코드 아이디어 분석 요약
요약:
jQuery의 핵심 아이디어는 간단히 "쿼리 및 운영 DOM"으로 요약할 수 있습니다. 오늘은 주로 jQuery.prototype을 분석하겠습니다. .init 선택기 생성자. 선택기 함수에서 매개변수를 처리합니다.
이 함수의 매개변수는 jQuery()===$()의 실행 함수에 있는 매개변수입니다. jQuery의 기본 프레임워크를 이해한 후 이 글을 다시 읽어보세요.
아이디어 분석:
다음은 jQuery의 여러 사용 사례입니다(dom 쿼리에 사용됨). 각 사례는 선택기 인스턴스(일반적으로 쿼리된 dom Node를 포함하는 jQuery 객체(nodeList 객체)라고 함)를 반환합니다.
1. $(""), $(null), $(undefine), $(false) 처리
매개변수가 위의 잘못된 값인 경우 jQuery 객체에 dom 노드가 포함되지 않습니다
2. $(DOMElement) 처리
매개변수가 노드 요소인 경우 jQuery 객체에는 매개변수 노드 요소가 포함되며, 속성값은 각각 매개변수 노드 요소로 추가되며, 컨텍스트 및 길이 속성은 1 및 []를 사용하여 jQuery 객체의 dom 노드에 액세스하는 사용법
예 2.1:
var obj = document.getElementById ('container'),
jq = $(obj)
console.log(jq.length) ; //1
console.log(jq.context); //obj
console.log(jq.[0]) //obj
3. HTML 문자열)
첫 번째 매개변수가 HTML 문자열인 경우 jQuery 객체에는 jQuery.clean 함수로 생성된 조각 문서 조각에 Childnodes 노드가 포함됩니다.
예 3.1:
var jqHTML = $('
첫 번째 매개변수(HTML 문자열)가 비어 있는 경우 단일 태그이고 두 번째 매개변수 컨텍스트는 비어 있지 않은 순수 객체입니다.
예 3.2:
var jqHTML = $(' ', { class: 'css-class', data-name: 'data-val' });
console.log(jqHTML.attr['class'] ); //css-class
console.log(jqHTML.attr['data-name']); //data-val
4. $(#id) 처리
첫 번째 매개변수가 # + 요소 ID인 경우 jQuery 객체에는 이 ID가 있는 유일한 요소 노드인
이 포함되어 있으며 컨텍스트를 추가합니다. 속성 값이 각각 문서, 매개변수 문자열, 1인 선택기, 길이 속성 및 사용자 속성 [] jQuery 객체에서 dom 노드에 액세스하는 방법
예 4.1:
var jq = $('#container')
console.log( jq.[0]); //포함된 DOM 노드 요소
console.log(jq.length) ; //1
console.log(jq.context) //document
console.log( jq.selector); //container
5. 프로세스 $(.className )
첫 번째 매개변수가 .className인 경우 jQuery 객체에는 클래스 이름이 className인 태그 요소가 있습니다. 매개변수 문자열, 문서의 선택자, 컨텍스트 속성으로 속성 값을 추가합니다.
실제 실행 코드는
return jQuery(document).find(className);
6. >첫 번째 매개변수가 .className이면 두 번째 매개변수는 컨텍스트 객체(.className($(.className .className) 처리와 동일), jQuery 객체 또는 dom 노드일 수 있음),
jQuery 객체에는 하위 노드가 포함됩니다. 두 번째 매개변수인 context 객체에 클래스 이름이 className인 요소를 추가하고 컨텍스트 및 선택기 속성을 추가합니다.
실제 실행 코드는
html 코드:
요약:
jQuery의 핵심 아이디어는 간단히 "쿼리 및 운영 DOM"으로 요약할 수 있습니다. 오늘은 주로 jQuery.prototype을 분석하겠습니다. .init 선택기 생성자. 선택기 함수에서 매개변수를 처리합니다.
이 함수의 매개변수는 jQuery()===$()의 실행 함수에 있는 매개변수입니다. jQuery의 기본 프레임워크를 이해한 후 이 글을 다시 읽어보세요.
아이디어 분석:
다음은 jQuery의 여러 사용 사례입니다(dom 쿼리에 사용됨). 각 사례는 선택기 인스턴스(일반적으로 쿼리된 dom Node를 포함하는 jQuery 객체(nodeList 객체)라고 함)를 반환합니다.
1. $(""), $(null), $(undefine), $(false) 처리
매개변수가 위의 잘못된 값인 경우 jQuery 객체에 dom 노드가 포함되지 않습니다
2. $(DOMElement) 처리
매개변수가 노드 요소인 경우 jQuery 객체에는 매개변수 노드 요소가 포함되며, 속성값은 각각 매개변수 노드 요소로 추가되며, 컨텍스트 및 길이 속성은 1 및 []를 사용하여 jQuery 객체의 dom 노드에 액세스하는 사용법
예 2.1:
코드 복사 코드는 다음과 같습니다:
var obj = document.getElementById ('container'),
jq = $(obj)
console.log(jq.length) ; //1
console.log(jq.context); //obj
console.log(jq.[0]) //obj
3. HTML 문자열)
첫 번째 매개변수가 HTML 문자열인 경우 jQuery 객체에는 jQuery.clean 함수로 생성된 조각 문서 조각에 Childnodes 노드가 포함됩니다.
예 3.1:
코드 복사 코드는 다음과 같습니다.
var jqHTML = $('
기사 제목
Content< /p>');
console.log(jqHTML); // [
,
];
첫 번째 매개변수(HTML 문자열)가 비어 있는 경우 단일 태그이고 두 번째 매개변수 컨텍스트는 비어 있지 않은 순수 객체입니다.
예 3.2:
코드 복사 코드는 다음과 같습니다.
var jqHTML = $(' ', { class: 'css-class', data-name: 'data-val' });
console.log(jqHTML.attr['class'] ); //css-class
console.log(jqHTML.attr['data-name']); //data-val
4. $(#id) 처리
첫 번째 매개변수가 # + 요소 ID인 경우 jQuery 객체에는 이 ID가 있는 유일한 요소 노드인
이 포함되어 있으며 컨텍스트를 추가합니다. 속성 값이 각각 문서, 매개변수 문자열, 1인 선택기, 길이 속성 및 사용자 속성 [] jQuery 객체에서 dom 노드에 액세스하는 방법
예 4.1:
코드 복사 코드는 다음과 같습니다.
var jq = $('#container')
console.log( jq.[0]); //포함된 DOM 노드 요소
console.log(jq.length) ; //1
console.log(jq.context) //document
console.log( jq.selector); //container
5. 프로세스 $(.className )
첫 번째 매개변수가 .className인 경우 jQuery 객체에는 클래스 이름이 className인 태그 요소가 있습니다. 매개변수 문자열, 문서의 선택자, 컨텍스트 속성으로 속성 값을 추가합니다.
실제 실행 코드는
코드 복사입니다. 코드는 다음과 같습니다.
return jQuery(document).find(className);
6. >첫 번째 매개변수가 .className이면 두 번째 매개변수는 컨텍스트 객체(.className($(.className .className) 처리와 동일), jQuery 객체 또는 dom 노드일 수 있음),
jQuery 객체에는 하위 노드가 포함됩니다. 두 번째 매개변수인 context 객체에 클래스 이름이 className인 요소를 추가하고 컨텍스트 및 선택기 속성을 추가합니다.
실제 실행 코드는
코드 복사 코드는 다음과 같습니다.
return jQuery(context).find(className)
예 6.1: html 코드:
코드 복사 코드는 다음과 같습니다.
JavaScript 코드:
코드 복사
코드 복사
그럼 어떻게 해야 할까요? $($('#container')) 가 나타날 때? 마찬가지로 반환된 jQuery 객체는 사례 5 및 6과 동일합니다.
예 8.2:
코드 복사
코드는 다음과 같습니다.
var rootjQuery = $(document),
rquickExpr = /^(?:[^#<]*(<[wW] >)[^>]*$|#( [w-]*)$)/;
jQuery.fn = jQuery.prototype = {
init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;
// $(""), $(null), $(undefine), $(false) 처리
if ( !selector ) {
이것을 반환;
}
// $(DOMElement) 처리
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
이것을 돌려주세요;
}
// HTML 문자열 처리
if ( typeof selector === "string" ) {
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// <>로 시작하고 끝나는 문자열을 가정합니다. HTML이고 정규식 검사를 건너뜁니다.
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( 선택기 );
}
// html과 일치하거나 #id에 컨텍스트가 지정되지 않았는지 확인하세요.
// match[1]不为null，则为html字符串，match[2]不为null，则为元素id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = jQuery의 컨텍스트 인스턴스 ? 컨텍스트[0] : 컨텍스트;
doc = ( context && context.nodeType ? context.ownerDocument || context : 문서 ); // 如果match[1]为공간적单标签元素(如：
하위 콘텐츠 제목
/p>JavaScript 코드:
코드 복사 코드는 다음과 같습니다:
var jq, context; context = '.sub'
var jq = $('.title', context); log(jq.text()); //하위 콘텐츠 제목
console.log(jq.context); //문서
console.log(jq.selector) //.sub .title
context = $('.sub');
var jq = $('.title', context)
console.log(jq.text()); //하위 콘텐츠 제목
console .log(jq.context); //문서
console.log(jq.selector); //.sub .title
context = $('.sub')[0]; jq = $('.title', context);
console.log(jq.text()); //보조 콘텐츠 제목
console.log(jq.context); sub
console.log(jq.selector); //.title
7. $(fn) 처리
첫 번째 매개변수가 fn 함수인 경우 $(document)를 호출합니다. .ready(fn)
예 7.1:
var jq = $('.title', context); log(jq.text()); //하위 콘텐츠 제목
console.log(jq.context); //문서
console.log(jq.selector) //.sub .title
context = $('.sub');
var jq = $('.title', context)
console.log(jq.text()); //하위 콘텐츠 제목
console .log(jq.context); //문서
console.log(jq.selector); //.sub .title
context = $('.sub')[0]; jq = $('.title', context);
console.log(jq.text()); //보조 콘텐츠 제목
console.log(jq.context); sub
console.log(jq.selector); //.title
7. $(fn) 처리
첫 번째 매개변수가 fn 함수인 경우 $(document)를 호출합니다. .ready(fn)
예 7.1:
코드 복사
코드는 다음과 같습니다. $(function(e){ console.log('DOMContent is load');
}) //위 코드는
jQuery(document).ready와 동일합니다. (function(e) {
console.log('DOMContent is load');
})
8. $(jQuery 객체) 처리
는 jQuery 객체이며, dom을 쿼리할 때 매개 변수가 # + 요소 ID이면 반환된 jQuery 객체는 매개 변수 문자열의 속성 값, 문서의 선택자 및 컨텍스트 속성을 추가하는 것으로 위에서 분석되었습니다.
예제 8.1:
jQuery(document).ready와 동일합니다. (function(e) {
console.log('DOMContent is load');
})
8. $(jQuery 객체) 처리
는 jQuery 객체이며, dom을 쿼리할 때 매개 변수가 # + 요소 ID이면 반환된 jQuery 객체는 매개 변수 문자열의 속성 값, 문서의 선택자 및 컨텍스트 속성을 추가하는 것으로 위에서 분석되었습니다.
예제 8.1:
코드 복사
코드는 다음과 같습니다. var jq = $(' #container'); console.log( jq.selector); // #container
console.log(jq.context); // document 그럼 어떻게 해야 할까요? $($('#container')) 가 나타날 때? 마찬가지로 반환된 jQuery 객체는 사례 5 및 6과 동일합니다.
예 8.2:
코드 복사
코드는 다음과 같습니다. 다음과 같습니다: var jq2 = $($('#container')) console.log(jq2.selector) // #container
console.log(jq2 .context ; 코드 코드는 다음과 같습니다.
var rootjQuery = $(document),
rquickExpr = /^(?:[^#<]*(<[wW] >)[^>]*$|#( [w-]*)$)/;
jQuery.fn = jQuery.prototype = {
init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;
// $(""), $(null), $(undefine), $(false) 처리
if ( !selector ) {
이것을 반환;
}
// $(DOMElement) 처리
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
이것을 돌려주세요;
}
// HTML 문자열 처리
if ( typeof selector === "string" ) {
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// <>로 시작하고 끝나는 문자열을 가정합니다. HTML이고 정규식 검사를 건너뜁니다.
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( 선택기 );
}
// html과 일치하거나 #id에 컨텍스트가 지정되지 않았는지 확인하세요.
// match[1]不为null，则为html字符串，match[2]不为null，则为元素id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = jQuery의 컨텍스트 인스턴스 ? 컨텍스트[0] : 컨텍스트;
doc = ( context && context.nodeType ? context.ownerDocument || context : 문서 ); // 如果match[1]为공간적单标签元素(如：
)且context为对象字faceweight
if ( rsingleTag.test( match[1] ) && jQuery .isPlainObject( context ) ) {
// 如果context对象不为空,则将对象中的属性添加到selector数组中仅有的dom节点中
this.attr.call( selector, context, true );
}
// merge函数的参数应该为两个数组，目数组中的项并到第一个，数组组， 🎜>//이거选择器init构造函数的实例对象，该对象继承jQuery.prototype对象中的length属性(默认为0)，因此可以理解好merge函数源码
// 将selector중의 돔이 이 对象中，并返回该对象
return jQuery.merge( this, selector );
// 핸들: $(#id)
} else {
elem = document.getElementById( match[2] );
// Blackberry 4.6이 반환할 때 parentNode를 확인하여
// 문서에 더 이상 없는 노드 #6963
if ( elem && elem.parentNode ) {
// IE가 있는 경우 처리 및 Opera 반환 항목
// ID 대신 이름으로
// ie6,7和Opera存재재此bug,当一个标签name和一个标签id值상等时,
// document.getElementById(# id)函数将返回提前函数将返回提前函数将返回提前函数将返回提前现的标签元素
if ( elem.id !== match[2] ) {
// 如果存在以上Bug，则返回由find函数返回的document文档的后代元素集합(합)
return rootjQuery.find( 선택기 );
}
// 그렇지 않으면 요소를 jQuery 객체에 직접 삽입합니다.
this.length = 1;
this[0] = 요소;
}
this.context = 문서;
this.selector = 선택자;
이것을 돌려주세요;
}
// HANDLE: $(expr, $(...))
// context不存재或者context为jQuery对象
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( 선택기 );
// HANDLE: $(expr, context)
// (동일함: $(context).find(expr)
// context为className或者dom节点元素
} else {
// 等同于jQuery(context).find(selector)
return this.constructor( context ).find( selector )
}
// 处理$(fn)== =$(document).ready(fn)
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector )
}
// 处理$(jQuery对象)
if ( selector.selector !== 정의되지 않음 ) {
this.selector = selector.selector;
this.context = selector.context
// 当第一个参数selector为jQuery对象时，将selector中的dom节点合并到this对象中，并返回this对象
return jQuery.makeArray( selector, this );
if ( rsingleTag.test( match[1] ) && jQuery .isPlainObject( context ) ) {
// 如果context对象不为空,则将对象中的属性添加到selector数组中仅有的dom节点中
this.attr.call( selector, context, true );
}
// merge函数的参数应该为两个数组，目数组中的项并到第一个，数组组， 🎜>//이거选择器init构造函数的实例对象，该对象继承jQuery.prototype对象中的length属性(默认为0)，因此可以理解好merge函数源码
// 将selector중의 돔이 이 对象中，并返回该对象
return jQuery.merge( this, selector );
// 핸들: $(#id)
} else {
elem = document.getElementById( match[2] );
// Blackberry 4.6이 반환할 때 parentNode를 확인하여
// 문서에 더 이상 없는 노드 #6963
if ( elem && elem.parentNode ) {
// IE가 있는 경우 처리 및 Opera 반환 항목
// ID 대신 이름으로
// ie6,7和Opera存재재此bug,当一个标签name和一个标签id值상等时,
// document.getElementById(# id)函数将返回提前函数将返回提前函数将返回提前函数将返回提前现的标签元素
if ( elem.id !== match[2] ) {
// 如果存在以上Bug，则返回由find函数返回的document文档的后代元素集합(합)
return rootjQuery.find( 선택기 );
}
// 그렇지 않으면 요소를 jQuery 객체에 직접 삽입합니다.
this.length = 1;
this[0] = 요소;
}
this.context = 문서;
this.selector = 선택자;
이것을 돌려주세요;
}
// HANDLE: $(expr, $(...))
// context不存재或者context为jQuery对象
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( 선택기 );
// HANDLE: $(expr, context)
// (동일함: $(context).find(expr)
// context为className或者dom节点元素
} else {
// 等同于jQuery(context).find(selector)
return this.constructor( context ).find( selector )
}
// 处理$(fn)== =$(document).ready(fn)
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector )
}
// 处理$(jQuery对象)
if ( selector.selector !== 정의되지 않음 ) {
this.selector = selector.selector;
this.context = selector.context
// 当第一个参数selector为jQuery对象时，将selector中的dom节点合并到this对象中，并返回this对象
return jQuery.makeArray( selector, this );
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.