実践

  • 2019.03.27

jQueryでエフェクトを追加しよう!

jQueryでエフェクトを追加するには、jQuery UIの.effect()を使用します。 アニメーションエフェクトを追加するには、jQuery UIの.effect()を使おう! jQuery UIの.effect()を使用すれば、アニメーションエフェクトを簡単に追加することができます。 jQuery UIを読み込むには、以下の記事の「jQuery UIはCDNで読み込もう!」を参照してくださ […]

  • 2019.03.12

エンターキーにイベントを追加しよう!

エンターキーにイベントを追加するには、.on()でkeydownイベントを追加します。 エンターキーの押下にイベントを追加するには? .on()の第1引数にkeydown、第2引数にコールバック関数を渡し、押下されたキーがエンターキーだった場合、alert()でアラートを表示しています。 コールバック関数の引数にはイベントオブジェクトが渡されます。 イベントオブジェクトのwhichプロパティには、 […]

  • 2019.03.04

disabled属性で要素を無効にしよう!

disabled属性で要素を無効にするには、.prop()を使用します。 disabledか判定するには? 要素が無効か否かを判定するには、.prop()に’disabled’を渡します。 戻り値は、無効であればtrue, 無効でなければfalseです。 サンプルでは、input要素が無効な場合、console.log()でコンソールを出力します。 disabledを解除す […]

  • 2019.03.01

jQueryで埋め込みを実装しよう!

jQueryをURLで埋め込み jQueryをURLで埋め込むには、CDNを使用します。 特に理由がなければ、GoogleのCDNを使用しましょう。 WordPressにjQueryを埋め込み WordPressにCDNのjQueryを埋め込むには、使用しているテーマのfunctions.phpに、サンプルのコードを記述します。 jQueryではなく、$を使用したい場合に便利です。 wp_dere […]

  • 2019.02.22

jQueryでイベントハンドラを使おう!

イベントハンドラとは、ある一定の出来事が発生したときに行われる処理のことです。 .on()でイベントハンドラを追加、登録しよう! .on(), .one()によるイベントハンドラの追加、登録 複数イベントへのイベントハンドラの追加 .off()によるイベントハンドラの削除 changeイベントへのイベントハンドラの追加 これらの項目については、以下の記事を参照してください。 イベントハンドラを取得 […]

  • 2019.02.21

jQueryでイベントを使おう!

イベントとは、処理を追加することのできる一定の出来事です。 イベントに追加される処理は、イベントハンドラと呼ばれます。 イベントハンドラとは? イベントハンドラとは、ユーザーの操作など、ある一定の出来事が発生したときに行われる処理のことです。 例えば、ユーザーがボタンをクリックしたとき、アラートを表示する処理があったとします。 このとき、ユーザーのボタンクリックがイベント、アラートの表示がイベント […]

  • 2019.02.20

thisを束縛しないアロー関数を使おう!

アロー関数は、矢印によって記述される関数のことです。 functionの省略表記であるとともに、thisを束縛しない特徴を持ちます。 functionをアロー関数に変更してみよう! $.get()でajax.htmlをGET取得し、コールバック関数で取得したデータをコンソール出力しています。 functionで記述されているコールバック関数を、アロー関数で書き換えました。 書き換え方としては、fu […]

  • 2019.02.18

アンカーリンクでスクロール移動しよう!

href属性が#anchorのa要素をクリックしたときに、アニメーションでスクロール移動する方法を解説します。 アンカーリンクのクリックでスクロール移動するには? アンカーリンクをクリックしたとき、アニメーションでスクロールするサンプルです。 コードが少し長いので、順を追って解説します。 アンカーリンクにクリックイベントを追加しよう! .on()の第1引数に’click’を […]

  • 2019.02.16

jQueryでアラートを表示しよう!

JavaScriptのalert(), confirm()でアラートを表示できます。 jQuery UIのダイアログを使用することで、より洗練されたアラートを実装可能です。 アラートを表示するには? アラートを表示するには、JavaScriptのalert()に文字列を渡します。 アラートを改行するには? アラートを改行するには、文字列の中で\nを使います。 半角で入力することに注意しましょう。 […]

  • 2019.02.14

jQueryでアニメーションを実装しよう!

jQueryには、数種類のアニメーションメソッドが用意されています。 .animate()で独自のアニメーションを実装することも可能です。 jQuery UIを導入すれば、アニメーション機能を拡張することができます。 アニメーションにはどんな種類があるの? jQueryで用意されているアニメーションは、拡大、縮小する.show(), .hide(),、フェード処理を追加する.fadeIn(), . […]