jQuery 생성자 초기화 매개변수 분석 continue

집

웹 프론트엔드

JS 튜토리얼

jQuery 생성자 초기화 매개변수 분석 continue_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:59 PM

jquery 건설자

선택자가 다른 문자열이면 상황이 더 복잡해집니다

// Handle HTML strings
if ( typeof selector === "string" ) {...}

로그인 후 복사

다양한 상황에 대처하기 시작하세요

// Are we dealing with HTML string or an ID&#63;
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = quickExpr.exec( selector );
}

로그인 후 복사

처음 문자가 "<"이고 마지막 문자가 ">"이고 길이가 3보다 크다고 판단되면 이때의 선택자는 다음과 같은 간단한 HTML 태그라고 가정합니다. $('

') 와 같지만 $('') 와 같은 "가정"이 여기에 간다고 가정하는 것을 기억하세요. 그런 다음 일치 배열을 [null, selector, null]로 수정합니다. 여기서 일치는 주로 매개변수 유형을 구별하는 도구로 사용됩니다. 소스 코드 4개 변수 선언

init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;

로그인 후 복사

if 조건이 충족되지 않으면 일치 결과를 얻기 위해 정규 표현식이 호출됩니다. QuickExpr은 jQuery 생성자에 선언된 변수입니다.

// A simple way to check for HTML strings or ID strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
quickExpr = /^(&#63;:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

로그인 후 복사

이 일반 규칙은 주로 html 문자열과 id 문자열을 구별하기 위한 것입니다. 두 번째 주석에서는 location.hash 기반 XSS 공격을 피하기 위해 QuickExpr에 #(#9521)이 추가된다는 점을 언급하고 있습니다. jQuery 공식 웹사이트에서 찾을 수 있습니다.

먼저 http://bugs.jquery.com/에 접속한 후 해당 값을 검색하세요

quickExpr.exec(selector)의 실행 결과는 배열이 될 수 있습니다. 배열의 첫 번째 요소는 일치하는 요소이고 나머지 요소는 그룹화된 일치 요소입니다(<[wW]). >)[^>] 및 ([w-]*)는 레이블 및 ID 값입니다. 결과는 결국 일치하도록 제공됩니다. 다양한 일치 상황을 분석해 보겠습니다. 먼저 정규 표현식이 없는 단일 레이블은 [null, selector, null] 형식이며 이는 아래 코드에서 증명됩니다.

<!doctype html>
<html>
  <head>
   <title></title>
    <script src='jquery-1.7.1.js'></script>
  </head>
  <body>
    <div id='div'></div> 
  </body>
  <script>
    $('<div>');
  </script>
</html>

로그인 후 복사

html에서는 jQuery 객체를 생성한 다음 init 메소드에서 일치 결과를 출력합니다.

if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = quickExpr.exec( selector );
}
 console.log(match); // [null, "<div>", null];

로그인 후 복사

매개변수를 $('#div')로 수정한 후 결과를 살펴보겠습니다

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

["#div", 정의되지 않음, "div", 인덱스: 0, 입력: "#div"]

