jQueryとは？
jQueryはプログラミング言語である「JavaScript」を物凄く簡単に書けるようにしてくれるファイル（ライブラリ）です。
『writeless,domore』記述を少なく、もっと簡単に動く理念の上開発されていますので、そのままJavaScriptを使って記述するよりも簡単かつ直感的に記述ができます。
JavaScriptを利用して作られているので、JavaScriptを記述することも可能になっています。
JavaScriptを使って記述すると何行もコードを書かなくてはならなかったコードもjQueryを使えばたった1行で済んでしまうこともありプログラミングが苦手な方々からも愛されているものとなっています。
- 内容を書き換える
- 見た目を変える
- 追加・削除
- 属性の変更
- アニメーション（簡単なもの）
など、色々なことができる！
この記事の目次
jQueryを使う為の前準備
jQueryはJavaScriptのライブラリであり、外付けのものなので持ってきて取り付けないと使用できない。 読み込むにはjQueryの本体をscriptタグのsrc属性を使って読み込む。 ※jQuery本体を読み込んだ後に記述をしないと動きません本体をダウンロードして読み込む
jQueryの公式サイトからダウンロードできる ダウンロードする → 設置する サイトごとにやるminが付いたファイル
本体をダウンロードせず読み込む(CDN)
CDN＝コンテンツ・デリバリー・ネットワーク よく使われているものをネット上で配信して、そのまま使えるようにしているもの よそからよく使うものを簡単に持ってこれるサービスメリットとデメリット
メリット
- 入れるのが楽
- 読み込みが早い
デメリット
- ネットが繋がっていないと使えない
jQueryを記述するときに．．．。
まずはページの読み込みが完了してからコードを実行させるために
|
1 2 3 |
$(document).ready(function{ //HTMLの準備ができてから //中に処理を書く }); |
|
1 2 3 |
$(function(){ //中に処理を書く }); |
のどちらかを必ず書く!
動かない時はこのどちらかがあるかまず確認
なんで読み込み完了を待つの？
コードは上から読み込まれていきます。
jQueryのコードよりも前に動かしたい要素が記述されていれば問題なく動きますが、動かしたい要素の読み込み前にjQueryのコードがあるとこのコードは動かなくなります。
コードは上から順番に読み込まれていくのでjQueryのコードが読み込まれたときに動かしたい要素が読み込まれていないとjQueryが操作する要素が見つからないために何も実行されないのです。
ただしコードの実行タイミングを遅らせる上記の記述をすれば話は別です。 ページで使われるすべてのコードを読み込み終わってからjQueryを実行してくれるので記述の順番に関係なくコードが実行できるようになりますよ
jQuery本体のバージョン
- 1.x.x → 古いブラウザにも対応
- 2.x.x → 新しいブラウザだけ対応 軽い
- 3.x.x → 上記2つを合わせて無駄を省いたもの
同じように使えるが別物と考えてOK
何をするのかで適宜使い分けることができれば最高なのですが、毎回こだわっていたら作業時間も増えてしまうので、最新版を使ってみて 不具合が出るようだったらバージョンを変えるなどの対策をしたほうがよいでしょう。
