スキルアップを始める!

jQuery(ジェイクエリ)

jQuery(ジェイクエリ)

【jQuery】外部リンクを無効化して内部リンク化する(すべてのアンカー要素の target 属性を空の文字列に変更する)

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

【jQuery】URLパラメータ値でコンテンツの表示・非表示を切り替える方法

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

【jQuery】YubinBangoを使って住所自動入力フォームを作る

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

jQuery – OpenWetherAPI【全世界の気象データを取得する】

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

【jQuery】アニメーション作成の基本と7つの事例ついて

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

caught ReferenceError: $ is not defined

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

【jQuery】JavaScriptを使用して、フォームの入力内容を確認する

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

【jQuery】$​.​ajax()でオブジェクトを引数として受け取り通信する

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

【jQuery】郵便番号検索APIを使って住所を自動取得する(zipcloud)

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

【jQuery】Ajax作成の基本と作成例について[Part1]

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

Datepicker(データピッカー)を使って簡単に日付を入力できるようにする【jQuery】

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

【jQuery】要素にclassやidを追加する方法

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

【jQuery】サイトのページを開いた時にローディングアニメーションを実装する方法

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

【jQuery】ハンバーガーメニューを作る方法【初心者向け】

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

【jQuery】Uncaught TypeError: $(…).on is not a function が表示される?

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

【jQuery】JSの.onloadとjQueryの$().readyの違いについて

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

【jQuery】画面をスクロールして画面に入った時に画像や要素をふわっと表示させる方法(CSS)

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

【jQuery】ドラッグ&ドロップでページ内の画像を動かす方法(要素をドラッグアンドドロップ移動)

前回は「JavaScriptを使ってドラッグアンドドロップでページ内の画像を移動させる」という話を書きましたが、今回は「jQuery」を使ってドラッグアンドドロップを実現してみます。 ▶サンプルページはこちら CDNで jQuery をイン...
jQuery(ジェイクエリ)

jQueryが動かない?時に試す方法・対処法|Uncaught SyntaxError: Unexpected token ‘<'

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

【初めてのjQuery入門】jQuery(ジェイクエリ)とは?導入の手順について

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