jFragen Sie dieses Schlüsselwort

  2. How-To's
  3. jQuery-Anleitungen
  4. jFragen Sie dieses Schlüsselwort
Ankit Raj Goyal 21 Juni 2023
jQuery jQuery Keyword
  1. jQuery-Keyword this als DOM-Element
  2. Verwenden Sie das jQuery-Schlüsselwort this als DOM-Element in einem Callback
  3. Verwenden Sie das jQuery-Schlüsselwort this als DOM-Element im Callback der each()-Methode
  4. Verwenden Sie das jQuery-Schlüsselwort this als DOM-Element in der AJAX-Methode load()
  5. Verwenden Sie das jQuery-Schlüsselwort this als DOM-Element im Callback zur filter()-Methode
  6. Verwenden Sie das jQuery-Schlüsselwort this als allgemeines Objekt
  7. Verwenden Sie das jQuery-Schlüsselwort this als jQuery-Objekt in einem Plug-in
jFragen Sie dieses Schlüsselwort

Das jQuery-Schlüsselwort this ermöglicht es Entwicklern daher, Methoden und Eigenschaften des aktuellen Objekts zu verwenden, ohne neue Suchen oder Nachschlagen durchführen zu müssen. Dieses Tutorial zeigt mehrere Anwendungsfälle des Schlüsselworts this in verschiedenen Kontexten.

jQuery-Keyword this als DOM-Element

Die häufigste Verwendung des jQuery-Schlüsselworts this ist, wenn es sich auf ein DOM-Element bezieht. Sie können sogar eine Faustregel haben, dass Sie höchstwahrscheinlich diesen Anwendungsfall verwenden würden, wenn Sie nicht speziell jQuery-Plug-Ins erstellen.

Das jQuery-Schlüsselwort this könnte Sie zunächst verwirren. jQuery (und andere Programmiersprachen) stellen das this-Schlüsselwort als hilfreiches Werkzeug bereit, und in den meisten Fällen ist der Wert des jQuery-Schlüsselworts this leicht herauszufinden – es zeigt auf das Objekt, die Klasse oder Entität, die es intuitiv enthält beziehen sollte.

Verwenden Sie das jQuery-Schlüsselwort this als DOM-Element in einem Callback

Die wahrscheinlichste Entität, auf die sich der Code in Ihrem Callback beziehen muss, ist das DOM-Element, das der Callback überwacht. jQuery setzt also in diesem Fall das Schlüsselwort this auf das aufrufende DOM-Element. (Sie können sehen, dass unsere Daumenregel ziemlich gut funktioniert.)

Code - JavaScript + jQuery:

// this as a jQuery DOM button element inside a callback
$("#DOM_button").on("click",function(){
    $("p").html(`The value of 'this' keyword inside the DOM button element is ${$(this).attr('id')}`);
    //use case - you can deactivate the button easily without another DOM search call
    $(this).prop("disabled",true);
});

Code - HTML:

<body>
    <div id="triggers">
        <!-- Button DOM element -->
        <button id="DOM_button">I am a DOM button element</button>
    </div>
</body>

Unser Code protokolliert den Wert des Schlüsselworts this innerhalb des Callbacks zum click-Event-Handler, der auf das DOM_button-Element lauscht. Möglicherweise möchten Sie einige Eigenschaften des DOM-Elements ändern, auf das der Ereignishandler lauscht.

Beispielsweise deaktivieren wir das Element DOM_button. Dies ist ein häufiger Anwendungsfall des Schlüsselworts this in diesem Zusammenhang.

Ausgang:

this als DOM-Element in einem Callback

Verwenden Sie das jQuery-Schlüsselwort this als DOM-Element im Callback der each()-Methode

Wenn Sie mit der Methode each() über eine jQuery-Sammlung iterieren, möchten Sie auf jedes DOM-Element innerhalb des Callbacks zugreifen. jQuery setzt das Schlüsselwort this innerhalb des Methoden-Callbacks each auf das aktuelle DOM-Element.

Code - JavaScript + jQuery:

