メソッド

  • 2019.02.12

.on()でイベントを追加しよう!

.on()は、セレクタで選択した要素にイベントを追加し、コールバック関数を実行するメソッドです。 イベントの発火、キャンセル、取得、一覧については、以下の記事を参照してください。 .on()の引数は? .on()でイベントを追加するには、セレクタで要素を選択し、第1引数にイベント名、第2引数にコールバック関数を渡します。 存在しない要素にイベントを追加するには? 第1引数にイベント名、第2引数にセ […]

  • 2019.02.11

.attr()で属性を操作しよう!

.attr()は、セレクタに一致した最初の要素の属性値を取得、属性を設定するメソッドです 属性を取得するには? hrefを取得するサンプル 属性を取得するには、.attr()に属性名を渡します。 サンプルでは、href属性の’#attr’が取得されます。 属性を設定するには? 属性を設定するには、第2引数に値を渡します。 オブジェクトで設定する 属性名をプロパティとするオブ […]

  • 2019.02.10

.find()でjQueryオブジェクトを絞り込もう!

セレクタで選択したjQueryオブジェクトを別のセレクタで絞り込み、子孫要素を取得するメソッドです。 .find()と.each()で要素を扱おう! ul要素を選択した後、li要素で絞り込み、.each()でjQueryオブジェクトを繰り返すサンプルです。 .each()のコールバック関数では、.text()で文字列を取得し、console.logでコンソール出力しています。 .find()の戻り […]

  • 2019.02.09

.append()で要素の末尾にコンテンツを追加しよう!

.append()は、セレクタに一致した要素の末尾にコンテンツを追加するメソッドです。 HTMLコンテンツを追加するには? .append()にHTMLコンテンツを渡すことで、セレクタで選択した要素の末尾に追加できます。 .append()できないんだけど… セレクタと要素が逆になっているため、このコードは動作しません。 .appendTo()とは逆になりますので、注意しましょう。 .append […]

  • 2019.02.07

.css()で要素のスタイルを操作しよう!

.css()は、セレクタに一致した最初の要素のスタイルを取得したり、各要素にCSSプロパティを設定するメソッドです。 スタイルを取得するには? .css()の引数にプロパティ名を文字列で渡します。 サンプルでは、’background-color’で背景色を取得しています。 複数のスタイルを取得するには? プロパティ名は文字列の配列で渡すこともできます。 サンプルでは、&# […]

  • 2019.02.04

jQuery.ajax()でリアルタイムにコンテンツを更新しよう!

jQuery.ajax()は非同期のHTTP通信(Ajax)を実行するメソッドです。 ページのコンテンツをリアルタイムで更新できます。 非同期通信とは? 通常の通信である同期通信は、サーバーにリクエストを送信した後、レスポンスを待ちます。 サーバーにデータを下さい!とお願いした後、何もしないで待っているわけです。 それに対して非同期通信は、レスポンスを待たずに他の処理を実行できます。 データをくれ […]

  • 2019.02.03

.each()で繰り返し処理を実装しよう!

.each()は、jQueryオブジェクトを反復し、各要素に対して関数を実行するメソッドです。 コールバック関数内で現在のDOM要素を取得することにより、繰り返し処理を実行できます。 .each()の使い方 .each()には、繰り返し処理を行うコールバック関数を渡します。 現在のDOM要素を参照するthisを使用し、$(this)でjQueryオブジェクトを取得しています。 $(this).te […]