javascript - with - select a tag in jquery




jQuery vs document.querySelectorAll (8)

Antiga pergunta, mas meia década depois, vale a pena revisitar. Aqui estou apenas discutindo o aspecto seletor do jQuery.

document.querySelector[All] é suportado por todos os navegadores atuais, até o IE8, então a compatibilidade não é mais um problema. Eu também não encontrei problemas de desempenho para falar (era para ser mais lento que document.getElementById , mas o meu próprio teste sugere que é um pouco mais rápido).

Portanto, quando se trata de manipular um elemento diretamente, ele deve ser preferido em relação ao jQuery.

Por exemplo:

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

é muito superior a:

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

Para fazer qualquer coisa, o jQuery tem que percorrer uma centena de linhas de código (uma vez rastrei através de código como o acima para ver o que o jQuery estava realmente fazendo com ele). Isto é claramente um desperdício do tempo de todos.

O outro custo significativo do jQuery é o fato de que ele envolve tudo dentro de um novo objeto jQuery. Essa sobrecarga é particularmente dispendiosa se você precisar desembrulhar o objeto novamente ou usar um dos métodos de objeto para lidar com propriedades que já estão expostas no elemento original.

Onde o jQuery tem uma vantagem, no entanto, está em como ele lida com as coleções. Se o requisito é definir propriedades de vários elementos, o jQuery possui um método embutido que permite algo assim:

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

Fazer isso com o Vanilla JavaScript exigiria algo assim:

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

que alguns acham assustadora.

Os seletores do jQuery também são um pouco diferentes, mas os navegadores modernos (excluindo o IE8) não terão muito benefício.

Como regra geral, aconselho a não usar o jQuery para novos projetos:

  • O jQuery é uma biblioteca externa que adiciona à sobrecarga do projeto e à sua dependência de terceiros.
  • A função jQuery é muito cara, em termos de processamento.
  • O jQuery impõe uma metodologia que precisa ser aprendida e pode competir com outros aspectos do seu código.
  • O jQuery é lento para expor novos recursos em JavaScript.

Se nenhum dos itens acima importa, faça o que quiser. No entanto, jQuery não é mais tão importante para o desenvolvimento de plataforma cruzada como costumava ser, já que o JavaScript e CSS modernos vão muito além do que costumavam fazer.

Isso não faz menção a outros recursos do jQuery. No entanto, acho que eles também precisam de um olhar mais atento.

Eu ouvi várias vezes que o ativo mais forte do jQuery é a forma como ele consulta e manipula elementos no DOM: você pode usar consultas CSS para criar consultas complexas que seriam muito difíceis de fazer no javascript normal. No entanto, até onde eu sei, você pode obter o mesmo resultado com document.querySelector ou document.querySelectorAll , que são suportados no Internet Explorer 8 e superior.

Então a questão é a seguinte: por que arriscar a sobrecarga do jQuery se seu ativo mais forte puder ser alcançado com JavaScript puro?

Eu sei que jQuery tem mais do que apenas seletores CSS, por exemplo, cross browser AJAX, evento agradável anexando etc. Mas sua parte de consulta é uma parte muito grande da força do jQuery!

Alguma ideia?


Apenas um comentário sobre isso, ao usar o material design light, o jquery selector não retorna a propriedade para design de material por algum motivo.

Para:

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

Isso funciona:

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

Isso não:

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

Em termos de capacidade de manutenção de código, existem várias razões para manter uma biblioteca amplamente usada.

Um dos principais é que eles são bem documentados e têm comunidades como ... digamos ... stackexchange, onde a ajuda com as bibliotecas pode ser encontrada. Com uma biblioteca codificada personalizada, você tem o código fonte e talvez um documento explicativo, a menos que o (s) programador (es) gaste mais tempo documentando o código do que escrevendo, o que é extremamente raro.

Escrevendo sua própria biblioteca pode funcionar para você , mas o estagiário sentado na próxima mesa pode ter um tempo mais fácil de se acostumar com algo como jQuery.

Chame isso de efeito de rede, se quiser. Isso não quer dizer que o código será superior em jQuery; só que a natureza concisa do código facilita a compreensão da estrutura geral para programadores de todos os níveis de habilidade, mesmo porque há mais código funcional visível ao mesmo tempo no arquivo que você está visualizando. Nesse sentido, 5 linhas de código são melhores que 10.

Para resumir, vejo os principais benefícios do jQuery como código conciso e onipresença.


Eu acho que a verdadeira resposta é que o jQuery foi desenvolvido muito antes do querySelector/querySelectorAll se tornar disponível em todos os principais navegadores.

