jQueryのコーディングの基本

Queryをインストール

script要素を使用して、jQueryのソースコードを読み込むだけ、以下のコードをHTMLに含めることです。

<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>

jQueryをインストールすれば、次の2つの関数が使用できる。

jQuery()

$()

二つの関数は引数にwindow/document/DOM要素/文字列などが指定でき、元のオブジェクトを“強化”した、元のオブジェクトにはない様々な機能を持った「jQueryオブジェクト」が返り、それらを使用することでWebページを動的に変更させることができます。

なお、コードを短く書けるので、通常は「$()」が用いられます。

具体例

// windowオブジェクトを「jQuery化」する
var $win = $(window);
// documentオブジェクト
var $doc = $(document);
// DOM要素(ここではbody要素)
var $body = $(document.body);
/ ページ内のdiv要素を全て取得
var divs = $(‘div’);
// id属性を指定
var logoImg = $(‘#logoImg’);

また、引数にCSSセレクタの文字列を指定することもでき、操作対象となるDOM要素の範囲・種類を自由自在に指定することができます。

// 複雑なCSSセレクタ
var checkboxes =
$(‘table.list > tbody > tr:odd > td:nth-child(1) input[type=checkbox]’);

出典:jQuery入門 with Dreamweaver CS5.5
http://www.adobe.com/jp/devnet/dreamweaver/articles/dwjquery_01.html

カテゴリー: jQuery タグ: , , , , パーマリンク