jQuery入門

トップ > jQuery > Core

Core

◆ jQuery(...) (1.0)

jQuery(...) と $(...) は同義です。

◆ jQuery.xxx (1.0)

jQuery.xxx と $.xxx は同義です。

◆ $(selector[, context]) (1.0)
◆ $(element) (1.0)
◆ $(elementArray) (1.0)
◆ $(object) (1.0)
◆ $(jQuery object) (1.0)
◆ $() (1.4)

スタイルシートのセレクタを用いて、HTML文書内からセレクタにマッチする要素の集合をjQueryオブジェクトとして返却します。下記の例では、文書内のすべての div要素の色を設定しています。

$("div").css("color", "red");

下記の例では、title というクラスが設定された要素の色を変更します。

$(".title").css("color", "red");

context には、検索の対象となる要素を記述します。下記の例では、id="main-frame" 要素の子孫要素に含まれる div要素の色を変更しています。

$("div", "#main-frame").css("color", "red");

引数にJavaScriptオブジェクトを渡すこともできます。

$(document.forms[0]).css("color", "red");
◆ $(html[, ownerDocument]) (1.0)
◆ $(html, attributes) (1.4)

html で指定した要素を新規に作成して返却します。下記の例では、広告を表示する要素を生成し、body要素の最後に追加します。

$("<div>Copyright (C) 2013 Xxx</div>").appendTo("body");

下記の様に、第2引数に属性のリストを指定することもできます。

$("<div />", { "class": "red", "text": "Copyright (C) 2013 Xxx" }).appendTo("body");
◆ $(callback) (1.0)

$(document).ready(callback) と同義です。文書の読み込みが完了した際にコールバック関数を呼び出します。下記の例では、文書の読み込みが完了した時点で Hello メッセージを表示します。

$(function() {
    alert("Hello!");
});
◆ $.sub() (1.5-1.8)

オリジナルの jQueryオブジェクトに影響を与えず、プロパティやメソッドを変更可能な jQueryオブジェクトの新しい複製を生成します。jQuery 1.7 で非推奨となり、jQuery 1.9 で廃止されました。

◆ $.holdReady(hold) (1.6)

hold に true を指定すると、readyイベントの発生を抑止します。<:head>~</head> 内など早い時点で true を引数に呼び出すことで readyイベントの発生を抑止し、プラグインの読み込みなどが完了した時点で、false を引数に呼び出すことで、readyイベントの発生を許可します。$.holdReady(true) が呼び出された回数分、$.holdReady(false) を呼び出す必要があります。

<script>
$.holdReady(true);
$.getScript("myplugin.js, function() {
    $.holdReady(false);
});
</script>
◆ $.noConflict([removeAll]) (1.0)

$ を使用する他の JavaScript ライブラリとの衝突を避けるために、jQuery で $ を使用せず、代わりに jQuery を使用するようにします。

<script>
$.noConflict();
jQuery("div#div1").click(function() { ... });

ただし、readyハンドラの引数に $ を指定した場合、その中でのみ $ を使用することができます。

$.noConflict();
jQuery(document).ready(function($) {
    // $ を使った記述が可能
});
    // $ を使った記述は不可

removeAll に true を指定すると、jQuery 自体も使用できなくなりますが、あまり指定されることはありません。


Copyright (C) 2013 杜甫々
初版:2013年2月3日
http://www.tohoho-web.com/js/jquery/core.htm