jQuery でこのキーワードを使用する賢い方法

jQuery でのこのキーワードの柔軟な使用

jQuery では、このキーワードは非常に重要で柔軟な概念であり、現在の操作を参照するために使用されます。 。このキーワードを合理的に使用することで、ページ上の要素を簡単に操作し、さまざまなインタラクティブな効果や機能を実現できます。この記事では、特定のコード例を組み合わせて、jQuery でのこのキーワードの柔軟な使用方法を紹介します。

1. この単純な例

まず、この単純な例を見てみましょう。ボタン要素があるとします。ボタンがクリックされると、ボタンのテキストの内容が「クリックされました」に変更されます。これは、次の方法で実現できます。

<button id="myButton">点击我</button>

<script>
$(document).ready(function(){
    $("#myButton").click(function(){
        $(this).text("已点击");
    });
});
</script>

上記のコードでは、this キーワードを使用することで、現在クリックされているボタン要素を直接参照し、そのテキスト コンテンツを「クリック済み」に変更できます。

2. これをイベント処理に適用する

このキーワードはイベント処理でよく使用され、イベントをトリガーする要素を便利に操作できます。たとえば、複数のボタンが含まれるリストがあるとします。ボタンをクリックすると、ボタンのテキスト コンテンツが表示されます:

<ul>
    <li><button>按钮1</button></li>
    <li><button>按钮2</button></li>
</ul>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(this).css("color", "red");
    });
});
</script>

上記のコードでは、いずれかのボタンをクリックすると、現在のキーワードが参照されます。 this キーワード button 要素をクリックし、ボタンのテキストの色を赤に変更します。

3. これを each() メソッドで使用します

jQuery では、each() メソッドを使用して、一致する要素のコレクションを走査し、各要素に対して指定された関数を実行します。 。 each() メソッドでは、 this キーワードは現在トラバースされている要素を表します。たとえば、リストがあり、各リスト項目にシリアル番号を追加する必要があります。

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

<script>
$(document).ready(function(){
    $("ul li").each(function(index){
        $(this).prepend(index + 1 + ". ");
    });
});
</script>

上記のコードでは、 each() メソッドとこのキーワードを使用して、対応する番号を各リストに追加できます。アイテムのシリアル番号。

上記の例を通じて、jQuery でこのキーワードを柔軟に使用できることがわかります。 this キーワードを適切に使用すると、コードが簡素化され、DOM 要素を簡単に処理できます。この記事が、jQuery でのこのキーワードの適用を理解し、習得するのに役立つことを願っています。

以上がjQuery でこのキーワードを使用する賢い方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。