• 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.08

jQueryで演算子を使おう!

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

  • 2019.03.04

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

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

  • 2019.03.02

jQueryでエスケープしよう!

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

  • 2019.03.01

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

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

  • 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のエラーを調べることができます。 表示されたエ […]

1 3