jQuery のこのキーワードのスキルに習熟してください-jsチュートリアル-php.cn

jQuery のこのキーワードのスキルに習熟してください

PHPz

リリース： 2024-02-24 12:09:08

オリジナル

966 人が閲覧しました

jQuery のこのキーワードのスキルに習熟してください

jQuery での this の使用上のヒントを解読する

jQuery を使用する過程で、このキーワードの使用が頻繁に発生します。これは現在選択されている要素を表す非常に重要なキーワードですが、状況によってはこのポインタが異なる場合があります。このキーワードの正しい使用方法を理解することが非常に重要です。この記事では、読者が this の使用法をよりよく理解して習得できるように、特定のコード例を通じて jQuery での this の使用スキルを解読します。

#クリックイベントのこれ

jQueryではクリックイベントがよく使われます。クリックイベントを要素にバインドすると、this キーワードを通じて現在クリックされている要素にアクセスできます。例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击事件中的this</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn").click(function(){
    alert($(this).text());
  });
});
</script>
</head>
<body>

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

</body>
</html>

ログイン後にコピー

上記のコードでは、ボタンをクリックすると、ポップアッププロンプトボックスに「Click me」と表示され、これが現在クリックされているボタン要素を指していることを示します。

トラバーサル要素のこれ

jQuery のトラバーサルメソッドを使用する場合、これは現在処理中の要素を表します。たとえば、 each メソッドでは、これは現在トラバースされている要素を表します。例は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历元素中的this</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("li").each(function(){
    alert($(this).text());
  });
});
</script>
</head>
<body>

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

</body>
</html>

ログイン後にコピー

上記の例では、 each メソッドは ul 要素以下の li 要素を走査し、これにより現在処理中の li 要素のテキスト内容を取得できます。

this のポインタを変更する

イベント処理関数で this のポインタを変更する必要がある場合があります。プロキシを使用できます。 jQuery によって提供されるメソッド。例は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变this的指向</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var obj = {
    value: "Hello",
    showMessage: function(){
      alert(this.value);
    }
  };

  $("#btn").click($.proxy(obj.showMessage, obj));
});
</script>
</head>
<body>

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

</body>
</html>

ログイン後にコピー

上の例では、obj.showMessage メソッドの this が $.proxy メソッドを通じて obj オブジェクトを指しており、ボタンを押すと「Hello」がポップアップ表示されます。クリックしました。

上記の具体的なコード例を通じて、読者が jQuery でのこれの使用法をより深く理解できることを願っています。このキーワードを正しく活用することで、DOM要素をより柔軟に操作でき、開発効率を向上させることができますので、読者の皆様もぜひ実践して実際の開発に応用して使いこなしていただければ幸いです。

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