はじめに覚えたい3つの関数｜jQuery入門3

2009/05/7

はじめに、今回の完成見本をお見せしておきます。
⇒こちらです。
⇒それからファイル一式です。

それでは早速ここからはじまり～

■APIについて
jQueryにはたくさんの関数があります。
それらのドキュメントです。
⇒本家
 ⇒jQuery 1.3.2 日本語リファレンス
 ⇒jQuery 1.2.6 リファレンス
ちなみに一番下のサイトを私はよく利用させてもらってます。

で、ここで困ります。こんなにいっぱいの関数があってどうすりゃいいの…。
私も困ってしまったんですが、使っているうちに核となるものがわかりました。この核となるものさえ覚えておけば、だいたいなんとかなるので、あとはヒマなときにマニュアルをチラチラみて、「あっ、これ便利そう！」みたいな感じで覚えていけばよいかと思います。

■$()
jQueryで何かをしようと思ったら、まずこれをしないといけません。
$(‘ここにcssのセレクタを書く’)
とすることで、対象となるDOMをつかみます。jQueryのcssセレクタは非常に優秀なのでいろんなことができるんですが、わからなければ、黙って$(‘#id名’)を書きましょう。

サンプルです。
HTML

<h3>ex.1 $</h3>
<ul id="ex1" class="clearfix">
<li id="ex1_btn1">これを押すとだす</li>
<li id="ex1_btn2">これを押すとけす</li>
</ul>

<div id="mydiv1">mydiv1</div>

JavaScript

function ex1(){
  $('#ex1_btn1').click(function(){
    $('#mydiv1').show();
  });
  $('#ex1_btn2').click(function(){
    $('#mydiv1').hide();
  });
}

JavaScriptのこの部分だけ注目してみてください

$('#mydiv1').show();

id="mydiv1"をつかんで、showという関数を実行しています。show,hideは対象を見せたり消したりします。ASでいうところの、visibleです。

■attr()
attrはhtmlの属性値を変更します。

HTML

<h3>ex.2 attr</h3>
<ul id="ex2" class="clearfix">
<li id="ex2_btn1">これを押すと拡大</li>
<li id="ex2_btn2">これを押すと縮小</li>
</ul>

<div id="mydiv2"><img src="images/house.gif" width="100" height="100" alt="おうち" /></div>

JavaScript

function ex2(){
  $('#ex2_btn1').click(function(){
    $('#mydiv2 img').attr('width', 300);
  });
  $('#ex2_btn2').click(function(){
    $('#mydiv2 img').attr('width', 100);
  });
}

cssセレクターで#mydiv2 imgをつかみます。

$('#mydiv2 img').attr('width', 300);

html上ではそのimgはこんなふうになっています。

<img src="images/house.gif" width="100" height="100" alt="おうち" />

いろんな属性がありますが、このうちwidthを変更して大きさを変えています。もちろん他の属性値も変更することができます。srcを変更すれば画像を入れ替えることができます、altを変更すれば代替文字情報も入れ替えられます。

■css
cssはhtml内にインラインでcssを設定することでもともとのcssを上書きします。

HTML

<h3>ex.3 css</h3>
<ul id="ex3" class="clearfix">
<li id="ex3_btn1">これを押すと左に</li>
<li id="ex3_btn2">これを押すと右に</li>
</ul>

<div id="mydiv3">mydiv3</div>

JavaScript

function ex3(){
  $('#ex3_btn1').click(function(){
    $('#mydiv3').css('marginLeft', '0px');
  });
  $('#ex3_btn2').click(function(){
    $('#mydiv3').css('marginLeft', '100px');
  });
}

cssのプロパティ名なんですが
margin-left→marginLeft
padding-top→paddingTop
などのように「-」（ハイフン）が入る場合はハイフンをとって大文字にすればよいようです。

■Firebugで確認してみる
Firebugはとても便利でして、javascriptで置き換わったDOMやインラインcss情報なんかをリアルタイムで見ることができます。最初のサンプルでやったところをみてみるとこんな感じです。