A versão inicial do jQuery foi em 2006 . Na verdade, até mesmo o jQuery não foi o primeiro que implementou seletores CSS .

O IE foi o último navegador a implementar o querySelector/querySelectorAll . Sua 8ª versão foi lançada em 2009 .

Portanto, agora, os seletores de elementos DOM não são mais o ponto mais forte do jQuery. No entanto, ele ainda tem muitas coisas boas, como atalhos para alterar o conteúdo CSS e HTML do elemento, animações, vinculação de eventos, ajax.


O mecanismo seletor do jQuery Sizzle pode usar o querySelectorAll se estiver disponível. Ele também suaviza inconsistências entre os navegadores para obter resultados uniformes. Se você não quiser usar todo o jQuery, você pode usar o Sizzle separadamente. Esta é uma roda muito fundamental para inventar.

Aqui estão algumas escolhas da fonte que mostram o tipo de coisas que o jQuery (w / Sizzle) classifica para você:

Modo de peculiaridades do 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;
    }

Se esse guarda falhar, ele usa uma versão do Sizzle que não é aprimorada com o querySelectorAll . Mais abaixo, há alças específicas para inconsistências no IE, Opera e no navegador 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 );
  }

E se tudo mais falhar, retornará o resultado do oldSizzle(query, context, extra, seed) .


Para entender por que o jQuery é tão popular, é importante entender de onde estamos vindo!

Cerca de uma década atrás, os principais navegadores eram o IE6, o Netscape 8 e o Firefox 1.5. Naquela época, havia poucas formas de navegação cruzada para selecionar um elemento do DOM além de Document.getElementById() .

Então, quando o jQuery foi lançado em 2006 , foi bem revolucionário. Naquela época, o jQuery definia o padrão de como selecionar / alterar facilmente elementos HTML e acionar eventos, porque sua flexibilidade e suporte ao navegador eram inéditos.

Agora, mais de uma década depois, muitos recursos que tornaram o jQuery tão popular tornaram-se incluídos no padrão javaScript:

Estes não estavam geralmente disponíveis em 2005. O fato de que eles são hoje, obviamente, levanta a questão de por que devemos usar jQuery em tudo. E, de fato, as pessoas estão cada vez mais imaginando se deveríamos usar o jQuery .

Então, se você acha que entende bem o JavaScript para fazer sem o jQuery, por favor, faça! Não se sinta forçado a usar o jQuery, apenas porque muitos outros estão fazendo isso!


como diz o site oficial: "jQuery: o Write Less, Do More, Biblioteca JavaScript"

tente traduzir o seguinte código jQuery sem qualquer biblioteca

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

document.querySelectorAll() tem várias inconsistências nos navegadores e não é suportado em navegadores mais antigos. Isso provavelmente não causará mais nenhum problema hoje em dia . Tem um mecanismo de escopo muito intuitivo e alguns outros recursos não tão bons . Também com o javascript, você tem mais dificuldade em trabalhar com os conjuntos de resultados dessas consultas, o que, em muitos casos, talvez você queira fazer. O jQuery fornece funções para trabalhar nelas como: filter() , find() , children() , parent() , map() , not() e várias outras. Sem mencionar a capacidade do jQuery de trabalhar com seletores de pseudo-classe.

No entanto, eu não consideraria essas coisas como os recursos mais fortes do jQuery, mas outras coisas como "trabalhar" no dom (eventos, estilo, animação e manipulação) de um modo compatível com crossbrowser ou a interface ajax.

Se você quer apenas o mecanismo de seleção do jQuery, você pode usar o que o próprio jQuery está usando: Sizzle Dessa forma, você tem o poder do mecanismo de seleção do JQuerys sem a sobrecarga desagradável.

EDIT: Apenas para o registro, eu sou um grande fã de JavaScript de baunilha. No entanto, é um fato que você às vezes precisa de 10 linhas de JavaScript onde você escreveria 1 linha jQuery.

Claro que você tem que ser disciplinado para não escrever jQuery assim:

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

Isso é extremamente difícil de ler, enquanto o último é bem claro:

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

O JavaScript equivalente seria muito mais complexo ilustrado pelo pseudocódigo acima:

1) Encontre o elemento, considere pegar todos os elementos ou apenas o primeiro.

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

2) Iterar sobre a matriz de nós filhos através de alguns loops (possivelmente aninhados ou recursivos) e verificar a classe (lista de classes não disponível em todos os navegadores!)

//.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) aplicar o estilo css

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

Esse código seria pelo menos duas vezes mais linhas de código que você escreve com jQuery. Além disso, você teria que considerar os problemas entre navegadores que comprometerão a grande vantagem de velocidade (além da confiabilidade) do código nativo.





jquery-selectors