Diferença entre usar hide, prop, attr ou css para ocultar um elemento com JQuery - javascript, jquery

Eu configurei 4 divs para testar os diferentes resultados do uso de:

$("#div1").hide();
$("#div2").prop("hidden", true);
$("#div3").css("display","none");
$("#div4").attr("hidden", true);

Posso ver que o resultado é (estou usando a versão 1.11.3):

<div id="div1" style="display: none;">Something</div>
<div id="div2" hidden="">Something</div>
<div id="div3" style="display: none;">Something</div>
<div id="div4" hidden="hidden">Something</div>

Parece meio confuso para mim ter quatro maneiras diferentes de atingir praticamente o mesmo resultado. Eu vi alguma explicação em .hide () ou display: nenhum? jQuery mas gostaria de saber se alguém pode fornecer mais informações e principalmente, quando devo usar quais ??

Respostas:

//this is a wrapper function.  simply adds display none inline.  for ease of use
$("#div1").hide();
//prop is used to manipulate any property on the object.  hidden is a property.  so it doesn"t stop you from doing it.
$("#div2").prop("hidden", true);
//css is a wrapper for the style attribute.  display is a valid css property so it won"t stop it
$("#div3").css("display","none");
//this one seems odd.  i thought it would be hidden="hidden"  but anyway.  attr() is used to change the attributes on the markup.  hidden is a valid attribute so it doesn"t stop you
$("#div4").attr("hidden", true);

É tudo uma questão de seu estilo de codificação. Se todos eles funcionarem, você pode usar aquele que você mais gosta. Apenas tente ser consistente se possível, imho.

Com certeza há uma diferença, mas não vou cobrir todos eles.

Uma história da vida real:

Acabei de ter um projeto, no qual precisava filtrar os elementos DOM por sua propriedade de exibição. Os mesmos elementos DOM foram definidos como "nenhum", usando .hide () e mostrados pela definição .show ()

Este uso, embora curto e claro, criou problemasfiltrando por propriedade de exibição, pois sempre mostrava "nenhum" na saída do console. Mesmo que a lista de elementos mostre "bloco". Portanto, um cache ocorre usando .hide ()

Você não quer apenas usar o que você mais gosta. Somente se você gosta do que funciona para suas necessidades específicas;)