안녕하십니까? 여기는 오솔길입니다.
이번부터는 jQuery를 조작할 때 쓸 수 없는 "jQuery 원래$ 변수"가 깊이에 가까워졌다.
대상 버전: jQuery -2.1.1
목록은 여기 있습니다.

공유 전제 사항

아래의 내용은 여기서부터 전진하는 전제 조건이다.
이 블로그 내의 편리한 호칭
- jQuery 에서 액세스할 수 있는 변수를 "jQuery 함수"라고 합니다.
- jQuery 함수의 반환 값을 jQuery 인스턴스라고 합니다.
- jQuery 인스턴스 [number]에서 액세스할 수 있는 요소 그룹을'집합'이라고 합니다.
예비 지식
- $ 및 jQuery 동일
- jQuery 인스턴스는 Array처럼 보이지만 자신의 Object입니다.

jQuery 함수의 실행 모드

jQuery 함수는 첫 번째 매개 변수의 내용에 따라 행동에 큰 변화가 있습니다.
첫 번째 파라미터를 토대로 행위를 간단하게 총결하였다.
두 번째 매개 변수는 거의 생략할 수 있으며, 여기에서 반올림할 수 있다.자세히 알고 싶은 사람은 참조하세요공식 API 참조.
No
실행 모드
활용단어참조
일
문자열
selector 문자열에서 검색된 DOM 요소의 집합을 반환합니다.
이
jQuery(DOM 요소)
컬렉션에서 매개변수의 DOM 요소를 반환합니다.
삼
jQuery(DOM 요소 배열)
컬렉션에서 매개변수를 반환하는 DOM 요소 배열
사
대상
컬렉션에서 매개변수 객체 반환
오
jQuery(jQuery 인스턴스)
매개 변수의 jQuery 인스턴스 클론 되돌리기
육
jQuery(없음)
빈 집합으로 돌아가기
칠
jQuery(HTML 문자열)
매개변수 문자열에서 생성된 DOM 요소의 컬렉션을 반환합니다.
팔
함수
ready 이벤트에서 jQuery 함수를 매개 변수로 하는callback 함수를 실행합니다

jQuery 함수의 동작(개요편)

그러면 jQuery 함수가 실행되면 어떤 일이 일어날까요?
여기서 다음 짧은 코드를 실행합니다.
jQuery 호출 중

jQuery = function( selector, context ) {
  return new jQuery.fn.init( selector, context );
}

jQuery 함수를 실행할 때 내부 호출 jQuery.fn.init 함수.

jQuery 함수에서 jQuery까지.fn.init 함수에 같은 매개 변수를 전달합니다.

jQuery.fn.init 함수는 new에서 호출됩니다.따라서 함수를 실행할 때this는 jQuery 실례입니다.

jQuery.fn.init 함수의 반환 값은 jQuery를 통해 호출자에게 즉시 반환됩니다.

그럼 우리도 jQuery.fn.init 함수의 안쪽을 봅시다.

jQuery.fn.init 함수의 동작 (선택기 문자열 편)

위에서 정리한 집행 모델에서 가장 복잡한 행위의 집행 상황 1의'전달 선택기 문자열의 상황'을 정리했다.

선택기 문자가 통과할 때 jQuery입니다.fn.init 내부 비헤이비어

3 브랜치는 ID 검색 형식(#xxx) 또는 다른 방식으로 브랜치됩니다.

해설

그럼 제가 그림 내용을 설명해 드릴게요.
첫 번째 매개 변수selector가 문자열일 때, 그 내용에 따라 대체적으로 다음과 같은 세 가지 상황으로 나뉜다.
- 사례 1, HTML 문자열 -> 실행 모드 7: DOM 요소 생성
- 사례 2, ID 검색 형식("#elemid"형식) -> 실행 모드 1: 선택기 문자열
- 사례 3, 기타 -> 실행 모드 1: 선택기 문자열

상황 1, HTML 문자열

이런 상황에서 위에서 정리한 집행 모델 7에 해당한다.
요소 검색을 수행하지 않고 DOM으로 HTML 문자열을 생성하고 반환합니다.
※ 이 모드는 다음에 들어갑니다.

상황 2, ID 검색 형식

기본 함수의 getElementById에서 요소를 검색합니다.
검색을 받기 위해서는 소수가 하나밖에 없기 때문에 이렇게 처리하는 것이 비교적 좋다.
결과는 인스턴스의 요소 "0"으로 설정됩니다.
따라서 그룹처럼 instance[0]에 접근할 수 있다.

사례 3 기타

jQuery 인스턴스입니다.find 함수 호출, 내부
jQuery.find(selector,context,results) 함수의 검색 처리와this.pushStack(elems) 함수를 사용하여 인스턴스를 생성합니다.
검색 과정은 다른 절에서 서술되지만 명중한 요소는 그룹에서 되돌아옵니다.
인스턴스 생성은 jQuery입니다.merge 함수를 호출하여 검색 결과를 새 실례의'0-n'이라는 요소에 분배합니다.(속성이라고 할 수 있습니까? 좀 그렇습니다.)
ID 검색 형식과 마찬가지로 배열처럼 instance[1]에 액세스할 수 있습니다.

선택기 검색 정보(jQuery.find 함수)

jQuery.find는 두 개예요.
하나는 Sizzle이라는 대상입니다.
또 하나는 내장된 함수다.
응, 무슨 소리야?내 생각엔 그렇지?
잘 설명해 주세요. 저번에 제가 github의 jquery에 힘썼는데 그곳의 README를 읽고 Grunt에서 jquery를 구축했을 때grunt custom:-sizzle에 이런 옵션이 있었어요.
Sizzle은 검색엔진이며 이 옵션은 없습니다.
옵션을 설정하면 내장 함수가 검색엔진입니다.
실제로 이 옵션을 더하면 jQuery 원본의 줄 수는 3000줄 정도로 줄일 수 있습니다.

Sizzle!?

Sizzle는 "CSS selector engine"입니다.
Sizzle은 jQuery에서 회전하는 독립적인 구조인 것 같습니다.
그 상세한 상황jQuery 일본어 라이브러리 씨에 대해 총결하였다.
도로에서 흥미로운 것은'안 쓰기'를 선택할 수도 있다는 것이다.
나는 반드시 성능을 검증해야 한다.

요약 + 소스 코드 위치

어때?
이번에 원본 코드의 추적 결과에 대해 비망록을 총결하였다.
github의 jQuery에서 어떤 처리가 있는지 정리해 보세요.
활용단어참조
소스 코드 위치
jQuery 인스턴스 생성
src/core.js
jQuery.fn.init
src/core/init.js
jQuery 인스턴스입니다.find
src/traversing/findFilter.js
jQuery 인스턴스입니다.pushStack
src/core.js
jQuery 인스턴스입니다.merge
src/core.js
선택기(Sizzle 지정)
src/selector-sizzle.js
선택기(내장 함수)
src/selector-native.js
Sizzle 소스
src/sizzle/dist/sizzle.js
이번에는 여기까지 하겠습니다.
DOM 요소의 읽기에 대한 이해가 깊어졌습니다.
다음에는 실행 모드 7: DOM 요소 생성하기에 초점을 맞추고 싶습니다.