jQuery - 基本 (jQuery対象生成、セレクタ、フィルターなど)
・競合を解消
var j = jQuery.noConflict(); j("#id").html("innerHTML");
・jQuery対象生成
- jQuery(expression[,context])
- jQuery(elements)
- jQuery(html[,document])
- jQuery(html,props)
- jQuery(objects)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> jQuery対象取得 </title> </head> <body> <div id="html"></div> <script type="text/javascript" src="jquery-1.12.0.min.js"> </script> <script type="text/javascript"> // jQuery(expression) $("div").append("内容追加"); // jQuery(elements) $(document.getElementById("html")) .css("background-color", "#aaffaa") .css("border", "1px solid black"); // jQuery(html) $("<input type='button' value='ボタン'/>").appendTo(document.body); // jQuery(html, props) $("<input/>", { type: "button", value: "ﾓﾐｾｪﾏｲ", click: function() { alert("ｾｪﾏｲﾊｱｿﾌ｣｡"); } }) .appendTo(document.body); </script> </body> </html>
- length
- context
- jquery : jQeuryのバージョン
- each(fn(index)) : 要素を巡る
- get() : 全dom要素
- get(index) : 指定dom要素
- index(element|selector)
- toArray()
・jQuery(callback), jQuery.holdReady()
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> holdReady() </title> </head> <body> <script type="text/javascript" src="jquery-1.12.0.min.js"> </script> <script type="text/javascript"> // ready関数遅延 $.holdReady(true); // ページロード後実行 $(function() { alert("ロード完了"); }); // 2秒後に解除 window.setTimeout("$.holdReady(false);", 2000); </script> </body> </html>
・セレクタ
- CSS1-3のセレクタ （http://wp-e.org/2014/05/20/2420/）
限定子
- :first
- :last
- :not(selector)
- :even
- :odd
- :eq(index)
- :gt(index)
- :lt(index)
- :animated
- :contains(text)
- :empty
- :has(selector)
- :parent
- :hidden
- :visible
:nth-child(index/even/odd/equation)
- :nth-child(n)
- :nth-child(even)
- :nth-child(odd)
- :nth-child(xn+m)
- :first-child
- :last-child
- :only-child
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> 限定子 </title> <style type="text/css"> .test { font-size: 20pt; } </style> </head> <body> <ul> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> <li id="li5">li5</li> <li><span id="android">li6</span></li> </ul> <script type="text/javascript" src="jquery-1.12.0.min.js"> </script> <script type="text/javascript"> $("ul>li:first").append("<b> 最初のli要素</b>"); $("ul>li:not([id])").append("<b>idのないli要素</b>"); $("ul>li:even").css("background-color", "#ccffcc"); $("ul>li:gt(4)").append("<br/><b> indexが4より大きいli要素</b>") .css("border", "1px dashed black"); $("ul>li:has('span')").append( "<br/><b> spanを持つli要素</b>"); $("li>span:visible").append( "<b> 見えるspanを持つli要素</b>") .css("background-color", "#bbbbbb"); </script> </body> </html>
・form関連
- :input
- :text
- :password
- :radio
- :checkbox
- :submit
- :image
- :reset
- :button
- :file
- :hidden
- :enabled
- :disabled
- :checked
- :focus
- :selected
<script type="text/javascript"> $(":input").val("test"); $(":selected").css("border" , "1px dashed black"); $(":checked").prop("checked" , ""); </script>
jQueryのフィルター
- eq(position)
- filter(expr)
- filter(fn(index)) : fn内で、$(this)でdom⇒jQuery対象。true⇒残す、false⇒削除
- first()
- last()
- not(selector|elements|jQuery)
- not(fn(index))
- is(expr) : jQuery対象を検査
- is(fn(index)) : jQuery対象を検査
- map(callback[index])
- slice(start, end) : start～endを返す
親子関係
親取得
- parent([selector])
- parents([selector])
- parentsUntil([selector|element][,filter]) :
子取得
- children([selector])
兄弟取得
- next([selector])
- nextAll([selector])
- nextUntil([seloector])
- prev([selector])
- prevAll([selector])
- prevUntil([selector|element][,filter])
- siblings([selector]) : 前後のすべて
ほか
<script type="text/javascript"> $("body>div").contents().css("background-color", "#ddd"); $("#id").next().css("border", "2px dotted black"); $("#id").nextUntil("#android").css("font-size", "20pt"); $("#id").prev().css("border", "2px solid black"); $("#id").prevUntil("#id2").height(50); $("#id").siblings("#jid3") .append("<b> あいうえお</b>"); $("div").parent().each(function() { alert($(this).html()); }); </script>
chain方法
- andSelf() : フィルタ、検索前後合体する
- end() : フィルタ、検索前の状態に戻す
<script type="text/javascript"> // #node1と次のnodeを返す $("#node1").next().andSelf().css("border" , "2px solid black"); // node2を返す $("#node2").next().end().css("background-color" , "#ffaaaa"); </script>
