JQuery $ (dit) trefwoord

Waarom is het belangrijk om $(this)te gebruiken in plaats van opnieuw te selecteren van de klas?

Ik gebruik veel animate en CSS-bewerking in mijn code, en ik weet dat ik het kan vereenvoudigen door $(this)te gebruiken.

Antwoord 1, Autoriteit 100%

Wanneer u een DOM-query uitvoert door jQuery zoals $('class-name')IT heeft de DOM voor dat element actief doorzocht en retourneert dat element met alle JQuery Prototype-methoden bijgevoegd.

Wanneer u binnen de jQuery-keten of evenement bent, hoeft u de DOM-query niet opnieuw te gebruiken, kunt u de context $(this)gebruiken. Zoals SO:

$('.class-name').on('click', function(evt) {
    $(this).hide(); // does not run a DOM query
    $('.class-name').hide() // runs a DOM query
}); 

$(this)houdt het element dat u oorspronkelijk hebt aangevraagd. Het zal alle jQuery-prototype-methoden opnieuw bevestigen, maar hoeven niet opnieuw de DOM te doorzoeken.

Enkele meer informatie:

Web Prestaties met jQuery selectors

Citaat van een webblog die niet meer bestaat, maar ik laat het hier in voor de geschiedenis:

Naar mijn mening is een van de beste jQuery-prestatietips om uw gebruik van jQuery te minimaliseren. Dat wil zeggen, vind een balans tussen het gebruik van jQuery en effen ol ‘JavaScript en een goede plek om te beginnen is met’ This ‘. Veel ontwikkelaars gebruiken $ (deze) uitsluitend als hun hamer binnen callbacks en vergeten dit, maar het verschil onderscheidt:

Wanneer in de anonieme callback-functie van een jQuery-methode, is dit een
Verwijzing naar het huidige DOM-element. $ (dit) verandert dit in een jQuery
object en onthult de methoden van jQuery. Een jQuery-object is niets meer
dan een versterkte reeks DOM-elementen.

Antwoord 2, autoriteit 22%

$(document).ready(function(){
   $('.somediv').click(function(){
   $(this).addClass('newDiv'); // this means the div which is clicked
   });                         // so instead of using a selector again $('.somediv');
});                           // you use $(this) which much better and neater:=)

Antwoord 3, autoriteit 12%

Kijk eens naar deze code:

HTML:

<div class="multiple-elements" data-bgcol="red"></div>
<div class="multiple-elements" data-bgcol="blue"></div>

JS:

$('.multiple-elements').each(
    function(index, element) {
        $(this).css('background-color', $(this).data('bgcol')); // Get value of HTML attribute data-bgcol="" and set it as CSS color
    }
);

thisverwijst naar het huidige element waar de DOM-engine een soort van aan werkt, of verwijst naar.

Nog een voorbeeld:

<a href="#" onclick="$(this).css('display', 'none')">Hide me!</a>

Ik hoop dat je het nu begrijpt. Het thistrefwoord komt voor bij objectgeoriënteerde systemen, of zoals we in dit geval hebben, elementgeoriënteerde systemen 🙂

Antwoord 4, autoriteit 6%

Gebruik $(this)Verbetert de prestaties, zoals de klasse / het kenmerk dat u gebruikt om te zoeken, hoeft u niet meerdere keren in de gehele webpagina-inhoud te zoeken.

Antwoord 5, Autoriteit 3%

$(this)Retourneert een cachedversie van het element, dus verbetering van de prestaties omdat jQuery opnieuw geen volledige opzoeking in de DOM van het element hoeft te doen .

Antwoord 6, Autoriteit 3%

Ik ga je een voorbeeld laten zien die je zal helpen om te begrijpen waarom het belangrijk is.

Zoals een box-widgets en u wilt een aantal verborgen inhoud weergeven in elke widget. Je kunt dit gemakkelijk doen als je een andere CSS-klasse hebt voor de enkele widget, maar als het dezelfde klas heeft, hoe kun je dat doen?
Eigenlijk, daarom gebruiken we $ (deze)

** Controleer de code en voer het uit 🙂 **
voer de beeldbeschrijving in

 (function(){ 
            jQuery(".single-content-area").hover(function(){
                jQuery(this).find(".hidden-content").slideDown();
            })
            jQuery(".single-content-area").mouseleave(function(){
                jQuery(this).find(".hidden-content").slideUp();
            })
        })();

 .mycontent-wrapper {
      display: flex;
      width: 800px;
      margin: auto;
    }     
    .single-content-area  {
        background-color: #34495e;
        color: white;  
        text-align: center;
        padding: 20px;
        margin: 15px;
        display: block;
        width: 33%;
    }
    .hidden-content {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontent-wrapper">
    <div class="single-content-area">
        <div class="content">
            Name: John Doe <br/>
            Age: 33  <br/>
            Addres: Bangladesh
        </div> <!--/.normal-content-->
        <div class="hidden-content">
            This is hidden content
        </div> <!--/.hidden-content-->
    </div><!--/.single-content-area-->
    <div class="single-content-area">
        <div class="content">
            Name: John Doe <br/>
            Age: 33  <br/>
            Addres: Bangladesh
        </div> <!--/.normal-content-->
        <div class="hidden-content">
            This is hidden content
        </div> <!--/.hidden-content-->
    </div><!--/.single-content-area-->
    <div class="single-content-area">
        <div class="content">
            Name: John Doe <br/>
            Age: 33  <br/>
            Addres: Bangladesh
        </div> <!--/.normal-content-->
        <div class="hidden-content">
            This is hidden content
        </div> <!--/.hidden-content-->
    </div><!--/.single-content-area-->
</div><!--/.mycontent-wrapper-->