ポンクソフト

jQuery入門

jQuery入門 TOP 次ページ

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

はじめに

jQueryとは?

JavaScriptのライブラリです。JavaScriptはブラウザ上で使える簡便な言語ですが、ブラウザ毎に微妙な差異があり、本質的でない部分でプログラマの頭を悩ませます。jQueryを使うと、ブラウザの種類による処理の分岐など煩雑な部分を吸収してくれるので、プログラマは本質的なロジックを記述するのに専念できるのです。

対象

HTMLについてある程度の知識がある人。JavaScriptの知識は有った方が望ましいのですが、無くても大丈夫です、おそらく。

動作サンプル

何はともあれ動作サンプルをどうぞ。JavaScriptが有効なら、「うどん」ボタンをクリックすると、文字が拡大縮小されます。
jQueryを使えばこのような処理が簡単にできます。

jQueryの利点

1. ブラウザによる違いを吸収してくれる

IE・Firefox・Opera・Safariとさまざまなブラウザで同じ見た目で処理を行なうことができます。

2. 要素の選択が簡単

CSSのセレクタ記法を使い、HTML中のあらゆる要素に簡単にアクセスすることができます。

3. Ajaxサポート

簡単にAjaxの処理を記述できます。

jQuery日本語リソース

js STUDIO | jQuery 日本語リファレンス

jQueryの日本語リファレンスをサンプル付きで解説されています。最新のバージョンにも対応しており、今のところ一番のおススメ!

jQuery日本語リファレンス

jQueryの日本語リファレンスを公開されています。サンプルも多数あり、何か分からないことがあればここに訪れれば大抵は解決します。

jQuery API 1.4.4 日本語リファレンス

StackTrace様の日本語リファレンス。こちらも詳しく、最新バージョンの機能を知りたいときに便利です。jQuery UI API 1.8.4 日本語リファレンスも参考になります。

jQuery 開発者向けメモ

こちらもかなり詳しいリファレンスサイトです。1ページに説明と例がまとまって載っているので見やすいです。

jQueryの魔法

jQueryの使い方を、多数の実例でもって紹介されています。

Javascript/jQuery – 俺の基地

jQuery自体のソースコード解説など。参考になります。

jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0

このページに関するコメントをどうぞ

お名前:



あああああ
2017/01/20 17:43

カワカワ
ああああああああ
2017/01/16 08:48

fsfさ
dふぁfだs
2017/01/05 19:56

ああ
あああ
2016/11/09 18:25

test
サンプル
2016/11/08 16:42

セレクタの指定方法を返る
HTML部分
~~~~
<div>問題1</div>
<p>
<input type="radio" name="food" value="1">そば
<input type="radio" name="food" value="2">うどん
<input type="radio" name="food" value="3">ラーメン
</p>

<div>問題2</div>
<p>
<input type="radio" name="food01" value="1">いか
<input type="radio" name="food01" value="2">たこ
<input type="radio" name="food01" value="3">えび
<input type="radio" name="food01" value="4">えび
</p>
2016/11/08 14:31

セレクタの指定方法を返る
>教えてくださいさん
セレクタの指定方法をinputからnameに変える方法はいかがでしょうか。

