3/3ページ

3/3ページ
  • 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.08

jQuery UIでユーザーインターフェースを追加しよう!

jQuery UIは、jQueryの製作元であるThe jQuery Foundationが開発した公式プラグインです。 機能、ウィジェット、エフェクト、ユーティリティなどのコンポーネントにより、ユーザーインターフェースを追加できます。 テーマにも対応しているため、見た目の変更も容易です。 jQuery UIはCDNで読み込もう! Google Hosted LibrariesのCDNを使用すれば […]

  • 2019.02.07

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

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

  • 2019.02.05

セレクタでjQueryオブジェクトを選択しよう!

セレクタとは、jQueryオブジェクトを選択する構文のことです。 書き方はほとんどCSSと同様ですが、jQueryで追加された記法もあります。 上のようなメタ文字を入力する場合、直前に \\ を入力する必要があります。 class, idで選択するには? classで選択するには、class名の前に . を入力した文字列を$(”)で囲みます。 セレクタは全てこの形式で入力することになり […]

  • 2019.02.04

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

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

  • 2019.02.03

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

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

  • 2019.02.01

jQueryはGoogleのCDNで読み込もう!

jQueryを使用するには、ウェブページにライブラリを読み込まなくてはなりません。 jQueryをダウンロードしてサーバーにアップロード、URLを確認して<script>タグを記述して…非常に面倒です。 この問題を解決してくれるのがCDNです。 提供されているコードをウェブページに貼り付けるだけで、jQueryが使用できます。 CDNとは? CDNとは、コンテンツデリバリネットワーク( […]

1 3