jQuery vs 문서.쿼리선택기모든.

jQuery vs 문서.쿼리선택기모든.

의 가장 하고 조작하는 번 . 하여 일반 에서 수 .Query의 가장 강력한 자산은 DOM의 요소를 쿼리하고 조작하는 방식이라고 여러 번 들었습니다. CSS 쿼리를 사용하여 일반 자바스크립트에서 매우 어려운 복잡한 쿼리를 만들 수 있습니다.하지만, 제가 아는 한, 당신은 같은 결과를 얻을 수 있습니다.document.querySelector또는document.querySelectorAll인터넷 익스플로러 8은 인터넷 익스플로러 8입니다.

따라서 질문은 이것입니다. jQuery의 가장 강력한 자산이 순수한 JavaScript로 달성될 수 있다면 jQuery의 오버헤드를 '리스크'하는 이유는 무엇일까요?

저는 jQuery가 CSS 선택기 이상을 가지고 있다는 것을 알고 있습니다. 예를 들어, 크로스 브라우저 AJAX, 멋진 이벤트 첨부 등입니다.하지만 쿼리 부분은 jQuery의 강점 중 매우 큰 부분을 차지합니다!

무슨 생각 있어요?

document.querySelectorAll() 브라우저 간에 몇 가지 불일치가 있으며 이전 브라우저에서는 지원되지 않습니다. ^{This probably won't cause any trouble anymore nowadays}.매우 직관적이지 않은 범위 지정 메커니즘과 다른 일부 기능이 있습니다.또한 javascript를 사용하면 이러한 쿼리의 결과 집합을 사용하는 데 어려움을 겪을 수 있습니다. jQuery는 다음과 같은 작업 기능을 제공합니다.filter(),find(),children(),parent(),map(),not()선택기로 할 수 것도 없습니다.의사 클래스 선택기로 작업할 수 있는 jQuery 기능은 말할 것도 없습니다.

하지만 저는 이러한 것들을 jQuery의 가장 강력한 기능으로 보지 않고 크로스 브라우저 호환 방식이나 Ajax 인터페이스를 통해 돔에서 "작업"(이벤트, 스타일링, 애니메이션 및 조작)과 같은 다른 기능으로 생각합니다.

jQuery의 셀렉터 엔진만 원하는 경우 jQuery 자체가 사용 중인 하나를 사용할 수 있습니다: Sizzle 그렇게 하면 끔찍한 오버헤드 없이 jQuery Selector 엔진의 힘을 얻을 수 있습니다.

편집: 참고로 저는 바닐라 자바스크립트의 열렬한 팬입니다.그럼에도 불구하고 당신이 1줄의 jQuery를 쓰는 자바스크립트가 때때로 10줄이 필요하다는 것은 사실입니다.

물론 이런 식으로 jQuery를 작성하지 않도록 교육을 받아야 합니다.

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

이것은 매우 읽기 어려운 반면 후자는 매우 명확합니다.

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

동등한 자바스크립트는 위의 유사 코드로 설명하면 훨씬 더 복잡할 것입니다.

요소를 찾고 모든 요소를 선택하거나 첫 번째 요소만 선택하는 것을 고려합니다.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

일부(네스트 또는 재귀적일 수 있음) 루프를 통해 하위 노드 배열을 반복하고 클래스를 확인합니다(클래스 목록을 일부 브라우저에서 사용할 수 없음!).

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

css 스타일을 적용합니다.

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

이 코드는 jQuery로 작성하는 코드 줄의 최소 두 배입니다.또한 (신뢰성 외에도) 네이티브 코드의 심각한 속도 이점을 손상시킬 수 있는 브라우저 간 문제도 고려해야 합니다.

IE8 이상 버전에 맞게 페이지를 최적화하는 경우 jquery가 필요한지 여부를 정말로 고려해야 합니다.최신 브라우저에는 jquery가 기본적으로 제공하는 많은 자산이 있습니다.

성능을 원하는 경우 네이티브 Javascript를 사용하여 놀라운 성능 이점(2-10배 빠름)을 얻을 수 있습니다. http://jsperf.com/jquery-vs-native-selector-and-element-style/2

저는 div-tagcloud를 jquery에서 네이티브 javascript(IE8+ 호환)로 변환했습니다. 그 결과는 인상적입니다. 약간의 오버헤드로 4배 더 빠릅니다.

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

Jquery가 필요하지 않을 수도 있습니다. 이러한 기본 메서드는 브라우저 버전을 대체합니다.

http://youmightnotneedjquery.com/

---

부록: 기본 메소드와 jquery의 경쟁 방식에 대한 추가 속도 비교

• 어레이: $.inArray 대 Array.indexOf: Jquery 24% 느림

• DOM: $.empty vs Node.innerHtml: Jquery 97% 느림

• DOM: $.on vs. Node.addEventListener: Jquery 90% 느림

• DOM: $.find vs. 노드.query selectorall: Jquery 90% 느림

• 어레이: $.grep vs Array.filter: 네이티브 70% 느림

• DOM: $.표시/숨기기 vs 표시 안 함: Jquery 85% 느림

• AJAX: $.ajax vs XMLHttpRequest: Jquery 89% 느림

• 높이: $.외부 높이 대 오프셋높이: Jquery 87% 느림

• 특성: $.attr 대 setAttribute: Jquery 86% 느림

jQuery가 인기 있는 이유를 이해하려면 우리가 어디서 왔는지 이해하는 것이 중요합니다!

약 10년 전만 해도 최고의 브라우저는 IE6, Netscape 8, Firefox 1.5였습니다.그 당시에는 DOM에서 요소를 선택할 수 있는 크로스 브라우저 방법이 거의 없었습니다.

그래서 2006년에 jQuery가 출시되었을 때, 그것은 꽤 혁명적이었습니다.당시 jQuery는 HTML 요소를 쉽게 선택/변경하고 이벤트를 트리거하는 방법에 대한 표준을 세웠습니다. 이는 유연성과 브라우저 지원이 전례가 없었기 때문입니다.

10여 년이 지난 지금, jQuery를 매우 인기 있게 만든 많은 기능들이 자바스크립트 표준에 포함되었습니다.

• 이제 jQuery 대신에
• 이제 jQuery 대신에
• 이제 jQuery 대신에
• ...

이것들은 2005년에는 일반적으로 사용할 수 없었습니다.그들이 오늘날 존재한다는 사실은 우리가 왜 jQuery를 사용해야 하는지에 대한 질문을 분명히 제기합니다.그리고 실제로 사람들은 우리가 jQuery를 사용해야 하는지에 대해 점점 더 궁금해하고 있습니다.

따라서, 만약 당신이 jQuery 없이도 할 수 있을 정도로 자바스크립트를 잘 이해하고 있다고 생각한다면, 그렇게 해주세요!다른 많은 사람들이 jQuery를 사용하고 있다고 해서 jQuery를 사용하도록 강요하지 마십시오!

는 jQuery보다 더 많은 것을 할 수 있기 querySelectorAll.

우선, jQuery(특히 Sizzle)는 CSS 2.1-3 선택기를 지원하지 않는 IE7-8과 같은 이전 브라우저에서 작동합니다.

또한 Sizzle(jQuery 뒤에 있는 셀렉터 엔진)은 다음과 같은 보다 진보된 셀렉터 기기를 많이 제공합니다.:selected 수업:not()selector는 기택같, 더복은구문과 더 $("> .children")등등.

또한 크로스 브라우저를 완벽하게 지원하여 jQuery가 제공할 수 있는 모든 기능(플러그인 및 API)을 제공합니다.

예, 단순한 클래스와 ID 셀렉터에 의존할 수 있다고 생각한다면 jQuery는 당신에게 너무 벅차고, 당신은 과장된 보수를 지불하게 될 것입니다.하지만 그렇게 하지 않고 모든 jQuery goods를 이용하고 싶다면, 그것을 사용하세요.

은 jQuery의 Sizzle을 사용할 수 .querySelectorAll결과를 수 있습니다.또한 브라우저 간의 불일치를 완화하여 균일한 결과를 얻을 수 있습니다. 사용하면 .jQuery를 모두 사용하지 않으려면 Sizzle만 따로 사용하면 됩니다.이것은 발명하기에 아주 기본적인 바퀴입니다.

다음은 jQuery(W/Sizzle)가 정리한 내용을 보여주는 소스의 체리 픽팅입니다.

Safari 쿼크 모드:

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

만약 그 가드가 실패한다면 그것은 그것을 사용합니다 그것은 향상되지 않은 Sizzle 버전입니다.querySelectorAll더 아래에는 IE, Opera 및 Blackberry 브라우저의 불일치에 대한 특정 핸들이 있습니다.

  // 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[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

다른 합니다.oldSizzle(query, context, extra, seed).

코드 유지 관리성 측면에서 널리 사용되는 라이브러리를 고수해야 하는 몇 가지 이유가 있습니다.

주요한 것 중 하나는 그들이 잘 문서화되어 있고, ...와 같은 커뮤니티를 가지고 있다는 것입니다.라이브러리에 대한 도움말을 찾을 수 있는 스택 교환을 예로 들 수 있습니다.사용자 지정 코딩 라이브러리를 사용하면 코드 작성자가 코드를 기록하는 데 거의 시간이 걸리지 않는 한 소스 코드와 사용 방법 문서가 있을 수 있습니다.

당신만의 도서관을 쓰는 것이 당신에게 도움이 될 수도 있지만, 옆 책상에 앉아 있는 인턴은 jQuery와 같은 것으로 속도를 내는 데 더 쉽게 시간을 보낼 수 있습니다.

원한다면 네트워크 효과라고 부르세요.이것은 코드가 jQuery에서 우수하다는 것을 의미하는 것이 아닙니다. 단지 코드의 간결한 특성이 모든 기술 수준의 프로그래머를 위한 전반적인 구조를 더 쉽게 파악할 수 있게 해준다는 것입니다. 단지 당신이 보고 있는 파일에 더 많은 기능 코드가 한 번에 표시되기 때문입니다.이런 의미에서 코드 5줄이 10줄보다 낫습니다.

요약하자면, 저는 jQuery의 주요 이점은 간결한 코드와 편재성이라고 생각합니다.

다음은 클래스 "my-class"의 모든 요소를 숨기는 것과 같은 동일한 속성을 적용하려는 경우의 비교입니다.이것이 jQuery를 사용하는 한 가지 이유입니다.

jQuery:

$('.my-class').hide();

JavaScript:

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

jQuery가 이미 매우 인기가 있기 때문에, 그들은 문서를 만들었어야 했습니다.querySelector()는 $()와 동일하게 동작합니다.대신 문서화합니다.querySelector()는 첫 번째 일치 요소만 선택하여 절반만 유용하게 만듭니다.

오래된 질문이지만, 5년 후에 다시 한 번 검토해 볼 가치가 있습니다.여기서 저는 jQuery의 셀렉터 측면에 대해서만 논의하고 있습니다.

document.querySelector[All]IE8까지 모든 현재 브라우저에서 지원되므로 호환성은 더 이상 문제가 되지 않습니다.또한 성능 문제에 대해서도 찾을 수 없습니다(보다 느릴 것으로 예상됨).document.getElementById하지만 제가 직접 테스트한 결과 약간 더 빠릅니다.)

