- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!jQuery
[CSS][CSS3][レスポンシブWebデザイン]
*[逆引き|http://www.atmarkit.co.jp/fdotnet/jqueryref/index/index.html]
*[[はじめに|jQuery はじめに]]
{{amazon 4873114683}}
!!ready()メソッド
*jQueryはready()メソッドを実装している
*ready()メソッドは、一般にDOMのドキュメントオブジェクトにバインドされるカスタムイベントハンドラ
*唯一の引数として関数を受け取る
*この関数にはDOMがトラバースや操作を実行できるようになったときに実行されるJavaScriptのコードが含まれる
""ready()イベントハンドラは、JavaScriptのwindow.onloadイベントにかわるjQueryの機能であり、必要に応じて何度でも利用できる。
jQuery(document).ready(function(){
alert('ready!');
});
!!ready()イベントを使うためのショートカット
jQuery(function(){
alert('ready');
});
""このイベントが必要になるのは、ページの先頭で<head>で囲まなければいけない場合のみ。</body>の直前に配置することで、ready()イベントは使わずにすむ。</body>の位置では、DOM要素だけでなく、それよりも前にあるすべてのものを読み込んでから、JavaScriptを実行することになる
!!$グローバルオブジェクト
*$ グローバルオブジェクトは、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()|http://api.jquery.com/each/]
*合致した全てのエレメントに対して関数を実行
$("img").each(function(){
$(this).closest("a").attr("target","_blank");
});
![.closest()|http://api.jquery.com/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}}
