jQuery의 체인 호출에 대한 간략한 분석_jquery

jQuery 스타일 메서드 체인의 핵심 부분은 세 가지 점입니다.
1) jquery의 래퍼 함수(즉, 래퍼 개체를 만드는 데 사용되는 jQuery()), 이 생성자는 기본 DOM 개체 장치를 포함하는 래퍼를 생성할 수 있습니다. 물체.
아마 이렇게 생겼을 텐데... (물론 공식 라이브러리와 규모나 기능, 구현 방법이 많이 다릅니다. 대략적인 구현 방법을 썼을 뿐입니다.) :
어... 제 실수입니다. 코드를 시험해보고 싶다면 jQuery 라이브러리를 가져오지 마세요. 이름 충돌이 있습니다.

코드 복사 코드는 다음과 같습니다:

(function(){
//단순화를 위해 하위 클래스 선택기, 속성 선택기 등을 지원하지 않으며 ".className" 또는 " 형식만 허용합니다. #id" 또는 "tagName"과 그 사이의 것입니다. 사용자 정의 도구 함수(빨간색)의 결합된 형태는 아래에 설명되어 있습니다.
function _jQuery(els){
this.elements = new Array();
for (var i = 0; i < els.length; i ) {
var element = els[i];
if (typeof element == 'string') {
element = element. Trim(); //Space
var sign = element.substr(0, 1)
if (sign == "#") { //Find
element by id = document.getElementById(element.substr(1) );
this.elements.push(element);
}
else
if (sign == ".") {
//클래스 이름으로 검색 여기서는 사용자 정의가 사용됩니다. 클래스 이름으로 dom 배열을 반환하는 도구 함수 getElementsByClassName
element = getElementsByClassName(element.substr(1)) //element는 여기에서 배열 객체입니다. 이 방법은 아래를 참조하세요.
this.elements = this .elements.merge(element);
}
else { //식별자 없음, 태그 이름으로 검색
element = document. getElementsByTagName(element); //element는 현재 배열 객체입니다
this.elements = this.elements.merge(element);//이 메서드는 set과 마찬가지로 요소 배열에 다른 DOM 객체만 존재하게 할 수 있습니다.
}
}
else {
this.elements.push(element);
}
}
}
/*여기에서 프로토타입 기능 확장을 시작할 수 있습니다.
_ jQuery.prototype.addEvent=function() {……}
*/ window['jQuery'] = function(){ return new _jQuery(arguments) }; !window['$']) window['$'] = window['jQuery ']; })()//자체 실행 익명 함수

다음과 같은 간단한 HTML 문서를 삽입합니다. 테스트해 보세요(이 HTML이 표준화된 방식으로 작성되지 않았다는 사실을 경멸하지 마세요...단순히 테스트용입니다)

코드 복사 코드는 다음과 같습니다.

< body>

header1

< p id="header2" class="entrance">
header2

< p id="header3"class="entrance"> ="http://www.jb51.net/index.html">header3

>

node1

< ;p id="content2" class="topic">
node2

< ;p id="content3" class="topic"> href="http://www.jb51.net/index.html">node3

🎜>

;



입력:




코드 복사

다음:

var f=$('#header').elements[0] consoles.write("nodeName: " f.nodeName "==> Id:" f .id) /*alert를 대체하는 사용자 정의 디버깅 패널 도구입니다. 제가 사용하고 있는 것은 특정 책에서 복사한 것이기 때문에 기능과 조작성이 별로 좋지 않습니다. 이틀 안에 수정할 수 있습니다. 직접 디버깅하는 대신 알림을 사용할 수 있습니다*/
출력:

입력:

코드 복사 코드

var e=jQuery(' div ',' p').elements; //여기에 의도적으로 몇 개의 추가 공백이 추가되었습니다.
for(var i=0;i< ;e.length;i ){
consoles.write("nodeName: " e[i].nodeName "==> Id: " e[i].id)

출력:

dom 객체 검색의 여러 방법을 통합했지만, 매번 dom 객체를 조작하기 위해 루프 문을 사용하는 것은 여전히 ​​매우 짜증나는 일임을 알 수 있습니다. 그런 다음 위의 addEvent 메소드 등과 같이 이 래퍼 객체에 대한 많은 메소드가 이 래퍼를 기반으로 도입됩니다. 이러한 메소드는 궁극적으로 객체에 래핑된 기본 DOM 객체를 작동하기 위해 도입되므로 각 메소드 A는 두 번째 핵심 함수로 이어지는 문을 도입해야 합니다 ==> jQuery.each(){}; 너무 늦었습니다... 내일 요약하겠습니다
이 기사에서 사용된 도구 함수(모두 매우 유용합니다. ):

코드 복사 코드는 다음과 같습니다.

//className: 클래스 이름 태그 : 이 태그 이름의 범위 내에서 상위 찾기: 이 상위 노드 내에서 검색
function getElementsByClassName(className, tag, parent){
parent = parent || document; //기본값은 document입니다. tag = tag || '*'; //기본값은 모든 태그를 찾는 것입니다.
var elements = new Array()
var re = new RegExp('(^|\s)' className '(\ s| $)');
var allList = parent.getElementsByTagName(tag);
var 요소
for (var i = 0; i < allList.length; i ) {
요소 = allList [i]
if (element.className.match(re)) {
elements.push(element)
}
}
요소 반환; 🎜>

코드 복사

코드는 다음과 같습니다. if (!String .prototype.trim) {//앞뒤 공백 제거 String.prototype.trim = function(){

return this.replace(/^s |s $/g, ''); }

}

if (!Array.prototype.merge) {
Array.prototype.merge = function(arr){ //배열이 집합과 같은 특성을 갖도록 만듭니다. 문제는
for (var i = 0; i < arr.length; i ) {
var signal=false 원리를 설명하는 것입니다. ;
for (var j = 0; j < this.length ; j ) {
if (arr[i] == this[j])
signals=true; >if (!signals) this.push(arr[i]);
}
return this
}
}

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.