특수한 경우도 $('

123') 있는데 결과를 살펴보겠습니다

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

dewrwe", "

", 정의되지 않음, 색인: 0, 입력: "

dewrwe"]

id는 항상 세 번째 요소에 있고 태그 값은 두 번째 요소에 저장되는 것을 볼 수 있습니다. 마지막 경우에는 $('

')를 생성하므로 차이가 없습니다. dom 요소의 경우 첫 번째 요소는 처리되지 않습니다. 이 결과를 바탕으로 다음 판단 분석을 진행할 수 있습니다.

다음은 경기 결과에 따라 3가지 상황으로 나누어집니다

if ( match && (match[1] || !context) ) {

     ...

} else if ( !context || context.jquery ) {

    ...

} else {

  ...

}

로그인 후 복사

첫 번째 경우 충족되는 조건은 match에 값이 있어야 한다는 것입니다. Match[1]은 두 번째 요소가 레이블을 저장하는 요소라는 뜻이지만 값이 있거나 컨텍스트가 없습니다. 신분증이 없는 것 같은데 무슨 일인가요? 실제로는 그렇지 않습니다. 일치 결과를 분석해 보면 값이 없는 두 번째 요소는 반드시 id 선택기를 통해 얻은 결과여야 하며 id는 고유하므로 컨텍스트를 작성할 필요가 없음을 알 수 있습니다. (실제로 context를 작성하면 정상적으로 실행되지만, 대신 Sizzle을 사용하게 됩니다. 여기서는 body와 동일하게 처리되지 않습니다.) 자, 첫 번째 조건은

입니다.

1. 태그

$('

') $('

123') $('

23213213

')...

2. 컨텍스트가 없는 ID $('#div')

첫 번째 조건은 내부적으로 더 세분화됩니다.

// HANDLE: $(html) -> $(array)
if ( match[1] ) {

  ...

// HANDLE: $("#id")

}else{

}

로그인 후 복사

물론 if는 태그를 처리하는 데 사용되고 else는 ID를 처리하는 데 사용됩니다.

context = context instanceof jQuery &#63; context[0] : context;
doc = ( context &#63; context.ownerDocument || context : document );
 
// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector );
 
if ( ret ) {
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true );
 
} else {
selector = [ doc.createElement( ret[1] ) ];
}
 
} else {
ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = ( ret.cacheable &#63; jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
}
 
return jQuery.merge( this, selector);

로그인 후 복사

먼저 context의 값을 수정합니다. jQuery 객체라면 subscript 메소드를 사용하여 dom 요소로 변환합니다. 이 원칙은 앞서 언급한 바 있으며, context가 존재하지 않는 경우에는 doc 변수를 처리합니다. 문서 값을 doc에 할당합니다. 존재하고 ownerDocument 속성이 있는 경우 이 값은 여전히 문서입니다. 일반 js 개체와 같은 dom 요소가 아닌 경우 이 개체를 doc에 할당합니다. 변하기 쉬운. 그 직후에는

와 같은 단일 태그를 판단하기 위해 jQuery 생성자에서도 이 일반 규칙을 선언했습니다.

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

// Match a standalone tag

rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,

然后把结果交给ret变量，基于ret的值又进行划分按照单标签和复杂标签分开处理ret值存在那就是匹配到了单标签然后再根据context是不是普通对象又分为两种情况isPlainObject是检测是不是普通对象的方法,如果是普通对象，就利用js原生方法createElement传入标签创建元素并放在一个数组里面，之所以这样是为了以后跟jquery对象合并方便，然后把数组赋值给selector，后采用对象冒充的方法调用attr方法，这里attr居然有3个参数，而平常我们使用的api里面是两个参数，其实jQuery中有很多类似的情况，同样的方法有着对内对外两个接口。第二个参数就是对象形式的上下文，因为attr可以像

复制代码代码如下:

$("img").attr({ src: "test.jpg", alt: "Test Image" });

这给我们的其实就是我们以后可以$(‘

',{id:'div'})这样写了也是支持的。如果不是对象就直接创建元素不考虑属性。还是把创建的元素放在数组里面。如果ret没有值那就是复杂的标签了比如$(‘

231

')这样的这个时候原生的js就搞不定啦需要调取另外一个方法jQuery.buildFragment来处理，这个方法实现以后在学习吧，总之最后都会创建dom元素。最后返回合并后的结果

复制代码代码如下:

return jQuery.merge( this, selector );

不像之前的return this这里是返回merge执行后的结果其实他的任务就是把放在数组里面的创建好的的dom元素合并到jquery元素中去，最终变成{0：div,length:1...}这样的对象形式。这样的话简标签情况就处理完毕。

然后else里面处理的是id的情况

elem = document.getElementById( match[2] );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
// Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;

로그인 후 복사

很简单直接调用原生js的id选择器但是有一些系统会出现bug

注释说的很清楚黑莓系统，就是元素已经不存在了但是依然能够匹配得到所以再加上父节点，不存在的元素肯定没有父节点的。还有一种情况就是ie和opera浏览器会出现按name值匹配的情况所以在做了一个判断

if ( elem.id !== match[2] ) {

如果真的不幸出现了那就不能使用原生方法而是用find方法也就是使用sizzle引擎了，在大多数正常情况下就直接将获取到的元素放到this里面就可以啦然后修改下context的值。Ok终于把第一个大分支分析完了。然后再看根据match的第二个分支

 else if ( !context || context.jquery ) {
  return ( context || rootjQuery ).find( selector );
}

로그인 후 복사

这里是如果没有上下文或者上下文是jquery对象的时候这个比较简单就是直接用find方法了rootjQuery 就是$（document）

最后字符串的情况上面都不属于的话

复制代码代码如下:

return this.constructor( context ).find( selector );

This.constructor就是jQuery其实还是使用find方法。

以上所述就是本文的全部内容了，希望大家能够喜欢。

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7392

자바 튜토리얼

1630

Cakephp 튜토리얼

1357

라라벨 튜토리얼

1268

PHP 튜토리얼

1216

Related knowledge

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 Feb 27, 2024 pm 06:45 PM

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 jQuery는 웹 사이트 개발에 널리 사용되는 JavaScript 라이브러리로, JavaScript 프로그래밍을 단순화하고 개발자에게 풍부한 기능을 제공합니다. 이 기사에서는 jQuery의 참조 방법을 자세히 소개하고 독자가 빠르게 시작할 수 있도록 구체적인 코드 예제를 제공합니다. jQuery 소개 먼저 HTML 파일에 jQuery 라이브러리를 도입해야 합니다. CDN 링크를 통해 소개하거나 다운로드할 수 있습니다.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? Feb 28, 2024 am 08:39 AM

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? 프런트엔드 개발에서는 요소의 높이 속성을 조작해야 하는 경우가 종종 있습니다. 때로는 요소의 높이를 동적으로 변경해야 할 수도 있고 요소의 높이 속성을 제거해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 요소의 높이 속성을 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. jQuery를 사용하여 높이 속성을 연산하기 전에 먼저 CSS의 높이 속성을 이해해야 합니다. height 속성은 요소의 높이를 설정하는 데 사용됩니다.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? Feb 29, 2024 am 09:03 AM

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인

jQuery에서 eq의 역할 및 적용 시나리오 이해 Feb 28, 2024 pm 01:15 PM

jQuery는 웹 페이지에서 DOM 조작 및 이벤트 처리를 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에서 요소를 선택하는 데 사용됩니다. 구체적인 사용 및 적용 시나리오는 다음과 같습니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에 있는 요소를 선택합니다. 인덱스 위치는 0부터 계산되기 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다. eq() 메소드의 구문은 다음과 같습니다: $("s

PHP에서 일반적으로 사용되는 파일 작업 기능 요약 Apr 03, 2024 pm 02:52 PM

目录1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype( )11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：

See all articles

jQuery 생성자 초기화 매개변수 분석 continue_jquery

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제