入門

  • 2019.03.08

jQueryで演算子を使おう!

演算子とは、計算や処理を行うための記号表記のことです。 jQueryの演算子には、算術演算子、代入演算子、比較演算子、論理演算子などがあります。 算術演算子とは? 算術演算子とは、数学的な計算を行う演算子です。 算数と同様、プラスなどの記号で数を結ぶことで、計算が行われます。 サンプルでは、1と2を足した値、3が返されます。 算術演算子の一覧 + 加算 足し算 – 減算 引き算 * 乗 […]

  • 2019.03.02

jQueryでエスケープしよう!

文字列のエスケープは自作の関数を定義する必要がありますが、HTMLを追加するには.text()を使用します。 文字列をエスケープするには? jQueryには、文字列をエスケープするメソッドは実装されていません。 以下の関数を定義し、escapeHTML()に文字列を渡せば、エスケープ後の文字列を取得できます。 エスケープする文字をプロパティ、エスケープ後の文字を値とするオブジェクトを定義し、対象文 […]

  • 2019.02.28

jQueryでウィンドウを操作しよう!

ウィンドウを操作するには、JavaScriptのwindow.open(), window.close(), window.focus()を使用します。 ウィンドウサイズの変更、取得、分岐 ウィンドウサイズの変更 ウィンドウサイズでの分岐 ウィンドウの高さ、幅の取得 これらの項目については、以下の記事を参照してください。 新しいウィンドウを開くには? 新しいウィンドウを開くには、window.op […]

  • 2019.02.27

jQueryでページに動きをつけよう!

jQueryでページに動きをつけるには、アニメーション、アンカーリンク、アコーディオン、Ajaxなどを使います。 動きのあるサイトを作るには? アニメーションをサンプルで確認しよう! アニメーションを追加することで、文字通り「動き」のあるサイトに仕上がります。 要素の表示、非表示を切り替えるときは、フェードやスライドを使いましょう。 アンカーリンクはスクロールで移動しよう! アンカーリンクによるペ […]

  • 2019.02.26

ウィンドウサイズを変更、取得しよう!

ウィンドウサイズを変更するには、JavaScriptのwindow.resizeTo(), window.resizeBy()、取得するには、.width(), .height()、.outerWidth(), .outerHeight()を使用します。 ウィンドウサイズを変更するには? メインウィンドウサイズは変更できない? セキュリティ上の理由で、メインウィンドウのサイズは変更できません。 ウ […]

  • 2019.02.25

jQueryが動かないときには?

jQueryが動かない原因の調べ方、代表的なエラーを解説しています。 動かない原因を調べよう! 動かない原因を調べるには、ブラウザの開発者ツールを使用します。 Chromeではデベロッパーツール、Firefoxでは開発ツール、SafariではWebインスペクタと呼ばれるものです。 開発者ツールのコンソール(Console)を確認することで、jQueryのエラーを調べることができます。 表示されたエ […]

  • 2019.02.24

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

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

  • 2019.02.23

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

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

  • 2019.02.05

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

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

  • 2019.02.01

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

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