はてなブックマーク

1章　jQueryとは？ DOM要素の生成 $ 又はjQueryの基本的な使い方で見たDOM要素の生成機能を見ていきます。とは言え、便宜上この場所に載せていますが、まだ説明していないjQueryのメソッドが出てきますので、一通り読み終えてから、再度このページに戻って来た方が分かりやすいでしょう。 DOM要素の生成 「jQueryの基本」で、DOM要素の生成の説明で、次のようなサンプルを見ました。 jQuery(function ($) { $("<li>三郎</li>").appendTo("#family");}); 「HTMLのタグの文字列」は、セレクターと間違われないようタグから開始します。そうすることで、DOM要素を生成することができます。そして、その生成されたDOM要素を選択しているjQueryオブジェクトが返されます。 しかし、実際の所、生成されるだけでどこかに自動で挿入される

jQueryのサンプルを気ままにアップして行きます。一応解説は付けてはいますが、基本的に、jQueryの基本をマスターしている方向けです。jQueryは、Ver.1.7以上を前提にしています。解説が良く分からないという方は、管理人による「jQuery入門道場」本を是非ご一読下さい。また、こちらで紹介するコード（プログラム）は、各々のプログラムにおいて自由にご利用していただいて構いません。但し、ブログなどへの無断転載はお辞め下さい。 【フォーム系】 チェックボックス系 チェックボックスにチェックできる数を制限する テーブル行のクリックでチェックボックスをチェックさせる チェックボックスのチェックで、背景などに色を付ける（change編） チェックボックスのチェックで、背景などに色を付ける（click編） ラジオボタン系 チェック付いているラジオボタンのラベルに色を付ける セレクト系 セレクト

