「JQuery」の版間の差分
ナビゲーションに移動
検索に移動
1行目: | 1行目: | ||
− | ==jQuery== | + | ==[[jQuery]]== |
[[CSS]] | [[CSS3]] | [[レスポンシブWebデザイン]] | | [[CSS]] | [[CSS3]] | [[レスポンシブWebデザイン]] | | ||
*[http://www.atmarkit.co.jp/fdotnet/jqueryref/index/index.html 逆引き] | *[http://www.atmarkit.co.jp/fdotnet/jqueryref/index/index.html 逆引き] | ||
− | *[jQuery はじめに] | + | *[[jQuery はじめに|はじめに]] |
{{amazon|4873114683}} | {{amazon|4873114683}} | ||
===ready()メソッド=== | ===ready()メソッド=== | ||
− | * | + | *[[jQuery]]はready()メソッドを実装している |
− | *ready() | + | *ready()メソッドは、一般に[[DOM]]のドキュメントオブジェクトにバインドされるカスタムイベントハンドラ |
*唯一の引数として関数を受け取る | *唯一の引数として関数を受け取る | ||
− | * | + | *この関数にはDOMがトラバースや操作を実行できるようになったときに実行される[[JavaScript]]のコードが含まれる |
− | <blockquote>ready() | + | <blockquote>ready()イベントハンドラは、[[JavaScript]]のwindow.onloadイベントにかわるjQueryの機能であり、必要に応じて何度でも利用できる。</blockquote> |
− | jQuery(document).ready(function(){ | + | [[jQuery]](document).ready(function(){ |
alert('ready!'); | alert('ready!'); | ||
}); | }); | ||
===ready()イベントを使うためのショートカット=== | ===ready()イベントを使うためのショートカット=== | ||
− | jQuery(function(){ | + | [[jQuery]](function(){ |
alert('ready'); | alert('ready'); | ||
}); | }); | ||
− | <blockquote>このイベントが必要になるのは、ページの先頭で<head>で囲まなければいけない場合のみ。</body>の直前に配置することで、ready()イベントは使わずにすむ。</body> | + | <blockquote>このイベントが必要になるのは、ページの先頭で<head>で囲まなければいけない場合のみ。</body>の直前に配置することで、ready()イベントは使わずにすむ。</body>の位置では、DOM要素だけでなく、それよりも前にあるすべてのものを読み込んでから、[[JavaScript]]を実行することになる</blockquote> |
===$グローバルオブジェクト=== | ===$グローバルオブジェクト=== | ||
− | *$ | + | *$ グローバルオブジェクトは、[[jQuery]] に置き換えられます。 |
− | *$() | + | *$() は、[[jQuery]]() 関数のエイリアスとなります |
====$の競合を回避する==== | ====$の競合を回避する==== | ||
− | *$ | + | *$は[[jQuery]]のエイリアスだが、'[[jQuery]]' という表現とはことなり、'$'は、他のライブラリと競合する可能性がある。 |
− | * | + | *しかしながら、[[jQuery]] ではなく、$ を利用したい。 |
− | * | + | *匿名関数を作成し、その関数に[[jQuery]]オブジェクトを渡したのち、[[jQuery]]オブジェクトへのパラメータポイントとして、$を使う |
(function($){ // $ パラメータを使ってプライベートスコープを作成する関数 | (function($){ // $ パラメータを使ってプライベートスコープを作成する関数 | ||
// 競合の心配なく、$ を利用できる | // 競合の心配なく、$ を利用できる | ||
− | })(jQuery) // | + | })([[jQuery]]) // 匿名関数を呼び出し、[[jQuery]]オブジェクトを渡す |
==セレクタとフィルタ== | ==セレクタとフィルタ== | ||
===セレクタ=== | ===セレクタ=== | ||
[[CSS]] | | [[CSS]] | | ||
− | * | + | *[[jQuery]]では、CSS1-3仕様で規定されているセレクタのほとんどをサポートしているだけでなく、カスタムセレクタを採用している |
{|class="wikitable" | {|class="wikitable" | ||
!名称 | !名称 | ||
188行目: | 188行目: | ||
|$(":hidden") | |$(":hidden") | ||
|- | |- | ||
− | | | + | |[[vi]]sibleフィルタ |
− | |$(": | + | |$(":[[vi]]sible") |
|- | |- | ||
|} | |} | ||
209行目: | 209行目: | ||
====length==== | ====length==== | ||
− | * | + | *[[jQuery]]オブジェクトのエレメント数を保持 |
$("img").each(function(){ | $("img").each(function(){ | ||
if ($(this).closest("a[target]").length == 0) { | if ($(this).closest("a[target]").length == 0) { | ||
215行目: | 215行目: | ||
} | } | ||
}); | }); | ||
− | ===プラグイン=== | + | ===[[プラグイン]]=== |
====作成==== | ====作成==== | ||
− | *jQuery プラグインの作成 | + | *[[jQuery プラグインの作成]] |
====DataTables==== | ====DataTables==== | ||
− | *jQuery DataTables 動的に高さを変更 | + | *[[jQuery DataTables 動的に高さを変更]] |
− | ==Tips== | + | ==[[Tips]]== |
− | *jQuery Tips | + | *[[jQuery Tips]] |
− | ====jQuery Cheat Sheet==== | + | ====[[jQuery]] Cheat Sheet==== |
− | *{{ref jQuery-17-Visual-Cheat-Sheet1.pdf}} | + | *{{ref [[jQuery]]-17-Visual-Cheat-Sheet1.pdf}} |
2020年2月16日 (日) 04:28時点における版
目次
jQuery
CSS | CSS3 | レスポンシブWebデザイン |
ready()メソッド
- jQueryはready()メソッドを実装している
- ready()メソッドは、一般にDOMのドキュメントオブジェクトにバインドされるカスタムイベントハンドラ
- 唯一の引数として関数を受け取る
- この関数にはDOMがトラバースや操作を実行できるようになったときに実行されるJavaScriptのコードが含まれる
<blockquote>ready()イベントハンドラは、JavaScriptのwindow.onloadイベントにかわるjQueryの機能であり、必要に応じて何度でも利用できる。</blockquote>
jQuery(document).ready(function(){ alert('ready!'); });
ready()イベントを使うためのショートカット
jQuery(function(){ alert('ready'); });
<blockquote>このイベントが必要になるのは、ページの先頭で<head>で囲まなければいけない場合のみ。</body>の直前に配置することで、ready()イベントは使わずにすむ。</body>の位置では、DOM要素だけでなく、それよりも前にあるすべてのものを読み込んでから、JavaScriptを実行することになる</blockquote>
$グローバルオブジェクト
$の競合を回避する
- $はjQueryのエイリアスだが、'jQuery' という表現とはことなり、'$'は、他のライブラリと競合する可能性がある。
- しかしながら、jQuery ではなく、$ を利用したい。
- 匿名関数を作成し、その関数にjQueryオブジェクトを渡したのち、jQueryオブジェクトへのパラメータポイントとして、$を使う
(function($){ // $ パラメータを使ってプライベートスコープを作成する関数 // 競合の心配なく、$ を利用できる })(jQuery) // 匿名関数を呼び出し、jQueryオブジェクトを渡す
セレクタとフィルタ
セレクタ
CSS |
- jQueryでは、CSS1-3仕様で規定されているセレクタのほとんどをサポートしているだけでなく、カスタムセレクタを採用している
名称 | 例 |
---|---|
ユニバーサルセレクタ | $("*") |
IDセレクタ | $("#id名") |
クラスセレクタ | $(".クラス名") |
要素セレクタ | $("要素名") |
グループセレクタ | $("セレクタ,セレクタ...") |
子孫セレクタ | $("要素1 要素2") |
子セレクタ | $("要素1 > 要素2") |
隣接セレクタ | $("要素1 + 要素2") |
間接セレクタ | $("要素1 ~ 要素2") |
fist-child疑似クラス | $("要素:fist-child") |
last-child疑似クラス | $("要素:last-child") |
nth-child疑似クラス | $("要素:nth-child(番号)") |
onln-child疑似クラス | $("要素:only-child") |
[attribute] | $("[属性名]") |
[attribute='vbalue'] | $("[属性名='値']") |
[attribute^='value'] | $("[属性名^='値']") |
[attribute $='value'] | $("[属性名$='値']") |
[attribute*='value'] | $("[属性名]*='値'") |
[attribute|='value'] | $("[属性名|='値']") |
[attribute~='value'] | $("[属性名~='値']") |
フィルタ
fistフィルタ | $("要素:first") |
---|---|
lastフィルタ | $("要素:last") |
evenフィルタ | $("要素:even") |
oddフィルタ | $("要素:odd") |
eqフィルタ | $("要素:eq(番号)") |
gtフィルタ | $("要素:gt(番号)") |
ltフィルタ | $("要素:lt(番号)") |
headerフィルタ | $(":header") |
アニメーションフィルタ | $("要素:animated") |
否定疑似クラス | $("要素:not(セレクタ)") |
containsフィルタ | $("要素:contains(文字列1)") |
emptyフィルタ | $("要素:empty") |
hasフィルタ | $("要素1:has(要素2)") |
parentフィルタ | $("要素:parent") |
buttonフィルタ | $(":button") |
checkboxフィルタ | $(":checkbox") |
checkedフィルタ | $(":checked") |
disabledフィルタ | $(":disabled") |
enabledフィルタ | $(":enabled") |
fileフィルタ | $(":file") |
imageフィルタ | $(":image") |
inputフィルタ | $(":input") |
passwordフィルタ | $(":password") |
radioフィルタ | $(":radio") |
resetフィルタ | $(":reset") |
selectedフィルタ | $(":reset") |
submitフィルタ | $(":submi") |
textフィルタ | $(":text") |
hiddenフィルタ | $(":hidden") |
visibleフィルタ | $(":visible") |
API
.each()
- 合致した全てのエレメントに対して関数を実行
$("img").each(function(){ $(this).closest("a").attr("target","_blank"); });
.closest()
- 開始要素から最も近い親要素を選択
$("img").each(function(){ $(this).closest("a").attr("target","_blank"); });
length
- jQueryオブジェクトのエレメント数を保持
$("img").each(function(){ if ($(this).closest("a[target]").length == 0) { $(this).closest("a").attr("target","_blank"); } });
プラグイン
作成
DataTables
Tips
jQuery Cheat Sheet
- {{ref jQuery-17-Visual-Cheat-Sheet1.pdf}}
© 2006 矢木浩人