jQuery와 document.querySelectorAll

jQuery의 가장 강력한 자산은 DOM의 요소를 쿼리하고 조작하는 방법이라는 여러 번 들었습니다. CSS 쿼리를 사용하여 일반 자바 스크립트에서 수행하기 어려운 복잡한 쿼리를 만들 수 있습니다. 그러나, 지금까지의 내가 아는 한, 같은과 결과를 얻을 수 있습니다 document.querySelector또는 document.querySelectorAll인터넷 익스플로러 8에서 지원됩니다.

따라서 문제는 이것입니다. 순수한 JavaScript로 가장 강력한 자산을 얻을 수 있다면 왜 '리스크'jQuery의 오버 헤드입니까?

jQuery에는 크로스 브라우저 AJAX, 멋진 이벤트 첨부 등과 같은 CSS 선택기 이상의 기능이 있습니다. 그러나 쿼리 부분은 jQuery의 장점 중 매우 큰 부분입니다!

이견있는 사람?

document.querySelectorAll() 브라우저간에 여러 불일치가 있으며 이전 브라우저에서는 지원 ^{되지 않습니다} . ^{오늘날에는 더 이상 문제가 발생하지 않습니다} . 그것은 매우 직관적이지 않은 범위 지정 메커니즘 과 다른 좋은 기능이 없습니다 . 또한 자바 스크립트를 사용하면 이러한 쿼리의 결과 세트로 작업하는 데 어려움이 있습니다. : jQuery를 같은 그들에 작업하는 기능을 제공 filter(), find(), children(), parent(), map(), not()그리고 몇 가지 더. 의사 클래스 선택기와 함께 작동하는 jQuery 기능은 말할 것도 없습니다.

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

jQuery의 선택기 엔진 만 원한다면 jQuery 자체를 사용하면됩니다. Sizzle 그렇게하면 과도한 오버 헤드없이 jQuerys 선택기 엔진의 성능을 얻을 수 있습니다.

편집 : 단지 기록을 위해, 나는 거대한 바닐라 JavaScript 팬입니다. 그럼에도 불구하고 때로는 1 줄 jQuery를 작성하는 곳에 10 줄의 JavaScript가 필요하다는 사실입니다.

물론 다음과 같이 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();

동등한 JavaScript는 위의 의사 코드에 의해 훨씬 더 복잡해집니다.

1) 요소를 찾고, 모든 요소를 ​​취하거나 첫 번째 요소 만 고려하십시오.

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

2) 일부 중첩 또는 재귀 루프를 통해 자식 노드 배열을 반복하고 클래스를 확인하십시오 (모든 브라우저에서 클래스 목록을 사용할 수는 없습니다!)

//.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
}

3) CSS 스타일 적용

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

이 코드는 jQuery로 작성하는 코드 라인의 최소 두 배입니다. 또한 기본 코드 의 심각한 속도 이점 (신뢰성 제외)을 손상시키는 브라우저 간 문제를 고려해야 합니다.

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

성능에 신경 쓰면 네이티브 자바 스크립트를 사용하여 놀라운 성능 이점을 얻을 수 있습니다 (2-10 빠름) .http : //jsperf.com/jquery-vs-native-selector-and-element-style/2

div-tagcloud를 jquery 에서 기본 자바 스크립트 (IE8 + 호환)로 변환했는데 결과가 인상적입니다. 약간의 오버 헤드로 4 배 더 빠릅니다.

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

Jquery가 필요하지 않을 수도 있습니다. Jquery는 브라우저 버전을 대체하는 기본 메소드를 제공합니다.

http://youmightnotneedjquery.com/

부록 : 네이티브 메소드가 jquery와 경쟁하는 방법에 대한 추가 속도 비교

• 배열 : $ .inArray 대 Array.indexOf : Jquery가 24 % 느려집니다.

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

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

• DOM : $ .find 대 Node.queryselectorall : Jquery 90 % 느림

• 배열 : $ .grep 대 배열 필터 : 기본 70 % 느림

• DOM : $ .show / hide 대 표시 없음 : Jquery 85 % 느림

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

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

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

jQuery가 왜 그렇게 인기가 있는지 이해하려면 우리가 어디에서 왔는지 이해하는 것이 중요합니다!

약 10 년 전, 최고 브라우저는 IE6, Netscape 8 및 Firefox 1.5였습니다. 그 당시에는 DOM 외에 요소를 선택하는 브라우저 간 방법이 거의 없었습니다 Document.getElementById().

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

10 년이 지난 지금, jQuery를 대중적으로 만든 많은 기능들이 자바 스크립트 표준에 포함되었습니다.

• jQuery 대신에 $()이제Document.querySelectorAll()
• 대신 jQuery의의 $el.on(), 당신은 지금 사용할 수 있습니다EventTarget.addEventListener()
• 대신 jQuery의의 $el.toggleClass(), 당신은 지금 사용할 수 있습니다Element.classList.toggle()
• ...

이것들은 일반적으로 2005 년에 다시 사용할 수 없었습니다. 오늘날 이들이 사실이라는 사실은 왜 우리가 jQuery를 사용해야하는지에 대한 의문을 제기합니다. 실제로 사람들은 jQuery를 전혀 사용해야하는지 궁금해하고 있습니다.

따라서 jQuery없이 JavaScript를 충분히 이해한다고 생각되면 수행하십시오! 다른 많은 사람들이 jQuery를 사용한다고해서 jQuery를 사용해야한다는 느낌을받지 마십시오!