//問題1
$(function() {
$("*[name=food]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});

//問題2
$(function() {
$("*[name=food01]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});
2016/11/08 14:31



2016/10/31 11:32


あいうえおテスト
2016/10/25 21:43

ああああ
いいいいいい
2016/10/20 11:05

一つ目の選択肢を正解にしたいなら
<p>あなたの好きな食べ物は?</p>
<p>
<input type="radio" name="food" value="2">うどん
<input type="radio" name="food" value="3">ラーメン
<input type="radio" name="food" value="1">そば
</p>

にすればいいんじゃないですか?
2016/10/14 15:01

てst
ててててt
2016/10/12 18:31

教えてください
1番を正解、2番を正解にするやり方はわかります。

ただ、同じページ内に複数のクイズを出したい場合、すべてが同じ番号が正解になってしまいますよね??

それぞれ違う番号の答えにしたい場合、どうしたらいいでしょうか?

よろしくお願いします。
2016/10/08 20:31

教えてください
1番を正解、2番を正解にするやり方はわかります。

ただ、同じページ内に複数のクイズを出したい場合、すべてが同じ番号が正解になってしまいますよね??

それぞれ違う番号の答えにしたい場合、どうしたらいいでしょうか?

よろしくお願いします。
2016/10/08 19:12

Leo miyamoto
パソコンのは好き?
2016/09/23 06:34

コハル
いつも勉強させてもらい感謝です。
ぬりかべゲームのリンクでhrefが
href="javascript:void(0)"
となっているところが理解できなくて質問にきました。

ググってみると「クリックしてもリンク移動しないようにできる」というのはわかったのですが、それなら
href=””
と空文字でもいいのではないかと思うのです。

そして実際にためしました。
スタートをクリックすると一瞬だけゲーム画面が形成されたのが見えるのですが、すぐに消えてしまいます。

href=”javascript:void(0)”
とは一体なんなのでしょうか?


そして
href=””
でスタートをクリックすると
.clickメソッド
により内部の関数(ゲーム処理)でゲームがはじまるはずなのに、一瞬表示だけでなぜ消えるのでしょうか?
2016/09/19 18:40

腹黒
えへへ
2016/09/09 19:47

ataru
もぐらたたきに絵を入れるとしたら、どこを変えたらいいのですか?
2016/09/06 14:20



2016/09/04 21:30



2016/08/30 19:27

ページング作成中
シンプルだけど結構応用が効く!
2016/07/25 18:26

良く理解しましょう
$(function() {
$('input').click(function() {
if ($(this).val() == 3) alert('正解!');
else alert('はずれ!');
});
});

valの値が2番なら正解を表示と言う意味なので、3番目を正解にするなら

val() == 3)書き換えればいいです。

inputのところは関係ないです。
2016/03/07 15:52

教えてください
クイズゲームの作り方で、2問目、3問目を作っても絶対に
2番が正解になりますよね?

input要素を読み込んでいるので、全て同じ動作になると思うんですが、他の番号を正解にしたい場合どうしたら良いでしょうか?

また、inputにid行ってみましたが、うまく反応しませんでした。
2016/03/07 14:13

まほ
わかりやすく説明していただきありがとうございます!
ところで、
$.each(items, function(i, item) {
make().css(item.css).html(item.html);
});
の部分だけ今ひとつ理解ができなかったのですが
localStorage.stickyに値が入っているときに
①itemsという配列に JSON形式の文字列をjsのオブジェクトとして返し
②それぞれのitemsの要素に対してcss、htmlの要素の中身を入れている

という認識で良いでしょうか?

function(i,item)のところにiが入っていますが、これはどこに影響を与えているのでしょうか?

長々とすみませんがご回答いただければ嬉しいです!
2016/02/17 21:03

ぴよよ
↓ 目次8からHTMLのheadの部分の記述が・・・スミマセン
2016/02/06 01:34

ぴよよ
これまでスムーズにできたのですが、今回わからないです><;
2016/02/06 01:31

UT
わかりやすいですね!感謝します。
2016/01/26 10:02

こっぺぱん
ありがとです
2016/01/19 15:32


ありがとうございます。
2016/01/19 15:32

tetu
ありがとうございます
面白いものができそう予感
2015/11/02 15:36

ハナ
まさに探していたものが見つかって感動しています。ありがとうございます。
2015/10/30 16:32

mpi
わかりやすい!非常に参考にさせていただきました。
ページャーとかって肝心の実装部分をすっ飛ばして紹介している人ばかりで。。
2015/10/22 19:01

あら
ありがとうございます。
jQuery の syntax sugar が非常に判りやすかったです。
2015/06/05 13:13


簡単な内容ですが、わかりやすいです!!
2015/04/08 11:12

さき
はじめまして。
jQueryについて学び始め、色々と検索しているうちにこちらページを拝見し、参考にさせて頂いています。
現在は目次14の「テーブルにページ送り(ページング)を実装してみる」を元に勉強をしているのですが、これをテーブルではなくリストに置き換えたい場合、13行目の処理はどの様に変更したら良いのでしょうか?
:gtを:nth-childに置き換えてn+で指定したりもしてみたのですが、うまくできませんでした。
よろしければお返事を頂けると幸いです。
2014/12/12 22:28

wonda
使わせていただきます。たすかります。
質問ですが、最初の10行で見せるテーブルの「<」と
最後のテーブルの「>」を消すことはできますか?
ご教授ください。
2014/10/15 16:48

aki
とても分かりやすいです、ありがとうございます!
2014/08/20 13:16


はじめまして、是非とも使ってみたいのですが、クリアした際のアラートを、例えばもっと達成感のあるゴージャスな画像のポップアップにしたいのですが、可能でしょうか。

アラート表示を
①ポップアップに変える方法
②別ページに飛ぶ方法に
変えるには何処の何をどの様に入れ替えればよいでしょうか。

教えて頂けると助かります。
宜しくお願い致します。
2014/08/15 11:57

ljy
ありがとうございます
2014/07/11 17:39

seisusuki
gallery.htmlのコードをIE11,Windows8.1の機器にコピーしましたが、loadされません。jquery-1.11.0 にするとloadされました。他のjquery1,x, 2.xを試しましたが動作しませんでした。この辺の事情ををお教えください。
2014/06/24 09:04

れいこちゃん
おー、ブログ作りたいな~
2014/05/09 21:56

ちゃめ
※切実!※
jQueryのダウンロードする項目はどれなのですか?
また画面全体にコードが羅列しているのですが、その画面を保存すれば良いのですか?
全然わけわからないのですが、教えて下さい!
2014/04/10 18:55

hiro
すいません。
23.保存できる付箋を作ってみる(Cookie、localStorage)についての質問です。
2014/04/04 15:59

hiro
超初心者で、初歩的な質問をすることをお許しください。

ローカルストレージの方法で、付箋紙の大きさを複数用意したい場合は、どのようにすればよろしいのでしょうか。
2014/04/04 15:58

naga3
オセロゲームのやつはちょっと考えないと分からないかもですねー
2014/01/12 10:33


オセロゲーム5面難しかった!
2013/12/30 21:24

yuji
ありがとうございます。
うまくいきました。素晴らしいです。
先ほどの left: x, top: y は、なくても大丈夫でした。
今後とも、よろしくお願いします。
2013/11/24 20:25

naga3
すみません、背景画像を動かさないとダメでした。
$('#move').css('background-position', '-' + x + 'px -' + y + 'px');
これをy=なんとか; の後に置いたらどうでしょう。
2013/11/24 18:49

yuji
さっそくのご連絡ありがとうございます。
$('#move').css は、3か所ありますが、最初のでいいでしょうか?
left: x, top: y, ←(コンマ 要りますか?) 追加してみましたが、変化ありません。
x と y に、値を入れても みましたが、変化ありません。
ど素人の質問で申し訳ありませんが、よろしくお願いします。
2013/11/24 16:45

naga3
yujiさん
$('#move').cssに
left: x, top: y
を追加したら動くと思います。試してないのでアレですが…
2013/11/24 15:22

yuji
var x = 0;
var y = 0;
この部分の値を変えてみましたが、初期表示の位置が変わりません。
画像をクリックし移動しようとすると、即座にその位置にジャンプするようです。
どうか、アドバイスを願いします。
2013/11/24 11:31

超初心者
ご返信遅れて申し訳ありません。
ITEM1の所をITEM2に書き換えればlocalStorageの中に互いに影響しない2つのファイルを作ることが出来ました。
naga3
ご返信ありがとうございます。
2013/10/10 16:42

naga3
超初心者さん
言われてることがよくわからないのですが…
ソースをコピーして2を編集しても1は書き換わらないのでは?
2013/09/27 10:18

超初心者
追記:保存できる付箋を作ってみる(Cookie、localStorage)のことです。
2013/09/23 01:14

超初心者
いつも参考にさせていただいています。
ほんとに何もわからないのですが質問させてください。
たとえば、このソースを1とします。コピペして2を作ったあとに
2を編集すると1も書き換わります。(当たり前だろ!ですよね)すみません。
これを回避するためにはどのようにしたら良いのでしょうか?
1と2で保存先を変えるってことは出来ないのでしょうか。
2013/09/23 01:13

chim
その方法で出来ました!ありがとうございました。
2013/09/20 22:45

naga3
chimさん
ipopをidじゃなくクラスにすれば
複数設置できるかと思います。
#ipopの記述も.ipopに変更します。
2013/09/18 23:42

chim
初めまして
DLさせていただきました 勉強になります。
質問なのですが 個別のスタイル要素を持つ複数のポップアップウィンドウを同ページ内で動作させたいとき、ipop.jsの記述はどのようになりますか? 初歩的ですいません ご回答いただければ幸いです。(_ _;)ペコリ
2013/09/16 17:54

naga3
嬉しいです( ^ω^ )
2013/08/28 14:52


勉強になります。(´∀`)
2013/08/26 18:22

naga3
Processingは管轄外ですね…すみません。
2013/07/14 05:19

keimy
processngで同じように自由自在に動かせる付箋を作りたいのですが何か方法はわかるでしょうか。
2013/07/12 13:51

naga3
DOCTYPEで文字コードは指定しません。
metaタグで指定してください。
2013/06/28 19:15

yusuke
文字化けは消すことができました。↓
<!DOCTYPE html UTF-8, 日本語EUC, Shift_JIS, JIS[ISO-2022-JP]>
一番上の段にUTF-8, 日本語EUC, Shift_JIS, JIS[ISO-2022-JP]
を付け足しました。
2013/06/28 17:38

テスト
テスト
2013/06/25 07:58

test
テスト
2013/06/21 09:52

naga3
ファイルの文字コードがutf8になってますか?
2013/06/08 20:08

スフィンクス
日本語が文字化けする場合はどのようにしたらいいでしょうか?
2013/05/27 05:17

やもめ
かもめ
2013/05/24 10:30

試験
です
2013/05/02 10:32


どすこい!
2013/04/18 08:17

テス
テスコイ
2013/04/16 14:07

naga3
こんにちはー!?
2013/04/12 21:49

おにし
こんにちは
2013/04/12 17:20

naga3
井上さんこんにちは。
作成したhtmlファイルは有料のレンタルサーバーに上げています。
月額は安いのでそんなに負担にはならないです。
2013/03/28 23:11

井上
こんにちは
作成した.htmlはどのようにしてネット上にアップしているのでしょうか?広告とかが無いので自作サーバーを用いてるとか?
自分も自作したのをiphoneで閲覧できるようにしたいと思っています
ご回答お願いします
2013/03/28 22:44

naga3
ビギンさん
パズルでClearメッセージをずらすには
setTimeout関数を使えば簡単に実装できます。
試してみてください。
2013/03/12 21:24

naga3
abenomixさん
返事遅れてすみません。
別の画像を置く場合は画像編集ソフトで連結するのが簡単だと思います。
プログラムで連結することも可能ですが、かなりコードが複雑になると思います。
2013/03/12 21:22

ビギン
はじめまして

いつもサイトでは勉強をさせていただいてます、
今回のパズルですが、こちら完了する前(30pxほど手前で)に
Clearメッセージがでてしまいます。

タイミングをずらすことは可能でしょうか?
よろしければお教えください。
2013/02/14 19:29

abenomix
こんばんは、初めまして。
「iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる」という記事に魅せられて試したところ、見事に動作し感動しました。

さて、上の例ではヒマワリの画像を1枚だけ扱っていますが、横の余白にもう一枚別の画像を置くことは可能でしょうか?
春夏秋冬で4枚並べてみたいなと思い色々試しましたが出来なかったので、もしよろしければお教え下さい。
2013/02/05 20:32

naga3
nishiyamaさん
cssのbackgroud-positionでできませんか?
2013/02/03 12:10

nishiyama
はじめまして。jquery.min.jsについて検索していた所、辿り着きました。jquery.min.jsを使用して画像を指定枠内で表示できない部分はoverflowさせ、スワイプ、ピンチ/ピンチアウトできるようにしているのですが、スマートフォンやタブレットで表示させると、縮小時、必ず画像の中央が表示してしまいます。縮小時の画像の左を表示させる方法をご存知でしたら教えていただけますでしょうか。
2013/01/31 22:20

naga3
AVEDOさん
詳しいことは分かりませんが、ブログサービスだと
セキュリティ的にJavaScriptの動作を制限している可能性は高いです。
たぶん外部JavaScript読み込みで引っかかっているのかも?

ホームページサービスを借りて試したほうがよいと思います。
2013/01/17 15:20

AVEDO
FC2ブログで「おばけー」のコードを打ってプレビューしましたが、
フェードアウトできず、さらには「おばけー」の部分が
自分のブログのトップへリンクするボタンになってしまいました。

自動改行というものがだめだと書いてあったので
それも試みましたが、だめでした。

ふつうにテキストボックスから実行したらうまくいくのに、
どうしてでしょう?
2013/01/10 13:42

naga3
Google siteは使ったことがないのですが、
いろいろ制限がありそうですね。
正常に読み込む方法は、すぐには分からないです。

jQuery使うのなら、jsdo.itなどが使いやすいですよ。
2012/12/13 13:24

google site利用者
初めまして、
とてもわかりやすい説明で助かっております。

Google siteのhtmlboxを使用してjqueryを試していたのですが、
正常に動作するもの、動作しないものが混在しており、
困惑しております。

特に外部jsファイルを使用する際、
(https://sites.google.com/site/annuairevin/nivo-slider)などを参考にしても、
failed to load external url ~.jsと出てしまい、正常に読み込めない模様です...。

これからも参考にさせてもらいます。
2012/12/12 15:34

AAAA
分かりやすそうだから
2012/12/05 16:54

naga3
画像の移動のソースを変数を使ってわかりやすく変更しました。
あと、画像の拡大縮小のソースが間違っている部分に気づいたので修正しました。
thanx! 沙悟浄さん
2012/11/13 11:08

naga3
沙悟浄さん
返事が遅れてすみません;;
確かに分かりにくかったので追記しました。
ご指摘ありがとうございます!

全体的に定数に変えたほうが分かりやすいですね、いずれやります。
2012/11/02 10:49

沙悟浄
ひとつ追記させてください。


if (x > 512) x = 512;
if (y > 384) y = 384;
ここに記述する数値を、#move の width と height の値と勘違いしてしまいました。

もしよろしければ、以下を明記いただくと分かりやすくなるかと思います。
 x は、画像の横幅から #moveのwidth を差し引いた値 (x = 1024 - 512)
 y は、画像の高さから #moveのheight を差し引いた値 (y = 768 - 768)

余計なおせっかいすみません!
2012/10/18 21:29

沙悟浄
ハゲじゃないです!皿です!

ECサイト作っていて、この機能をどうしても実装したいと考えていました。
他のサイトでプラグインを見つけたりもしましたが、Firefox以外では正常に動作せず困っていたところです。
本当に本当にありがとうございました!

「iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する」
の記事と合わせると面白そうなので、落ち着いたら組み合わせてみようと思います。
2012/10/18 21:21

naga3
八戒さん
どういたしまして!
あとは沙悟浄さんがいれば…
2012/10/14 20:15

八戒
助かりました、ありがとうございました
2012/10/12 17:58

naga3
山田さんこんにちはー。
お褒めいただきありがとうございます!
ねた切れなので何か知りたいことがありましたら
何でも言ってくださいね。
2012/09/19 23:12

悟空
クリリンのことかー!!!
2012/09/14 08:55

クリリン
押忍!おら悟空!
2012/09/13 17:01

山田 寛子
htmlを勉強しました。
練習で壁にぶつかり、jqueryを使う事にしました。
とても見やすくわかりやすいページで、初心者でも安心して始められそうです。
これからもご指導よろしくお願いします。
2012/09/03 09:57

naga3
確かにGoogleがホストしているjQueryだと分かりにくいかも知れません。
ちょっと表現を変えてみました。
2012/08/25 11:56

tom
helloココモモ
2012/08/21 14:41


GoogleがホストしているjQuery
の意味がわからない。
詳しい説明が必要では?
2012/08/17 13:38

ここちゃん
これを送ることに。。。
2012/08/01 14:44

naga3
鏡音さんは画面の向こうにいるんではないかな~
2012/07/29 23:22

ココモモ
鏡音さんにあいたいよ~
2012/07/26 11:02

ココモモ
うう・・・意味わからん                                                             もうちょっと簡単にお願い                                                            私バカだからテヘッ^^
                                                                                                    
2012/07/26 10:57