따라서 요소를 직접 조작할 때는 jQuery보다 선호해야 합니다.

예:

var element=document.querySelector('h1');
element.innerHTML='Hello';

다음보다 훨씬 우수합니다.

var $element=$('h1');
$element.html('hello');

무엇이든 하기 위해서는 jQuery는 100줄의 코드를 실행해야 합니다(JQuery가 실제로 무엇을 하고 있었는지 확인하기 위해 위와 같은 코드를 통해 추적한 적이 있습니다).이것은 분명히 모든 사람들의 시간 낭비입니다.

jQuery의 또 다른 중요한 비용은 새 jQuery 개체 내의 모든 것을 래핑한다는 사실입니다.개체의 포장을 다시 뜯거나 개체 메서드 중 하나를 사용하여 원래 요소에 이미 노출된 속성을 처리해야 하는 경우 이 오버헤드가 특히 낭비됩니다.

그러나 jQuery의 장점은 컬렉션을 처리하는 방식입니다.여러 요소의 속성을 설정해야 하는 경우 jQuery에 내장된each다음과 같은 것을 허용하는 방법:

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

Vanilla JavaScript를 사용하려면 다음과 같은 작업이 필요합니다.

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

어떤 사람들은 그것을 위압적으로 생각합니다.

jQuery 선택기도 약간 다르지만 최신 브라우저(IE8 제외)는 큰 혜택을 받지 못할 것입니다.

