jQuery()【DOMローディング完了処理 / jQueryオブジェクト 変換・生成】

メモ

DOMローディング完了処理

  • DOMローディング完了時の処理を記述 (DOM操作が可能)
    $( function() {…} )   例 参照
    jQuery( function( $ ) {…} )   例 参照  (エイリアス競合回避：$( document ).ready() の省略形使用、内部で $ 使用可能)
    下記も同等、但し jQuery 3.0 以降は非推奨
    $( document ).ready( handler )
    $( "document" ).ready( handler )
    $( "img" ).ready( handler )
    $().ready( handler )
  • 技術的には、メソッドチェーン可能

jQueryオブジェクト 変換

  • jQuery で扱えるように、各種形式を jQueryオブジェクト に変換(生成)
  • 次の形式から jQueryオブジェクト に変換
    • セレクタ (Selector)
    • DOM 要素 (Element)
    • DOM 要素 配列 (Array)
    • プレーン オブジェクト (PlainObject)：制限あり 構文 参照
    • 既存のjQueryオブジェクト (jQueryオブジェクト クローン生成)
    • 未指定 (空のjQueryオブジェクトを生成) jQuery 1.4 より前：ドキュメントノードが存在

jQueryオブジェクト 生成

  • HTML文字列から jQueryオブジェクト を生成
    • <tag ... > で始まる文字列はHTMLとして解析  (参照：htmlString【HTML文字列】)
      その他の場合、上記【jQueryオブジェクト 変換】のセレクタ
  • 属性等をパラメータ指定
    • HTML文字列：単一タグ (例：<img>・<img /> ・<a></a>・<a>・<a /> )

構文

説明構文戻り値備考
DOMローディング完了処理 jQuery( callback ) 1.0

callback：DOMローディング完了時、実行関数
引数
なし
戻り値
なし
jQuery DOM 操作が可能
jQueryオブジェクト 変換 jQuery( selector [, context ] )1.0

Selector selector：セレクタ
Element  | jQuery context：
jQuery セレクタから jQueryオブジェクト 生成
jQuery( element )1.0

Element element：DOM 要素
jQuery DOM 要素から jQueryオブジェクト 生成
jQuery( elementArray )1.0

Array elementArray：DOM 要素 配列
jQuery DOM 要素配列から jQueryオブジェクト 生成
jQuery( object )1.0

PlainObject object：プレーン オブジェクト
jQuery プレーン オブジェクトから jQueryオブジェクト 生成
制限あり (下記のメソッドのみサポート)
.data() ・ .prop() ・ .on() ・ .off() ・ .trigger() ・ .triggerHandler()
jQuery( selection )1.0

jQuery selection：既存 jQueryオブジェクト
jQuery 既存のjQueryオブジェクトからクローン 生成
jQuery() 1.4
jQuery 空のjQueryオブジェクト 生成
jQueryオブジェクト 生成 jQuery( html [, ownerDocument ] )1.0

htmlString html：動的に作成されるHTML文字列 (XML は不可)
document ownerDocument：要素が作成されるドキュメント
  (省略：jQuery ライブラリがロードされたドキュメント)
jQuery HTML文字列からjQueryオブジェクト 生成
(属性等有りの複数のタグの指定が可能)
jQuery( html, attributes ) 1.4

htmlString html：単一のスタンドアロンのHTML文字列
  ( <div />・<div> </ div> 等 )
PlainObject attributes：属性オブジェクト・イベント・呼び出しメソッド
jQuery HTML文字列からjQueryオブジェクト 生成
(属性等無しの単一タグを指定)

関連

例

DOMローディング完了処理

【DOMローディング完了処理 (1)】
$( function() {
  // DOMローディング完了時の処理
});


【DOMローディング完了処理 (2)】
jq2 = jQuery.noConflict();
jq2( function( $ ) {
  // DOMローディング完了時の処理
  // 他のライブラリと競合しても $ 使用可能
});

jQueryオブジェクト 変換

<style>
#id1 span { padding:1px 5px; margin-right:20px; line-height:120%; }
#id1 .border1 { border:2px red solid; }
#id1 .border2 { border:2px red dashed; }
#id1 .border3 { border:3px red double; }
#id1 .border4 { border:2px red dotted; }
</style>

<div id="id1">
  <p><span id="id11" class="classA">id11 classA</span></p>
  <p><span id="id12" class="classA">id12 classA</span></p>
  <p><span id="id13" class="classB">id13 classB</span></p>
  <p><span id="id14" class="classB">id14 classB</span></p>

  <p><span id="id21">id21</span></p>

  <p><span id="id31">id31</span></p>
  <p><span id="id32">id32</span></p>
  <p><span id="id33">id33</span></p>

  <p><span id="id41">id41</span></p>
  <p><span id="id42">id42</span></p>
  <p><span id="id43">id43</span></p>

  <p><span id="id51" class="classX">id51 classX</span></p>
  <p><span id="id52" class="classX">id52 classX</span></p>

  <p><span id="id61">id61</span></p>
</div>

<script>
// jQuery( selector [, context ] )
$( ".classA" ).addClass("border1").after('$( ".classA" )');
$( ".classB", "#id1" ).addClass("border2").after('$( ".classB", "#id1" )');

// jQuery( element )
var elm = document.getElementById("id21");
$( elm ).addClass("border3").after(' $( document.getElementById("id21") )');

// jQuery( elementArray )
var elms = Array(3);
for (var i = 1; i <= 3; i++) {
  elms[i - 1] = document.getElementById("id3" + i);
}
$( elms ).addClass("border4").after(' $( Array[ document.getElementById("id3n") ] )');

// jQuery( object )
var obj = { id41:"ID41", id42:"ID42", id43:"ID43" };
var $obj = $( obj );
$( "#id41" ).after("$(PlainObject) " + $obj.prop("id41"));
$( "#id42" ).after("$(PlainObject) " + $obj.prop("id42"));
$( "#id43" ).after("$(PlainObject) " + $obj.prop("id43"));

// jQuery( selection )
var original = $( ".classX" );
var clone = $( original );
clone.addClass("border1").after(' $( $( ".classX" ) )');

// jQuery()
$( "#id61" ).after("$() size = " + $().length);
</script>

id11 classA

id12 classA

id13 classB

id14 classB

id21

id31

id32

id33

id41

id42

id43

id51 classX

id52 classX

id61

jQueryオブジェクト 生成

<style>
#id2 span { padding:1px 5px; margin-right:20px; line-height:120%; }
#id2 .border1 { border:2px red solid; }
#id2 .border2 { border:2px red dashed; }
#id2 .border3 { border:3px red double; }
</style>

<div id="id2">
  <p><span class="classA"></span></p>
  <p><span class="classA"></span></p>
  <p><span class="classB"></span></p>
  <p><span class="classB"></span></p>
  <p><span class="classC"></span></p>
  <p><span class="classC"></span></p>
</div>

<script>
$( "<span class='border1'> (classA)</span>" ).appendTo( "#id2 .classA" );
$( "<span>", { text:" (classB)", "class":"border2" } ).appendTo( "#id2 .classB" );
$( "<span/>", { text:" (classC)", "class":"border3" } ).appendTo( "#id2 .classC" );
</script>