jQuery 메소드의 기본 JavaScript 등가 : DOM 및 FORMS

코어 포인트

jQuery는 레거시 인터넷 익스플로러를 지원하거나 응용 프로그램을 개발하는 것보다 더 긴 jQuery와 같은 라이브러리를 작성 해야하는 개발자에게 유용한 도구입니다. 그러나 대부분의 다른 경우에는 기본 JavaScript를 사용하는 것이 jQuery와 같은 큰 라이브러리를로드 할 필요가 없기 때문에 더 효율적입니다.

DOM SELECTORS 및 DOM 운영과 같은 일반적으로 사용되는 JQuery 방법의 기본 JavaScript 동등 요소는 일반적으로 jQuery 상대보다 더 빠르고 효율적으로 실행됩니다. 예를 들어, 또는

를 사용하는 것이 jQuery의 html5는 양식 검증을 위해 추가 자바 스크립트 또는 jQuery 코드를 추가하지 않고 다양한 일반적인 입력 유형에 대한 내장 지원을 제공합니다. 이러한 새로운 유형을 지원하지 않는 이전 브라우저는 표준 텍스트 입력 필드로 복원되며 서버 측 확인이 필요합니다.
• 내 최근 "jQuery가 정말로 필요합니까? 》 기사, 토론은 계속되지만 간단히 말해서 jQuery를 사용해야하는 두 가지 이유가 있습니다. 1. IE6/7/8을 지원해야합니다 (jQuery 2.0으로 마이그레이션 할 수 없음을 기억하십시오). 개발보다 더 많은 비용을 지출합니다. 응용 프로그램은 jQuery와 같은 라이브러리를 작성하는 데 시간이 오래 걸립니다. document.getElementsByClassName 다른 모든 상황에 대해 실용적으로하십시오. jQuery는 270KB 범용 라이브러리입니다. 특정 모듈을 생략하더라도 여전히 큰 코드 덩어리입니다. CDN에서 30kb의 최소화 된 버전을로드 할 수 있지만 브라우저는 다른 작업을 수행하기 전에 각 페이지의 처리를 중지하고 각 페이지의 코드를 구문 분석해야합니다. 이것은 일반적으로 사용되는 JQuery 메소드와 동등한 원시 JavaScript에 해당하는 일련의 기사 중 첫 번째입니다. 이들 중 일부를 짧고 비슷한 별칭 기능으로 포장하고 싶을 수도 있지만, 자신만의 jQuery와 같은 라이브러리를 만들 필요는 없습니다. document.getElementById $() dom selector
jQuery는 CSS 선택기 구문을 사용하여 DOM 노드를 선택할 수 있습니다.
• 기본 등가 :

는 모든 최신 브라우저 및 IE8에서 구현됩니다 (CSS2.1 선택기 만 지원하지만). JQuery는 고급 선택기를위한 추가 지원을 제공하지만 대부분

래퍼 내에서 실행됩니다. Native JavaScript는 또한 네 가지 대안을 제공합니다.

보다 거의 빠릅니다.