//this as each DOM element inside a jQuery collection
$("#div_button").on("click",function(){
    $("p").html(" ");
    $("#div_container>div").each(function(idx){
        $("p").append(`The value of 'this' keyword inside child div ${idx + 1} is ${$(this).attr('id')} <br>`);
    });
});

Code - HTML:

<body>
<div id="div_container">
            <button id="div_button">
                "each" Method Demo
            </button>
            <div id="first_div">
                I am the First Div <br>
            </div>
            <div id="second_div">
                I am the Second Div <br>
            </div>
            <div id="third_div">
                I am the Third Div <br>
            </div>
    </div>
</body>

Ausgang:

&rsquo;this&rsquo;-Schlüsselwort innerhalb des Rückrufs für die each()-Methode

jQuery weist dem aktuellen Element div in jeder Iteration das Schlüsselwort this zu.

Verwenden Sie das jQuery-Schlüsselwort this als DOM-Element in der AJAX-Methode load()

Wenn Sie einen AJAX-Aufruf mit der load()-Methode in jQuery machen, verweist es das this-Schlüsselwort innerhalb des Callbacks auf das DOM-Element, auf dem Sie die load()-Methode ausführen.

Auch hier stimmt der Wert des jQuery-Schlüsselworts this ohne die Faustregel überein – in den meisten Fällen zeigt das Schlüsselwort this auf das Objekt, die Klasse oder Entität, auf die Sie natürlich zugreifen müssten.

Code - JavaScript + jQuery:

// //ajax request with the load method
$("#ajax_btn").on("click",function(){
            $("#ajax_this").load("http://127.0.0.1:5500/code_files/test.html",
            function(){
                $("p").html(`The value of 'this' keyword inside the 'load' method to send the                           AJAX request is ${$(this).attr('id')}`);
                //use case - you want to style it when a successful data fetch completes
                $(this).css("color","green");
            })
        });

Wir führen die jQuery AJAX-Methode load aus, um Daten aus der Datei test.html auf demselben Server abzurufen. Wir geben den Wert des Schlüsselworts this innerhalb des Callbacks an die Methode load() aus, die ausgeführt wird, wenn die AJAX-Anforderung abgeschlossen ist.

Code - HTML:

    <div id="ajax_this">
        <button id="ajax_btn">
            AJAX Call Demo
        </button><br>
        <br>
        <div id="ajax_text">
            I demo the use of this as DOM element with an AJAX call
        </div>
    </div>

Ausgang:

this als DOM-Element, an das wir die AJAX-Methode load anhängen

Ein häufiger Anwendungsfall ist, wenn wir die Ausgabe bei einem erfolgreichen AJAX-Aufruf grün codieren möchten. In unserer Ausgabedemo oben zeigen wir beispielsweise die Ausgabe in Grün an.

In diesem Beispiel haben wir einen AJAX-Aufruf an die Ressource test.html auf demselben Server getätigt.

Code - test.html:

<title>Test HTML Page</title>
</head>
<body>
    <div id="main">
        <div id="top">
            <h3>
                We dish out a test page for our AJAX request on localhost.
            </h3>
        </div>
        <div id="mid">
            <h3>
                The request completes and returns the data that displays on the page.
            </h3>
        </div>

    </div>
</body>
</html>

Verwenden Sie das jQuery-Schlüsselwort this als DOM-Element im Callback zur filter()-Methode

Wenn Sie die Methode filter() für eine jQuery-Sammlung verwenden, um eine Teilmenge auszuwählen, möchten Sie bei jeder Iteration schnell auf das aktuelle DOM-Element in der Sammlung zugreifen. jQuery setzt das Schlüsselwort this innerhalb des Callbacks der Methode filter auf das aktuelle Element.

Das Schlüsselwort this bezieht sich auf das Objekt, das wir am intuitivsten erwarten.

Code - JavaScript + jQuery:

//this as the current DOM element inside the filter function in each iteration
$("#filter_this").on("click",function(){
    let $filterSet = $("div").filter(function(){
       return $(this).attr("id") == "selection_filter_this";
    });
    $("p").html(`The filtered set of div elements with the use of 'this' keyword are those with ID = : ${$filterSet.first().attr('id')}`);
});