タイトルそのままのサンプルを見ていきます。動くサンプルはこちら。以下の仕様を追加します。 UIも考慮して、LABELを使用する 同じ行にあるボタン（ここでは、「削除」ボタン）のクリックでは、チェック処理しない ということで、以下がサンプルになります。 jQuery(function ($) { $("table").on("click", "tr", function (event) { var checkbox = $(this).find(":checkbox"), isChecked = checkbox.prop("checked"), tag = $(event.target).prop("tagName"); if (tag === "INPUT" || tag === "LABEL") { return; } checkbox.prop("checked", !isCheck

4章　HTML、テキスト、フォーム値の取得＆設定 この章で登場するメソッド一覧です。 HTML、テキスト、フォーム値の取得＆設定 .text .html .val .html()、.text() .val() 要素の追加等 .append .append()、.prepend()、.before()、.after() .appendTo()、.prependTo()、.insertBefore()、.insertAfter() 包み込み、置換 .wrap .replace .wrap() .wrapAll() .wrapInner() .unwrap() .replaceWith() .replaceAll() 削除、クローン（コピー） .remove .clone .remove() .empty() .clone() HTML、テキスト、フォーム値の取得＆設定 ここではHTML、テキス

先読みする複数の画像の全ての読み込みが完了したら、何か処理をする例になります。jQueryのDeferred/Promiseモデルをご存知の方向けになりますので、上級者向け情報になると思います。サンプルコードは、以下のようになります。 jQuery(function ($) { var promise; // 画像の先読み関数。promiseを返す。 function preload() { var promises = [], retDefer = $.Deferred(), imgs = $.map(arguments, function (val) { return val; }); $.each(imgs, function () { var img = new Image(), defer = $.Deferred(); img.onload = function () { de

Kindle版の購入（￥450円） 本書のメニュー 「jQuery入門道場」と「よく分かる jQuery Deferred」の2冊をAmazon Kindleの電子書籍として販売しております。本サイトでは「jQuery入門道場」の5章までの内容をカット無しでWEB版で公開しております。 始めに jQueryとは？ セレクター 属性、CSS操作 HTML、テキスト、フォーム値の取得＆設定 横断（Traversing） jQueryオブジェクト操作 イベント処理 AJAX エフェクト・アニメーション プロパティ .data() ユーティリィ（関数） プラグイン その他 その他、目次など詳しくは、jQuery入門道場紹介ページをご覧ください。 電子書籍の形式と購入先 Amazon Kindle版では、PDFのような固定レイアウトではなく、リフロー型になります。リフロー型とは、見る端末により表示さ

1章　jQueryとは？ この章で見る主な内容です。 jQueryとは？ jQueryの基本 $ 又はjQueryの基本的な使い方 jQueryオブジェクトとは DOM要素の生成 jQueryとは？ jQueryとは、John Resig（ジョン・レッシグ）氏によって開発／公開されたJavaScript用のライブラリです。2006年8月に最初のバージョンをリリースして以来、着実にバージョンアップを重ね、2013年11月時点での最新版は、1系はVer.1.10.2、2系は、Ver.2.0.3です。 ライセンスは、MIT Licenseとなっており、ライブラリの著作権表示を消さなければ、商用・非商用を問わず、誰でも自由に利用することができます。 jQueryは、比較的に後発に登場したJavaScript用ライブラリですが、今では断トツの人気を博しています。 他に名が知れているライブラリでは、p

3章　属性、CSS操作 この章で登場するメソッド一覧です。 属性操作 .attr() .removeAttr() クラス操作 .addClass() .removeClass() .toggleClass() .hasClass() CSS操作 .css() 幅、高さ操作 .width() .height() innerWidth()、.innerHeight() outerWidth()、.outerHeight() スクロール .scrollTop() .scrollLeft() 座標位置 .offset() .position() 属性 属性とは、そのタグの中に書かれている部分で、例えば、<a href="xxx" target="_blank"> の場合、href="xxx" とtarget="_blank" が該当します。hrefやtargetが名前（キー）で、xxxや _bla

jquery.validate.jsのvalidateメソッドで使えるオプション部分の超訳を公開しておきます。 時間が取れたら、もっと超訳していきます。 より正確で詳しい説明を確認されたい方は、原文の方へお願いします。 debug submitHandler invalidHandler ignore rules messages groups onsubmit onfocusout onkeyup onclick focusInvalid focusCleanup meta errorClass validClass errorElement wrapper errorLabelContainer errorContainer showErros errorPlacement success highlight unhighlight ignoreTitle jquery.validat

2章　セレクター この章で見る主な内容です。 基本的なセレクター 検索する対象（範囲）を指定する書き方 階層構造によるセレクター 基本、子要素フィルター コンテントフィルター フォーム系フィルター .is()フィルター セレクト回数を減らそう 基本的なセレクター jQueryでは、CSSでお馴染みのセレクターを使って、要素を選択（取得）します。ここでは、以下の基本的なCSSセレクターを見て行きましょう。 要素（タグ）セレクター クラスセレクター IDセレクター グループセレクター ユニバーサルセレクター 属性セレクター 要素（タグ）セレクター 要素（タグ）名を元に対象要素を選択します。要素名は、括弧（<>）は付けずに、そのまま書きます。 例えば、

Kindle版の購入（￥450円） 本書のメニュー 「jQuery入門道場」と「よく分かる jQuery Deferred」の2冊をAmazon Kindleの電子書籍として販売しております。本サイトでは「jQuery入門道場」の5章までの内容をカット無しでWEB版で公開しております。 始めに jQueryとは？ セレクター 属性、CSS操作 HTML、テキスト、フォーム値の取得＆設定 横断（Traversing） jQueryオブジェクト操作 イベント処理 AJAX エフェクト・アニメーション プロパティ .data() ユーティリィ（関数） プラグイン その他 その他、目次など詳しくは、jQuery入門道場紹介ページをご覧ください。 電子書籍の形式と購入先 Amazon Kindle版では、PDFのような固定レイアウトではなく、リフロー型になります。リフロー型とは、見る端末により表示さ

jQueryの基本的な使い方を学べるサイトです。Promiseは、分かりやすく言ってしまえば、AJAX通信にあるようなsucess、errorと言ったコールバック関数をよりシンプルすっきりに書けるための仕組みと言えます。そして、Deferredは更に、Promiseの機能に加えて、付与されたコールバック関数を呼び出す機能があります。 そして、それらのPromise、Deferredの機能を更に高めるために、whenやpipeなどがあったりします。 Promise Deferred Promise まずはPromiseを見てみましょう。以下は、今までのsuccess、errorを利用するやり方です。（completeも付けてみました） function onSuccess() { console.log("成功！"); } function onFailure() { console.lo

Kindle版の購入（￥450円） 本書のメニュー 「jQuery入門道場」と「よく分かる jQuery Deferred」の2冊をAmazon Kindleの電子書籍として販売しております。本サイトでは「jQuery入門道場」の5章までの内容をカット無しでWEB版で公開しております。 始めに jQueryとは？ セレクター 属性、CSS操作 HTML、テキスト、フォーム値の取得＆設定 横断（Traversing） jQueryオブジェクト操作 イベント処理 AJAX エフェクト・アニメーション プロパティ .data() ユーティリィ（関数） プラグイン その他 その他、目次など詳しくは、jQuery入門道場紹介ページをご覧ください。 電子書籍の形式と購入先 Amazon Kindle版では、PDFのような固定レイアウトではなく、リフロー型になります。リフロー型とは、見る端末により表示さ