1. - 첫 번째 일치 노드 만 가져옵니다 - ID 이름으로 단일 노드를 받으 document.querySelector(selector)
- 요소와 일치하는 노드 (예 : h1, p, strong 등)를 가져옵니다.
2. - 특정 클래스 이름의 노드를 얻으십시오 document.getElementById(idname)
3. 및 document.getElementsByTagName(tagname) 메소드는 단일 노드에도 적용하여 결과를 자손으로만 제한 할 수 있습니다.
테스트를 해보자. 나는 "jQuery가 정말로 필요합니까?" 》 기사에서 모든 주석 노드를 10,000 번 검색합니다. 결과 : <.>
4. 나는 엄격한 실험실 조건을 주장 할 수 없으며 실제 사용량을 반영하지는 않지만이 경우 기본 JavaScript는 60 배 빠릅니다. 또한 ID, 태그 또는 클래스로 노드를 얻는 것이 일반적으로

   보다 낫습니다. querySelectorAll

   DOM 작동

   jQuery는 다음과 같은 DOM에 더 많은 방법을 추가하는 몇 가지 방법을 제공합니다. 표면 아래에서 jQuery는 메소드를 사용합니다.

   DOM 빌드 기술을 사용할 수도 있습니다. 이것들은 더 안전하지만

   :

   보다 훨씬 빠릅니다

   <code class="language-javascript">// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
   var n = $("article#first p.summary");</code>

   우리는 또한 jQuery에서 모든 자식 노드를 삭제할 수 있습니다 :

   avivalents를 사용하는 : innerHTML 또는 작은 기능 :

   마지막으로, 우리는 jQuery에서 dom에서 전체 요소를 삭제할 수 있습니다 : .

   <code class="language-javascript">var n = document.querySelectorAll("article#first p.summary");</code>

   또는 기본 JavaScript :

   innerHTML 확장 가능한 벡터 그래픽 (svg)

   <code class="language-javascript">var n = document.getElementById("first");
   var p = n.getElementsByTagName("p");</code>

   Core JQuery Library는 현재 문서를 처리하기 위해 개발되었습니다. SVG에는 DOM이 있지만 jQuery는 일반적으로 및 와 같은 방법이 필요하기 때문에 이러한 물체에 직접 조작하지 않습니다. 사용 가능하고 몇 가지 플러그인이 있지만 자신의 코드를 작성하거나 Raphaël 또는 Svg.js와 같은 전용 SVG 라이브러리를 사용하는 것이 더 효율적입니다.
   html5 양식

   <code class="language-javascript">$("#container").append("<p>more content</p>");</code>

   가장 기본적인 웹 응용 프로그램조차도 하나 또는 두 개의 양식을 갖습니다. 서버 측의 사용자 데이터를 항상 확인해야하지만 이상적으로는 양식을 제출하기 전에 오류를 잡을 수 있도록 클라이언트 확인을 보완하는 것이 이상적입니다. 클라이언트 확인은 간단합니다. 1. 양식을 제출할 때 함수 실행. 2. 문제가 발생하면 제출을 중지하고 오류를 표시하십시오. innerHTML jQuery를 사용할 수 있습니다. 기본 JavaScript를 사용할 수 있습니다. 어느 것을 선택해야합니까? 둘 다

   를 선택하지 않습니다. HTML5는 일반 표현식을 기반으로 이메일, 전화, URL, 번호, 시간, 날짜, 색상 및 사용자 정의 필드와 같은 다양한 일반적으로 사용되는 입력 유형을 지원합니다. 예를 들어, 사용자에게 이메일 주소를 입력하도록 강요하려면 다음을 사용하십시오.

   <code class="language-javascript">document.getElementById("container").innerHTML += "<p>more content</p>";</code>

   더 복잡한 기능 (예 : 둘 이상의 필드 비교 또는 사용자 정의 오류 메시지 표시 등)이 필요하지 않으면 추가 JavaScript 또는 jQuery 코드가 필요하지 않습니다. 구형 브라우저 (IE9 이하 포함)는 새로운 유형을 이해하지 못하고 표준 텍스트 입력 필드로 복원됩니다. 이 사용자는 서버 측 확인으로 돌아갑니다. 이것은 훌륭한 경험이 아니지만,이 사람들이 빛과 업그레이드를 볼 수 있기를 바랍니다. 다음 게시물에서는 기본 CSS 클래스 작업 및 애니메이션을 살펴 보겠습니다.
   jQuery 및 기본 JavaScript에 대한 FAQS

   <code class="language-javascript">var p = document.createElement("p");
   p.appendChild(document.createTextNode("more content"));
   document.getElementById("container").appendChild(p);</code>

   (FAQ 부분은이 부분의 내용이 그림 및 기사 주제와 약하게 관련되어 있고 기사가 더 길어서 별도로 처리 할 수 ​​있기 때문에 여기서 생략됩니다.)

   .

위 내용은 jQuery 메소드의 기본 JavaScript 등가 : DOM 및 FORMS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!