｢君アレ｣番外編 ～イチからのjQuery～ 1
新人さん達にWEB制作とは何たるかをレクチャーすべく始まった社内勉強会。
初歩から学ぶ「アレコレ」。
講師を務めるにあたり、資料作りをする中で意外な発見や、小さな疑問の解決など振り返るのはとても大切なことですね～
というわけで、私の苦手分野「jQuery」。
プラグインコピペで出来る子を気取っていた松本によるイチから振り返る「jQueryアレコレ」。
jQueryとはなんぞや？？と調べてみると
jQuery
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。
ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。
様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。― ウィキペディアより
簡単に言うとjQueryとはJavascriptのライブラリ（複数のプログラムを再利用可能な形でひとまとまりに簡素化したもの）のひとつ。
これを使用すれば、複雑になりがちなJavascriptのコードを書くこと無しに、簡単なコードでJavascriptを実行できるようになる、と言うわけです。
上のjQueryロゴにも記載されている「write less, do more.」の言葉の通り。
「より少ない書き方で、もっと多くこなす」
なるほど。
ではさっそく、
手順その1 headタグ内にjQuery本体を読み込む
headタグ内にjQuery本体を読み込む
jQueryを使用したいページのheadタグ内に、jQueryを呼び込むためのタグを書く。
方法は主に2つ。
１．jQuery公式サイトからDL
※特別な理由がない限り、最新版ライブラリの「Minified（圧縮版）」をDLすれば良い。
HTML
<head>
（中略）
<script type=”text/javascript” src=”jQueryライブラリをアップロードした場所/jquery-1.8.2.min.js”></script>
（中略）
</head>
２．Google Libraries APIなどを利用
※実装は簡単ですが、ネット環境のある場所でないとjQueryが動きません。
HTML
<head>
（中略）
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
（中略）
</head>
それぞれどちらかを内に記述
準備完了です。
手順その2 jQueryを書く
コードを書く場所
jQueryのコードは、headタグ内、jQuery本体のコードの後に記述。
※コードの煩雑化を防ぐために外部ファイルから読み込む方が良い。
CSSを外部読み込みにしている場合は、コードはCSS読み込みタグの後に配置すること。
これはjQueryに限ったことではないですが、JavascriptはCSSの様に同時に読み込んではくれず、それぞれに処理の時間がかかります。
HTMLは上から記述してあるものを順番に読み込んでいくため、途中で読み込みの時間がかかるような事があるとページの表示速度に影響を及ぼしてしまう。
手順その3 jQueryの基本的な形
まずは基本形
js
$(function(){
ここにjQueryの処理を記述
});全てがこの形ではないですが、ひとまず現段階ではこれだけ覚えちゃいます。
js
$(function(){
$('A').B()
});Aを「セレクタ」と言い、Bを「メソッド」、Bの直後の括弧内を「パラメータ」と言います。
※パラメータは必ずしも必要なわけではなく、パラメータを用いないメソッドもあります。
「セレクタ」とは任意の範囲、要素を指定するためのもので、jQueryを覚える上で欠かせない要素です。
…ですがセレクタはCSSと同じような記述をするため、私にも出来るような気がしてきました。。。。
（セレクタは「“」（ダブルクォーテーション）、もしくは「’」（シングルクォーテーション）で囲うのを忘れずに。）
「“」（ダブルクォーテーション）、または「’」（シングルクォーテーション）で囲まれた箇所は文字列として認識されます。
そのため文字列以外、例えば数値を指定する場合は「“」や「’」で囲まずに値を指定することが必要です！
例えば
js
$('#demo') – idセレクタ
$('.demo') – クラスセレクタ
$('li a') – 子孫セレクタ
$('p.demo, p.demo_in') – グループセレクタ他にもいろいろなセレクタがあります～
デモ 1
HTML
<div class=”demo01″>
デモテキストデモテキストデモテキスト<br>
デモテキストデモテキストデモテキスト<br>
デモテキストデモテキストデモテキスト<br>
でも。。。赤くしたいな
</div>
css
.demo01{
color:#000;
}
上記のコードがあったとすると、ブラウザで表示すると以下のようになります。
デモテキストデモテキストデモテキスト
デモテキストデモテキストデモテキスト
でも。。。赤くしたいな
では、このテキストをCSSを使うことなくjQueryで赤色に変更したいと思います
js
$(function(){
$('.demo01').css('css'.'red')
});と記述すると、
「.demo01」のcssのcolorをredにするという命令がされます。
そしてスタイルシートを変更せずにテキストが赤色になりました。
HTML
<div class=”demo01″>
デモテキストデモテキストデモテキスト<br>
デモテキストデモテキストデモテキスト<br>
デモテキストデモテキストデモテキスト<br>
でも。。。赤くしたいな
</div>
面白ですね。
こんな感じでどんどん複雑な事が出来るようにがんばります～
