Differenza tra l'utilizzo di hide, prop, attr o css per nascondere un elemento con JQuery - javascript, jquery

Ho impostato 4 div per testare i diversi risultati dell'utilizzo:

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

Posso vedere che il risultato è (sto usando la versione 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>

Mi sembra un po 'confuso avere quattro modi diversi per ottenere più o meno lo stesso risultato. Ho visto qualche spiegazione in .hide () o display: nessuno? jQuery ma mi chiedo se qualcuno possa fornire maggiori informazioni e soprattutto, quando dovrei usare quali ??

risposte:

//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);

Dipende tutto dal tuo stile di programmazione. Se funzionano tutti, puoi usare quello che ti piace di più. Cerca solo di essere coerente, se possibile, imho.

C'è sicuramente una differenza, ma non li coprirò tutti.

Una storia di vita reale:

Avevo appena un progetto, in cui avevo bisogno di filtrare gli elementi DOM in base alla loro proprietà di visualizzazione. Gli stessi elementi DOM sono stati impostati su "none", utilizzando .hide () e mostrati impostando .show ()

Questo utilizzo, sebbene breve e preciso, creava problemifiltraggio per proprietà di visualizzazione, poiché mostrava sempre "nessuno" in un output della console. Anche se l'elenco degli elementi mostrava "blocco". Quindi si verifica una memorizzazione nella cache usando .hide ()

Non vuoi solo usare quello che ti piace di più. Solo se ti piace di più quello che funziona per le tue esigenze specifiche;)