jQuery（ジェイクエリ）

jQueryの基礎知識jQueryは、JavaScriptライブラリの中で最も広く使われているものの一つです。複雑なJavaScriptのコードを、より簡潔に書けるように設計されています。jQueryの基本セレクタとDOM操作// 要素の選...

外部リンクを無効化して内部リンク化するためには、すべてのアンカー要素の href 属性を変更し、かつ target 属性を空の文字列に設定する必要があります。コード以下の例では、外部リンクを無効化するために、href 属性の値を # に変更...

URLパラメータ値でコンテンツの表示・非表示を切り替えますURLからパラメータを取得するこの関数は、URLからパラメータを取得します。 <script src=""></script> <script> $(document).ready(...

YubinBangoとは？YubinBangoは、郵便番号を入力すると自動的に住所を入力することができるjQueryプラグインです。以下は、YubinBangoを使用して住所自動入力フォームを作るための基本的な手順です。YubinBango...

OpenWetherAPIとは？OpenWeatherAPIは、天気情報を提供するAPIプロバイダーの1つです。このAPIを使用すると、世界中の場所の現在の天気、予報、気温、湿度、気圧などの情報を取得できます。また、歴史的な天気情報や、紫外...

jQueryによるアニメーション作成jQueryを活用したアニメーションとして、フェードインやフェードアウトの仕組みやパララックスの機能、ローディングアニメーションなどがあります。今回は７つの活用事例についてご紹介します。フェードイン/フェ...

「$は定義されていません」というReferenceErrorが発生しました。jQueryを読み込んでいないこのエラーは、通常、jQueryを使用していないために発生します。$は、通常、jQueryのエイリアスとして使用されますが、jQuer...

jQueryでフォームの入力内容を確認するJavaScriptを使用して、フォームの入力内容を確認する方法はいくつかありますが、jQueryを使用すると簡単に実装できます。以下は、フォームが送信される前にフォームの入力内容を確認するためのj...

$​.​ajax()でオブジェクトを引数として受け取る$​.​ajax()は、オブジェクトを引数として受け取り、より複雑な通信も可能です。以下は、クエリをオブジェクト形式で指定する例です。以下にその内容と具体例を示します。引数のオブジェクト...

無料で使える郵便番号検索APIを使って、住所を自動入力してみます。zipcloudフォームのHTMLを作るまずは、フォームのHTMLを作ります。 <form> <label for="zip">郵便番号：</label> <input ty...

Ajaxとは？Ajaxは、Asynchronous JavaScript and XML（非同期的なJavaScriptとXML）の略称で、Webページをリロードすることなく、サーバーと通信して動的にコンテンツを更新するための技術です。Aj...

jQueryのDatepicke（データピッカーrを使ってフォームなどの入力枠に日付を簡単に入力できるようにしてみます。CDNを読み込むまずはjqueryとCSSを読み込みます。<script src=""></script><script...

テーブルなどの要素にclassやidを追加したいと思った時に使える方法です。attr(properties)キーと値の組み合わせからなるハッシュオブジェクトを引数に渡し、全ての要素に複数の属性を同時に設定する。<table><tbody> ...

WEBサイトやブログを開いてもらった時に、ローディングアニメーションを実装する方法です。デモページはこちら↓画像を表示させるまずは、ローディング用の画像を表示させます。<div class="loading"> <div class="lo...

「ハンバーガーメニューを作りたい」というのはきっと多くの方が思われていて、挑戦している方も多くいらっしゃると思いますが、遅ればせながらハンバーガーメニューに挑戦してみたいと思います。▼サンプルはこちらハンバーガーメニューとは？画面サイズがス...

Uncaught TypeError: $(…).on is not a function jQueryが動かないと思ってConsoleを見ていると「Uncaught TypeError: $(…).on is not a function...

window.onloadとjQueryの$(document).readyは同じではないのか…？と思っていましたが、意味が違っていたようなので、その違いについて書いてみます。window.onload = function()target...

CSSで「要素が画面に入ったタイミングでフェードインしながらふわっと表示させたい」と思ったときに使える方法です。要素をふわっとフェードインさせたいと思ったときには、jQueryを使って表示させることができます。▶サンプルページはこちらscr...

jQueryのScrollTween.jsが動かない・・・ページ上にjQueryを読み込んで、ちゃんと読み込まれているようになっているはずですが・・・どうやってもスクロール・が・・・動かない。Consoleを確認する。Developerツー...

jQueryとは？jQueryとは、John Resigさんが開発したJavascriptのライブラリです。WEBページに様々なアクションやアニメーションを設定することができて、「プラグイン」と呼ばれる拡張ライブラリも多数あります。ジョン・...