jQuery를 깊이 있게 분석하다.prototype.init 선택기 원본 코드
28800 단어 prototype
[저자: 화자]
요약:
jQuery의 핵심 사상은 간단하게'조회와 조작dom'로 요약할 수 있는데 오늘은 주로 jQuery를 분석한다.prototype.init 선택기 구조 함수, 선택기 함수 중의 매개 변수 처리하기;
이 함수의 매개 변수는 jQuery()==$() 실행 함수의 매개 변수입니다. 제가 쓴 jQuery 기초 프레임워크 분석문을 먼저 보고 기본 프레임워크를 이해한 후에 이 글을 보십시오.
사고 분석:
다음은 몇 가지 jQuery의 사용 상황(dom을 조회하는 데 사용), 모든 상황은 선택기 실례(습관적으로 jQuery 대상(nodeList 대상), 이 대상은 조회의dom 노드를 포함한다)를 되돌려줍니다.
1, 처리 $(""), $(null), $(undefined), $(false)
만약 파라미터가 상기 불법 값이라면, jQuery 대상은dom 노드를 포함하지 않습니다
2, 처리 $(DOMElement)
만약 파라미터가 노드 요소라면 jQuery 대상은 이 파라미터의 노드 요소를 포함하고 속성 값은 파라미터 노드 요소, 1의context,length 속성과 []로 jQuery 대상의dom 노드에 접근하는 방법을 각각 증가시킵니다.
예2.1:
1 var obj = document.getElementById('container'),
2 jq = $(obj);
3
4 console.log(jq.length); //1
5 console.log(jq.context); //obj
6 console.log(jq.[0]); //obj3, 처리 $(HTML 문자열)
첫 번째 매개변수가 HTML 문자열인 경우 jQuery 객체에는 jQuery가 포함됩니다.clean 함수로 만든fragment 문서 조각의childnodes 노드
예3.1:
1 var jqHTML = $('<h1> </h1><p> </p>');
2 console.log(jqHTML); //[<h1>,<p>];만약 첫 번째 인자 (HTML 문자열) 가 빈 단일 탭이고, 두 번째 인자 context가 비빈 순수한 대상이라면
예 3.2:
1 var jqHTML = $('<div></div>', { class: 'css-class', data-name: 'data-val' });
2
3 console.log(jqHTML.attr['class']); //css-class
4 console.log(jqHTML.attr['data-name']); //data-val4, 처리 $(#id)
만약 첫 번째 파라미터가 #에 원소 id를 추가하면 jQuery 대상은 이 id를 가진 유일한 원소 노드를 포함하고, 각각 속성 값이document, 파라미터 문자열, 1,context,selector,length 속성과 []로 jQuery 대상의dom 노드에 접근하는 사용법
예4.1:
1 var jq = $('#container');
2
3 console.log(jq.[0]); // dom
4 console.log(jq.length); //1
5 console.log(jq.context); //document
6 console.log(jq.selector); //container5, 처리 $(.className)
만약 첫 번째 파라미터가 하나라면.className, jQuery 대상에 className이라는 탭 요소가 있고, 매개 변수 문자열,document의selector,context 속성을 추가합니다.
실제 실행 코드는 다음과 같습니다.
1 return jQuery(document).find(className);6, 처리 $(.className,context)
만약 첫 번째 파라미터가.className, 두 번째 파라미터는 상하문 대상 (.className ($(.className.className), jQuery 대상이나dom 노드일 수 있음), jQuery 대상은 두 번째 파라미터 상하문 대상에className이라는 후대 노드 요소를 포함하고 context와selector 속성을 추가합니다.
실제 실행 코드는 다음과 같습니다.
1 return jQuery(context).find(className);예6.1:
html 코드:
1 <div class="main">
2 <h2 class="title"> </h2>
3 <p> </p>
4 </div>
5
6 <div class="sub">
7 <h2 class="title"> </h2>
8 <p> </p>
9 </div>JavaScript 코드:
1 var jq, context;
2
3 context = '.sub';
4 var jq = $('.title', context);
5 console.log(jq.text()); //
6 console.log(jq.context); //document
7 console.log(jq.selector); //.sub .title
8
9 context = $('.sub');
10 var jq = $('.title', context);
11 console.log(jq.text()); //
12 console.log(jq.context); //document
13 console.log(jq.selector); //.sub .title
14
15 context = $('.sub')[0];
16 var jq = $('.title', context);
17 console.log(jq.text()); //
18 console.log(jq.context); //className sub
19 console.log(jq.selector); //.title7、处理$(fn)
如果第一个参数是fn函数，则调用$(document).ready(fn);
例7.1：
1 $(function(e){ 2 console.log('DOMContent is loaded'); 3 }) 4 // ： 5 jQuery(document).ready(function(e) { 6 console.log('DOMContent is loaded'); 7 });
8, 처리 $(jQuery 대상)
만약 첫 번째 파라미터가 jQuery 대상이라면, 위쪽에서dom를 조회할 때 파라미터가 #에 요소 id를 추가하면 되돌아오는 jQuery 대상은 파라미터 문자열,document의selector,context 속성 값을 추가합니다
예8.1:1 var jq = $('#container'); 2 console.log(jq.selector); // #container 3 console.log(jq.context); // document
그러면 $($('#container')가 나타나면 어떻게 처리해야 합니까?마찬가지로 되돌아오는 jQuery 대상은 상황 5와 6로 처리됩니다
예8.2:1 var jq2 = $($('#container')); 2 console.log(jq2.selector); // #container 3 console.log(jq2.context); // document
2. 원본 코드 주석 분석
[jQuery 1.8.3 기반]1 var rootjQuery = $(document), 2 rquickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/; 3 4 jQuery.fn = jQuery.prototype = { 5 init: function( selector, context, rootjQuery ) { 6 var match, elem, ret, doc; 7 8 // Handle $(""), $(null), $(undefined), $(false) 9 if ( !selector ) { 10 return this; 11 } 12 13 // Handle $(DOMElement) 14 if ( selector.nodeType ) { 15 this.context = this[0] = selector; 16 this.length = 1; 17 return this; 18 } 19 20 // Handle HTML strings 21 if ( typeof selector === "string" ) { 22 if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { 23 // Assume that strings that start and end with <> are HTML and skip the regex check 24 match = [ null, selector, null ]; 25 26 } else { 27 match = rquickExpr.exec( selector ); 28 } 29 30 // Match html or make sure no context is specified for #id 31 // match[1] null， html ，match[2] null， id 32 if ( match && (match[1] || !context) ) { 33 34 // HANDLE: $(html) -> $(array) 35 if ( match[1] ) { 36 context = context instanceof jQuery ? context[0] : context; 37 doc = ( context && context.nodeType ? context.ownerDocument || context : document ); 38 39 // scripts is true for back-compat 40 // selector childnodes 41 selector = jQuery.parseHTML( match[1], doc, true ); 42 43 // match[1] ( ：<div><div>) context 44 if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { 45 46 // context ， selector dom 47 this.attr.call( selector, context, true ); 48 } 49 50 // merge ， ， this ， 51 // this init ， jQuery.prototype length ( 0)， merge 52 // selector dom this ， 53 return jQuery.merge( this, selector ); 54 55 // HANDLE: $(#id) 56 } else { 57 elem = document.getElementById( match[2] ); 58 59 // Check parentNode to catch when Blackberry 4.6 returns 60 // nodes that are no longer in the document #6963 61 if ( elem && elem.parentNode ) { 62 // Handle the case where IE and Opera return items 63 // by name instead of ID 64 // ie6，7 Opera bug， name id ， 65 // document.getElementById(#id) 66 if ( elem.id !== match[2] ) { 67 // Bug， find document 68 return rootjQuery.find( selector ); 69 } 70 71 // Otherwise, we inject the element directly into the jQuery object 72 this.length = 1; 73 this[0] = elem; 74 } 75 76 this.context = document; 77 this.selector = selector; 78 return this; 79 } 80 81 // HANDLE: $(expr, $(...)) 82 // context context jQuery 83 } else if ( !context || context.jquery ) { 84 return ( context || rootjQuery ).find( selector ); 85 86 // HANDLE: $(expr, context) 87 // (which is just equivalent to: $(context).find(expr) 88 // context className dom 89 } else { 90 // jQuery(context).find(selector) 91 return this.constructor( context ).find( selector ); 92 } 93 94 // $(fn)===$(document).ready(fn) 95 } else if ( jQuery.isFunction( selector ) ) { 96 return rootjQuery.ready( selector ); 97 } 98 99 // $(jQuery ) 100 if ( selector.selector !== undefined ) { 101 this.selector = selector.selector; 102 this.context = selector.context; 103 } 104 105 // selector jQuery ， selector dom this ， this 106 return jQuery.makeArray( selector, this ); 107 } 108 }
전재는 출처를 밝혀 주십시오[저자: 화자,텍스트 링크]
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기능 재검토(프로토타입 아님) 🤥빠른 수정을 위한 몇 가지 참고 사항 사용자 지정 속성이 있는 함수 이것은 대부분의 경우 런타임 바인딩이므로 someKey는 aFunction 또는 aFunction.prototype의 속성이 아닙니다. 접두사 cu...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
