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>
>
node1
< ;p id="content2" class="topic">
node2
< ;p id="content3" class="topic"> href="http://www.jb51.net/index.html">node3
🎜>