일반적으로 새 프로젝트에 jQuery를 사용하지 않도록 주의합니다.

• jQuery는 프로젝트의 오버헤드와 타사에 대한 종속성을 추가하는 외부 라이브러리입니다.
• jQuery 기능은 처리 측면에서 매우 비쌉니다.
• jQuery는 학습해야 하는 방법론을 부과하며 코드의 다른 측면과 경쟁할 수 있습니다.
• jQuery는 JavaScript의 새 기능을 노출하는 속도가 느립니다.

위의 것들 중 아무 것도 중요하지 않다면, 당신이 하고 싶은 것을 하세요.그러나 jQuery는 현대 자바스크립트와 CSS가 예전보다 훨씬 더 발전함에 따라 크로스 플랫폼 개발에 더 이상 중요하지 않습니다.

이것은 jQuery의 다른 기능에 대해서는 언급하지 않습니다.하지만, 저는 그들 역시 더 자세히 볼 필요가 있다고 생각합니다.

공식 사이트에 나와 있듯이:"jQuery:더 적은 쓰기, 더 많은 작업 수행, JavaScript 라이브러리"

라이브러리 없이 다음 jQuery 코드를 번역해 봅니다.

$("p.neat").addClass("ohmy").show("slow");

저는 jQuery가 훨씬 전에 개발되었다는 것이 진정한 답이라고 생각합니다.querySelector/querySelectorAll모든 주요 브라우저에서 사용할 수 있게 되었습니다.

jQuery의 최초 출시는 2006년이었습니다.사실, 심지어 jQuery도 CSS 선택기를 구현한 첫 번째는 아니었습니다.

IE가 마지막으로 구현한 브라우저임querySelector/querySelectorAll8번째 버전은 2009년에 출시되었습니다.

이제 DOM 요소 선택기는 더 이상 jQuery의 가장 강력한 포인트가 아닙니다.그러나 요소의 css 및 html 콘텐츠를 변경하는 바로 가기, 애니메이션, 이벤트 바인딩, 아약스 등 여전히 많은 장점이 있습니다.

$("#id") 대 문서.쿼리SelectorAll("#id")

거래는 $() 함수를 사용하여 배열을 만든 다음 문서를 사용하여 분할하는 것입니다.querySelectorAll() 이것은 배열을 만들고 당신은 그것을 분해해야 합니다.

여기에 대한 설명입니다. 재료 설계 Lite를 사용할 때 jquery selector는 어떤 이유로 재료 설계 속성을 반환하지 않습니다.

대상:

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

효과:

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

이것은 그렇지 않습니다.

$('#myinputfield').parentNode.MaterialTextfield.change();

언급URL : https://stackoverflow.com/questions/11503534/jquery-vs-document-queryselectorall