JavaScript++かも日記: 【jQuery】$(elements)

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

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

2007年10月24日

【jQuery】$(elements)

【jQuery , リファレンス】

ブックマーク-- Buzzurl

/ Hatena

/ Livedoor

$(elements)

ひとつまたは複数のDOM element(s) をjQueryの機能でラップします( * 「$」はjQueryオブジェクトのショートカットなのでjQuery(elements) と書いても同じです。)

引数

elements Element , Array<Element>

jQueryの機能を含ませたいDOM Element(s) または、XML Documents、Window Object。

戻り値

jQuery インスタンス (DOM Elementそのものではありませんので戻り値.innerHTMLなどはできません)

Examples

$(document.body).css( "font-size", "12px" );

$(".myClass").show();

$(document.getElementById("ww")).hide();

Example1 : 下のボタンをクリックすると、CLASS名が "myClass1769" の要素すべてをフェイドアウトで見えなくします。

犯人は

やはりお

まえだ

ったな。

<script src='./jquery-min.js'></script>
<script> 

//Dom読み込み後下記実行
$(function() {

    //ボタンにクリックイベント追加
    $("#my1769btn").click(function(e){ 

       // .myClass1769の要素すべてをフェイドアウト
       $(".myClass1769").fadeOut();

    });
});
</script>

<div>犯人は</div>
<div class="myClass1769">やはりお</div>
<div>まえだ</div>
<div class="myClass1769">ったな。</div>

<button id="my1769btn">犯人は誰?</button>

*ちなみに、逆を選ぶと「やはりおったな」になりますf^^;。

Memo

jQueryの$関数は、prototype.jsの$関数と似ていますが、DOM要素を返しません(jQueryインスタンスを返す)ので機能はまったく異なります。

Otchy ( 2007年10月24日 13:38 )

最近の jQuery に関する記事を興味深く読ませてもらっています。
いいですね、jQuery。
prototype.js から乗り換えを検討中です。
これからの記事にも期待しています。

高橋 ( 2007年10月24日 16:39 )

jQuery面白いですね。

p.s. このサイトのエントリは、記事というより気まぐれ日記なので期待は禁物です(^^;

Otchy ( 2007年10月25日 13:31 )

すいません、「記事」という表現は、エントリの日本語訳としての意味くらいに取って下さい。
プレッシャーになったらごめんなさい。

本気で始める時はリファレンスとか読み解きます；）

【コメント】