2/3ページ

2/3ページ
  • 2019.02.24

要素の位置を取得、移動しよう!

要素の絶対位置を取得するには.offset(), .position(), .scrollTop()を使用します。 要素の位置を移動するには、.css()を使います。 要素の位置を取得するには? .offset()で絶対位置を取得しよう! .offset()でドキュメントの左上からの相対位置を取得しています。 .offset()は、top, leftをプロパティとするオブジェクトを返し、各々ドキュ […]

  • 2019.02.23

スクロール移動、要素の移動をしよう!

スクロール移動には、.scrollTop()や.animate()を使用します。 アンカーリンクでスクロール移動するには、以下の記事を参照してください。 ページ内のスクロールを移動するには? ページ内のスクロールを移動するには、.scrollTop()を使用し、ドキュメントのスクロール位置をピクセル単位で設定します。 サンプルでは、ドキュメントの上端から500pxの位置に移動します。 要素のスクロ […]

  • 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(), . […]

  • 2019.02.13

jQuery UIでアコーディオン、.slideToggle()でアコーディオンメニューを実装しよう!

jQuery UIの.accordion()は、子要素をアコーディオンにするメソッドです。 .slideToggle()は、要素の表示・非表示をスライドで切り替えるメソッドです。 .slideToggle()を使用することにより、簡単にアコーディオンメニューを実装できます。 jQuery UIの.accordion()を使おう! アコーディオンのサンプルは? タイトル1 アコーディオンのサンプルで […]

  • 2019.02.12

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

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