jQuery가보다 많은 기능을 수행 할 수 있기 때문 querySelectorAll입니다.

우선 jQuery (특히 Sizzle)는 CSS2.1-3 선택기를 지원하지 않는 IE7-8과 같은 오래된 브라우저에서 작동합니다.

또한, Sizzle (jQuery 뒤의 선택기 엔진)은 :selected유사 클래스, 고급 :not()선택기,보다 복잡한 구문 등과 같은 고급 선택기 계측기 $("> .children")를 제공합니다.

또한 브라우저 간을 완벽하게 수행하여 jQuery가 제공 할 수있는 모든 것을 제공합니다 (플러그인 및 API).

예, 간단한 클래스 및 ID 선택기에 의존 할 수 있다고 생각하면 jQuery가 너무 많아서 과장된 대가를 지불하게됩니다. 그러나 그렇지 않은 경우 모든 jQuery의 장점을 활용하려면 사용하십시오.

jQuery의 Sizzle 선택기 엔진이 사용 querySelectorAll가능한 경우 사용할 수 있습니다. 또한 브라우저 간의 불일치를 매끄럽게하여 균일 한 결과를 얻습니다. 모든 jQuery를 사용하지 않으려면 Sizzle를 별도로 사용할 수 있습니다. 이것은 발명의 기본 요소입니다.

다음은 jQuery (w / Sizzle)가 정렬하는 것들을 보여주는 소스에서 체리 피킹입니다.

사파리 쿼크 모드 :

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).

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

주요한 것 중 하나는 문서화가 잘되어 있고 라이브러리에 대한 도움을 찾을 수있는 ... ex ... stackexchange와 같은 커뮤니티가 있다는 것입니다. 사용자 지정 코딩 된 라이브러리를 사용하면 코더가 코드를 작성하는 것보다 코드를 작성하는 데 더 많은 시간을 소비하지 않는 한 소스 코드 및 방법 문서가있을 수 있습니다.

자신의 라이브러리를 작성 하면 효과가있을 수 있습니다 ,하지만 다음 책상에 앉아 인턴은 쉽게 시간 jQuery를 같은과 속도에 점점이있을 수 있습니다.

원하는 경우 네트워크 효과라고합니다. 이것은 jQuery에서 코드가 우수하다고 말할 수는 없습니다. 코드의 간결한 특성은보고있는 파일에 한 번에 더 많은 기능적 코드가 표시되기 때문에 모든 기술 수준의 프로그래머를위한 전체 구조를보다 쉽게 ​​파악할 수 있다는 것입니다. 이런 의미에서 5 줄의 코드가 10보다 낫습니다.

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

동일한 속성을 적용하려면 예를 들어 "my-class"클래스의 모든 요소를 ​​숨 깁니다. 이것이 jQuery를 사용하는 이유 중 하나입니다.

jQuery :

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

자바 스크립트 :

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

jQuery가 이미 널리 사용 되었기 때문에 document.querySelector ()가 $ ()처럼 작동해야합니다. 대신 document.querySelector ()는 첫 번째 일치 요소 만 선택하므로 절반 만 유용합니다.

공식 사이트에 따르면 : "jQuery : 적은 쓰기, 더 많은 것, JavaScript 라이브러리"

라이브러리없이 다음 jQuery 코드를 번역하십시오.

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

진정한 대답은 jQuery가 오래 전에 개발되었다는 것입니다. querySelector/querySelectorAll 모든 주요 브라우저에서 사용 가능 .

jQuery의 초기 릴리스는 2006 년 이었습니다. 실제로 jQuery조차도 CSS 선택기를 구현 한 최초의 것은 아닙니다 .

IE는 마지막 으로 구현 한 브라우저였습니다querySelector/querySelectorAll . 그것의 제 8 버전 은 2009 년에 발표되었다 .

이제 DOM 요소 선택기는 더 이상 jQuery의 장점이 아닙니다. 그러나 여전히 요소의 CSS 및 HTML 내용을 변경하는 단축키, 애니메이션, 이벤트 바인딩, 아약스와 같은 많은 장점이 있습니다.

오래된 질문이지만 반 년 후에는 다시 방문 할 가치가 있습니다. 여기서는 jQuery의 선택기 측면 만 설명합니다.

document.querySelector[All]IE8까지 모든 현재 브라우저에서 지원 되므로 호환성은 더 이상 문제가되지 않습니다. 또한 성능 문제가 없다는 것을 알았습니다 (보다 느려 야 document.getElementById했지만 내 테스트에서 약간 더 빠름을 나타냅니다).

따라서 요소를 직접 조작하는 경우 jQuery보다 선호됩니다.

예를 들면 다음과 같습니다.

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

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

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

아무것도하지 않기 위해, 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에서 새로운 기능을 느리게 노출합니다.

위의 사항 중 어느 것도 중요하지 않으면 원하는대로하십시오. 그러나 최신 JavaScript 및 CSS가 이전보다 훨씬 더 많이 사용되므로 jQuery는 더 이상 플랫폼 간 개발에 중요하지 않습니다.

이것은 jQuery의 다른 기능에 대해서는 언급하지 않습니다. 그러나 나는 그들도 더 자세히 살펴볼 필요가 있다고 생각합니다.

$ ( "# id") vs document.querySelectorAll ( "# id")

거래는 $ () 함수를 사용하여 배열을 만든 다음 나눕니다. 그러나 document.querySelectorAll ()을 사용하면 배열이 만들어지고이를 분리해야합니다.

머티리얼 디자인 라이트를 사용할 때 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();