jQuery入門というシリーズ – 第二回
第一回でjQueryを動かす準備をしました。
第二回からは実際に自分で書いてみましょう！
だいたい必ず書くアイツ。
$(function(){
});
jQueryといえば、だいたいコイツに挟まれています。
コイツの意味は何なんでしょう？
意味を理解するためにまず、コイツを略さない形で書いてみましょう。
$(document).ready(function(){
});
または
$(document).on('ready', function(){
});
と書きます。
これは「documentの準備ができたら(readyになったら)、{}の中身を動かすよ」という意味です。
documentの準備ができたら = htmlを頭から足まで全部読み込んだら です。
Are you ready?のreadyですよ！
htmlは通常上から順番に読み込まれますが、コイツに挟まれている部分は「全部読み込んだ後で動く」ということになります。
プラグインなどでたまに、実行命令を下の方に書かないとちゃんと動かないヤツがいます。
それは、この定型文に挟まれていないヤツである可能性が高いです。
逆にいえば、コイツに挟んであげれば上の方に書いてもちゃんと動くということです。
あまりに毎回これを書くので、めちゃめちゃ短い省略形が生まれたと思っておいてください。
それでは今すぐこの1文を書いて、jQueryの練習の準備しましょう！
<script>
$(function(){
});
</script>
さっそく1行書いてみよう
まずhtmlを書いて準備します。こちらをどうぞ。
<p id="test">ここに書いた文字が変わります</p>
何の変哲も無いpタグですね。
このpタグに挟まれた文字を、jQueryで書き換えてみましょう！
先ほどのjQueryの定型文の間に次の1行を追加してください。
$('#test').text('ちゃんと変わりました');
ブラウザで確認してみましょう。
ちゃんと変わりましたか？
このjQueryの1文の意味は、「#testのtextを’ちゃんと変わりました’にする」です。
textというのは開始タグと閉じタグの間のテキストのことです。
ちなみにjQueryでは、以下のものはクォーテーションで囲みます。
- タグ名
- id名・class名
- 文字列
囲まないものは以下です。変数については、詳しくは出てきたときに。
- 数値
- 変数名
また、「.」は無理やり日本語に直すと「〜に」とか「〜を」とか「〜の」とかになります。
つまり女子です。キャピ。違います助詞です。
$( )で囲むとそいつは主人公になります。
今は#testがついてるタグが主人公ですね。
定型文も、略さないで書くと$(document)と書きました。
これはdocumentが主人公ということですね。
jQueryにはいろんなメソッドがあります
メソッドとは動詞の部分です。
先ほどの例だとtextが「テキストを変える」というメソッドです。
jQueryには様々なメソッドがあります。
では、先ほどのhtmlはそのままに、jQuery定型文の中身を書き換えてみましょう。
$('#test').css('color', 'red');
こちらは、「#testのcssをcolor:redに変える」という意味です。
先ほどのtextメソッドは()の中身が1つでしたが、cssメソッドの場合は「,」区切りで2つになりました。
メソッドはこんな風に、()の中に書くもの(パラメータ)の個数が違います。
渡すパラメータの個数で意味が変わるメソッドもあります。
このcssメソッドちゃんも、
$('#test').css('color');
と1つのパラメータだけ渡した場合は「#testのcssのcolorの値を取得する」という意味に変わります。
cssか何かで#testのcolorをblueとか指定していたとしたら、
「blueという値を取得する」ということになりますね。
他にも便利なメソッドがたくさんあるので、順番にご紹介していきます！
では、第三回に続く。。