jQuery find（）：ステップバイステップガイド

jQuery find() メソッドはおなじみのように聞こえるかもしれませんが、JavaScriptメソッドのfind()!と混同しないでください。どちらも物事を「見つける」が、返されるものはまったく異なる可能性がある。 JavaScriptでは、find() メソッドは配列でのみ呼び出すことができます。

後で呼び出されるように、引数としてメソッドに渡される関数であるコールバック関数を取ります。コールバック関数で概説されている要件を満たす最初の要素を見つけて返します。

jQuery find() 方法はかなり異なります。すべてのjQueryメソッドと同様に、セレクターで呼び出されます。そのセレクター内を検索し、そのセレクターの子要素のみを操作します。この高レベルの操作は、同じ親要素に含まれている他の要素ではなく、一部の要素を変更する場合に役立ちます。

jQuery find（）の使用

jQueryのfind()がわかりました特定のセレクターのすべての子要素を選択するために使用されます。いくつかのサンプルコードを見て、jQuery find()の使用方法を確認してください。。

単純なものから始めて、次のセクションで複雑さを追加してみましょう。ページの読み込み後に要素を操作して、find()の方法を説明できます。動作します。ページが読み込まれたら、段落のコンテキストでいくつかの単語の色を変更するのはどうですか？ここから始めましょう：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
jQuery find() method example
</h2>
  <p>
  This is an example paragraph. 
  </p>
  <p>We are going to change the color <span>blue</span> to the color blue.</p>
<div class="green">We are going to change the word <span>green</span> to the color green.</div> 
<p>
Every other will word will stay the same. 
</p>

</div>

このコードを見ると、

要素の中にいくつかの要素があることがわかります。要素の1つは、

要素の子です。もう1つのは、クラスが緑の

の子です。段落で述べているように、で囲まれた単語の色のみを変更します。その前に、HTMLがレンダリングされていることを確認してください：

HTMLがレンダリングされています。 find()を説明するために、テキストの色を変更します。アクションで。これを実現するには、CSS属性を1つ変更するだけでよいため、これは初心者にとって素晴らしいステップです。

要素をセレクターとしてfind()に渡している間、jQueryのcss()を使用できます色の変化をレンダリングする方法：

<script>
$(document).ready(() => {
  $('p').find('span').css('color', 'blue');
  $('div.green').find('span').css('color', 'green');
})
 
</script>

find()の最初の使用法、すべての

要素を選択しています。 find()を使用します

の子である要素を検索します。この例では、青という単語だけです。次に、css()を使用します色を青に変更する方法。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

find()の2番目の使用法について。今回は、クラスがgreenの

を選択し、find()を呼び出しています。その上に。このメソッドは、

の子である別の要素を検索しています。

繰り返しますが、これは緑という言葉だけです。最初の行と同様に、css()を使用しています色を緑に変える方法。

それを実行して、何が起こるか見てみましょう！

青と緑の両方の単語が、クラスまたはIDが割り当てられていないspan要素にラップされていることに注意してください。これらの単語を分離して色を変更することはできました。ご想像のとおり、の親要素が異なるためです。

は、blueという単語のの親です。

は、greenという単語を含むの親です。

これは、find()が原因で発生しましたセレクターとして使用される要素の子を検索します。複雑さを加えて、やることリストの例を見てみましょう。

リスト内のjQueryfind（）

この例では、やることリストがあります。今日はやることがありますが、それをするために店で物を買わなければなりません。これらのアイテムを購入したら、リストからそれらをマークして、私たちの日を続けることができます！これが私たちのリストです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
To Do list example
</h2>
<ul>
  <li class="store">Go to the store
    <ul>
      <li>Trash bags</li>
      <li>Dish Soap</li>
    </ul>
  </li>
  <li>Take out the trash</li>
  <Li>Wash the dishes</Li>
</ul>
</div>

ここにリストがあります。

の子である

要素があります。「メイン」の「Gotothestore」リストアイテムの中には、ストアで購入できるものがあります。今日の雑用を完了するには、ゴミ袋と食器用洗剤が必要です。ストアのクラスを持つ
の子として、ネストされたリストとしてそれらを配置しました。

これで、購入後にこれらのアイテムをリストから外すことができます：
```
<script>
$(document).ready(() => {
  $('li.store').find('li').css('text-decoration', 'line-through')
})
</script>
```
ストアのクラスで
を選択し、find()を使用することで、リストのこれらのアイテムだけを消すことができます。子の
要素を検索します。ここでも、jQuery css()を使用しています「テキスト装飾」の属性に「ラインスルー」の値を適用するメソッド。そうすることで、選択したアイテムに線が引かれます。

結論

jQuery find() メソッドは、渡されたセレクターのすべての子要素を検索します。 find() メソッドはこれらの子要素のみを操作し、親自体は操作しません。

選択する子要素を区別できるため、一般的でページのセクション全体を変更したり、特定のページの特定の要素のみを変更したりできます。 find()がこの柔軟性の範囲内にあるのは、それ自体が最も便利になります。

jQueryの学習方法について詳しくは、こちらをご覧ください。

jQueryのclick（）メソッドを使用してイベントをトリガーする

JavaScript Onclick：ステップバイステップガイド

JavaScript Onclick：ステップバイステップガイド
JavaScriptのonclickイベントは、ユーザーがボタンまたは別のWeb要素をクリックしたときに関数を実行します。このメソッドは、HTMLドキュメントとJavaScriptドキュメントの両方でインラインで使用されます。 JavaScriptでコーディングしている場合、ユーザーがWebページを操作するときにコードを実行するのが一般的です。たとえば、ユーザーがボタンを押したときに何かが発生したい場合があります。しかし、JavaScriptでこの機能をどのように実装しますか？そこで、「onclick（）」イベントが役立ちます。 onclickイベントは、最も一般的に使用されるイベ
GitAddのステップバイステップガイド
git addコマンドは、ファイルまたはフォルダーをステージング領域に追加します。ステージング領域のファイルは、次のコミットに追加するファイルです。 Git addは、リポジトリやファイルを変更したり、影響を与えたりすることはありません。 Gitバージョン管理システムには、単純な保存機能はありません。 Gitはコミットと呼ばれるプロセスを使用します。ここで、最後のコミット以降にファイルに加えられたすべての変更の記録を作成します。このプロセスには、いくつかの異なるコマンドライン操作が含まれます。ファイルまたはフォルダーの変更をGitリポジトリーに保存する最初のステップは、gitaddコ

jQuery find（）：ステップバイステップガイド

jQuery find（）の使用

リスト内のjQueryfind（）

結論