「JQuery」の版間の差分

2020年2月16日 (日) 04:28時点における版

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 ではなく、$ を利用したい。
匿名関数を作成し、その関数に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

http://api.jquery.com/

.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");
   }
});

プラグイン

作成

jQuery プラグインの作成

DataTables

jQuery DataTables 動的に高さを変更

Tips

jQuery Tips

jQuery Cheat Sheet

{{ref jQuery-17-Visual-Cheat-Sheet1.pdf}}

@@ 1行目: / 1行目: @@
-==jQuery==
+==[[jQuery]]==
 [[CSS]] | [[CSS3]] | [[レスポンシブWebデザイン]] |
 *[http://www.atmarkit.co.jp/fdotnet/jqueryref/index/index.html 逆引き]
-*[jQuery はじめに] [はじめに]
+*[[jQuery はじめに|はじめに]]
 {{amazon|4873114683}}
 ===ready()メソッド===
-*jQueryはready()メソッドを実装している
+*[[jQuery]]はready()メソッドを実装している
-*ready()メソッドは、一般にDOMのドキュメントオブジェクトにバインドされるカスタムイベントハンドラ
+*ready()メソッドは、一般に[[DOM]]のドキュメントオブジェクトにバインドされるカスタムイベントハンドラ
 *唯一の引数として関数を受け取る
-*この関数にはDOMがトラバースや操作を実行できるようになったときに実行されるJavaScriptのコードが含まれる
+*この関数にはDOMがトラバースや操作を実行できるようになったときに実行される[[JavaScript]]のコードが含まれる
-&lt;blockquote&gt;ready()イベントハンドラは、JavaScriptのwindow.onloadイベントにかわるjQueryの機能であり、必要に応じて何度でも利用できる。&lt;/blockquote&gt;
+&lt;blockquote&gt;ready()イベントハンドラは、[[JavaScript]]のwindow.onloadイベントにかわるjQueryの機能であり、必要に応じて何度でも利用できる。&lt;/blockquote&gt;
-  jQuery(document).ready(function(){
+  [[jQuery]](document).ready(function(){
     alert('ready!');
   });
 ===ready()イベントを使うためのショートカット===
-  jQuery(function(){
+  [[jQuery]](function(){
     alert('ready');
   });
-&lt;blockquote&gt;このイベントが必要になるのは、ページの先頭で&lt;head&gt;で囲まなければいけない場合のみ。&lt;/body&gt;の直前に配置することで、ready()イベントは使わずにすむ。&lt;/body&gt;の位置では、DOM要素だけでなく、それよりも前にあるすべてのものを読み込んでから、JavaScriptを実行することになる&lt;/blockquote&gt;
+&lt;blockquote&gt;このイベントが必要になるのは、ページの先頭で&lt;head&gt;で囲まなければいけない場合のみ。&lt;/body&gt;の直前に配置することで、ready()イベントは使わずにすむ。&lt;/body&gt;の位置では、DOM要素だけでなく、それよりも前にあるすべてのものを読み込んでから、[[JavaScript]]を実行することになる&lt;/blockquote&gt;
 ===$グローバルオブジェクト===
-*$ グローバルオブジェクトは、jQuery に置き換えられます。
+*$ グローバルオブジェクトは、[[jQuery]] に置き換えられます。
-*$() は、jQuery() 関数のエイリアスとなります
+*$() は、[[jQuery]]() 関数のエイリアスとなります
 ====$の競合を回避する====
-*$はjQueryのエイリアスだが、'jQuery' という表現とはことなり、'$'は、他のライブラリと競合する可能性がある。
+*$は[[jQuery]]のエイリアスだが、'[[jQuery]]' という表現とはことなり、'$'は、他のライブラリと競合する可能性がある。
-*しかしながら、jQuery ではなく、$ を利用したい。
+*しかしながら、[[jQuery]] ではなく、$ を利用したい。
-*匿名関数を作成し、その関数にjQueryオブジェクトを渡したのち、jQueryオブジェクトへのパラメータポイントとして、$を使う
+*匿名関数を作成し、その関数に[[jQuery]]オブジェクトを渡したのち、[[jQuery]]オブジェクトへのパラメータポイントとして、$を使う
   (function($){ // $ パラメータを使ってプライベートスコープを作成する関数
     // 競合の心配なく、$ を利用できる
-  })(jQuery) // 匿名関数を呼び出し、jQueryオブジェクトを渡す
+  })([[jQuery]]) // 匿名関数を呼び出し、[[jQuery]]オブジェクトを渡す
 ==セレクタとフィルタ==
 ===セレクタ===
 [[CSS]] |
-*jQueryでは、CSS1-3仕様で規定されているセレクタのほとんどをサポートしているだけでなく、カスタムセレクタを採用している
+*[[jQuery]]では、CSS1-3仕様で規定されているセレクタのほとんどをサポートしているだけでなく、カスタムセレクタを採用している
 {|class="wikitable"
 !名称
@@ 188行目: / 188行目: @@
 |$(":hidden")
 |-
-|visibleフィルタ
+|[[vi]]sibleフィルタ
-|$(":visible")
+|$(":[[vi]]sible")
 |-
 |}
@@ 209行目: / 209行目: @@
 ====length====
-*jQueryオブジェクトのエレメント数を保持
+*[[jQuery]]オブジェクトのエレメント数を保持
   $("img").each(function(){
      if ($(this).closest("a[target]").length == 0) {
@@ 215行目: / 215行目: @@
      }
   });
-===プラグイン===
+===[[プラグイン]]===
 ====作成====
-*jQuery プラグインの作成
+*[[jQuery プラグインの作成]]
 ====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}}

MyMemoWiki