JavaScript++かも日記: 【jQuery】$(expression[,context])

このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と
[ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者
でAllaboutのJavaScriptガイドとか牛久大仏の足元で草むしりをしながら
暮らしている【高橋登史朗】によるサポートページ兼無駄話ブログです

*このスクリプト動かないよ～、とかの情報は
各「コメント欄」へ書き込んでいただけるとうれしいです。
直せないかもしれないけどf^^;;;

2007年10月22日

【jQuery】$(expression[,context])

【jQuery , リファレンス】

ブックマーク-- Hatena

/ Livedoor

$( expression [, context] )

第一引数expression のCSSセレクタ(参照→Selectors)にマッチするエレメントを検索します。デフォルトではHTML内のdocumentオブジェクトから探します。もし、第二引数context でコンテクストを指定するならそこから探します。

この関数はjQueryの中心的な機能を持ちます。jQueryのすべてが、これに基づいているか、または何らかの方法でこれを使用します。

( * 「$」はjQueryオブジェクトのショートカットなのでjQuery( expression, [context] )と書いても同じです。 *ｖ1.1系で使えたXPathふうの記法はv1.2では削除されました。互換用プラグインはあります。参考→jQuery 1.2リリース&変更点など )

引数

expressionString

CSSセレクタなどの検索文字列("#idName"とか ".className" "a[haref ='about:blank']'など参照→Selectors )

context Element, jQuery (省略可)

DOM ElementかDocument か jQuery (デフォルトdocument)

戻り値

jQuery インスタンス（最初に1度だけ作られます。べきとう。）

Examples

$("#myTest").show();

$("#my1765 > p").css("border", "dotted 3px #333");

$("DIV .test").html("Hello");

Example1 : 下のボタンをクリックすると、ID名が"my1765"の要素配下にあるすべてのP要素へCSS指定します。

ここは無視

ここにドットボーダー

ここも無視

ここにドットボーダー

<script src='./jquery-min.js'></script>
<script> 
$(function() {//Dom読み込み後下記実行
    $("#my1765btn").click(function(e){//ボタンにクリックイベント追加

         // #my1765 > p の要素へドットボーダーなどCSS指定描画
        $("#my1765 > p").css("border", "dotted 3px #333")
                          .css("backgroundColor", "#C2FF68")
    });
});
</script>

<div id="my1765"
       style="background-color:#eee;
            padding:12px">
ここは無視
<p>ここにドットボーダー</p>
<span>ここも無視</span>
<p>ここにドットボーダー</p>
</div>

<button   id="my1765btn">click</button>

【コメント】