Code - HTML:

<body>
<div id="selection_filter_this">
            <div id="filter_text">
                I demo the use of this as DOM element with a selector filter
            </div>
            <button id="filter_this">
                This keyword with the filter method
            </button>
        </div>
</body>

Ausgang:

&rsquo;this&rsquo;-Schlüsselwort innerhalb des Rückrufs an die &lsquo;filter&rsquo;-Methode

Wir sehen, dass wir div-Elemente filtern, um nur diejenigen auszuwählen, die mit der ID selection_filter_this mit dem Schlüsselwort this im Callback übereinstimmen. Wir zeigen dann die ID des gefilterten Elements an.

Verwenden Sie das jQuery-Schlüsselwort this als allgemeines Objekt

jQuery-Methoden wie die each()-Methode können über jedes Array-ähnliche Objekt iterieren. Sie beschränken sich nicht nur auf das Durchschleifen von DOM-Elementen.

Wenn wir eine jQuery-Methode wie each() verwenden, um eine Array-ähnliche Struktur zu durchlaufen, benötigen wir natürlich Zugriff auf die aktuelle Entität in der Iteration. Daher setzt jQuery in solchen Situationen das Schlüsselwort this auf das aktuelle Objekt.

Code - JavaScript + jQuery:

// this as the current object in each iteration of the 'each' method
let objEachArr = ["First","Second","Third"];
$('#object_each_btn').on("click",function(){
    $("p").html("");
    $.each(objEachArr,function(curr){
        $("p").append(`The value of 'this' keyword in the current iteration of the 'each' method is  ${this} <br><br>`);
    });
});

Code - HTML:

<body>
<div id="object_each_div">
            <div id="object_each_text">
            I demo the use of 'this' as the current object in every iteration of the 'each' method.
            </div>
            <button id="object_each_btn">
                'This' in 'each' Method
            </button>
        </div>
    <div id="results">
        <p>
            We will display the results here.
        </p>
    </div>
</body>

Wir geben den Wert des Schlüsselworts this in jeder Iteration der Methode each über das Array objEachArr aus.

Ausgang:

&rsquo;this&rsquo;-Schlüsselwort in jeder Iteration der &rsquo;each&rsquo;-Methode

Wir sehen, dass sich das Schlüsselwort this in jeder Iteration der each()-Methode auf das aktuelle Array-Element bezieht.

Verwenden Sie das jQuery-Schlüsselwort this als jQuery-Objekt in einem Plug-in

Es gibt einen Sonderfall für das jQuery-Schlüsselwort this. Wenn wir das Schlüsselwort this in einem Plug-in verwenden, bezieht es sich auf das jQuery-Objekt.

Code - JavaScript + jQuery:

/this as the jQuery Object inside a jQuery Plug-In
$.fn.plugInDemo = function(){
this.html(`The 'this' keyword inside my plug-in is the jQuery Object and we output the jQuery Version
 from this jQuery Object : ${this.jquery}`);
return this;
};

$("#plugin_btn").on("click",function(){
    $("p").plugInDemo();
});

Code - HTML:

<body>
<div id="plugin_div">
            <div id="plugin_text">
                I demo the use of 'this' inside a jQuery Plugin.
            </div>
            <button id="plugin_btn">
                'This' inside a Plug-In
            </button>
    </div>
    <div id="results">
        <p>
            We will display the results here.
        </p>
    </div>
</body>

Wir geben die jQuery-Version aus, indem wir über das Schlüsselwort this innerhalb unserer einfachen Plug-in-Funktion plugInDemo auf das jQuery-Objekt zugreifen.

Ausgang:

&rsquo;this&rsquo;-Schlüsselwort in einem Plug-in

Das jQuery-Schlüsselwort this ist ein leistungsstarkes Tool, um schnell auf das aktuelle Objekt, die Klasse oder die Entität zuzugreifen, ohne neue DOM-Suchen durchführen zu müssen, und ist eine großartige Methode, um die App-Leistung zu steigern.