ポンクソフト

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

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

お名前:


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

残りを読む »