初心者でも怖くなかった！jQuery超入門
タッチデバイスに対応するために、jQueryなどのjsライブラリを使用する機会も増えているのではないでしょうか。
jQueryはプラグインなども豊富に配布されているため、
サイトに欲しい動きを実現してくれるプラグインを探して⇒CSSをカスタマイズ⇒いいかんじのが出来る！ といったように、CSSとHTMLが解るwebデザイナーであれば割と気軽にサイトをリッチにすることが可能です。
が、ダウンロードしたプラグインにちょっと動きを追加したい、とか あのブラグインとこのプラグインのいいとこどりをしたい、となると、なかなか拾い集めでは上手いこといかず。 ブログラマーの方にお手伝いいただいたり、妥協してしまうこともあったりしないでしょうか。
今回はHTML5、CSS3までは解るけどjQueryはハードルが高いなあと感じて1歩踏み出せずにいる、ノンプログラマー系デザイナー向けに、 そもそもjQueryって何だっけというところをサンプルを交えながら振り返ってたいと思います。
JavaScriptの、ライブラリ？
jQueryは、JavaScriptライブラリのうちのひとつです。
ライブラリ＝ある特定の機能を持つプログラムを定型化して、他のプログラムが引用できる状態にしたものを、複数集めてまとめたファイルのことである。
＜引用＞− iOS UI Element Usage Guidelines
JavaScriptライブラリと呼ばれる「jQuery.js」は拡張子の通り、jsソースで出来たファイルであり、 中身はJavaScriptでたくさんの処理が書かれています。
そのたくさんの処理には各自名前（メソッド名）がついているので、HTMLファイルに書きこんだスクリプトの中で、 その名前（メソッド名）を呼んであげると「jQuery.js」の中の該当処理が実行されます。
つまり「jQuery.js」は調理済みの冷凍食品がぎっしり詰まった大きな冷凍庫といった感覚でしょうか。
プラグインなしでも「jQuery.js」読み込みだけでいろいろ出来る
jQueryを使用したいと思ってweb検索をすると、あらかじめデザインされた、カスタマイズ済みのプラグイン（有名なところではlightboxなど）に出会うことが多く、
なんとなく、jQueryを使う＝プラグインをカスタマイズする、という流れにもなったりしますが、簡単な処理であれば、プラグインを探すよりもあらかじめ用意されているメソッドを理解して活用すれば、簡潔に望み通りの処理を書くことが出来るかと思います。
「jQuery.js」から引き出せるメソッド（調理済み食品）の種類は大きく6種類に分類されます。
「jQueryを使う」⇒ここから決まった文法で、各メソッドを呼び出す＋それらが適切なタイミングで動くように条件分岐等を書くという作業になるかと思います。
| イベント | ほかのメソッドを実行するきっかけとなるメソッドを指定します。 |
| 効果 | スライドイン、フェードアウトなど、画面効果を与える処理を実行するメソッドがいくつか用意されています。 |
| CSS | CSSを操作するメソッドがいくつか用意されています。 |
| HTML | HTMLを操作するメソッドがいくつか用意されています。 |
| AJAX | AJAXを操作するメソッドがいくつか用意されています。 |
今回ご紹介するサンプルは上の表のうち、CSSメソッドを主に使用するサンプルになります。
CSSなら解る！CSSを制御してみよう！
【下準備】
何はともあれ、「jQuery.js」をサイトに読みこみましょう。
最新版をサイトからDLして読みこませてもよいですが、googleAPIで提供されているものを読みこんでも良いので、読みこんでみます。
https://developers.google.com/speed/libraries/devguide?hl=ja&csw=1#jquery こちらで公開されています。
【HTML＆CSS】
何はともあれ、「jQuery.js」をサイトに読みこみましょう。
最新版をサイトからDLして読みこませてもよいですが、googleAPIで提供されているものを読みこんでも良いので、読みこんでみます。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
最新版のパスはhttps://developers.google.com/speed/libraries/devguide?hl=ja&csw=1#jquery こちらで公開されています。
【HTML＆CSS】
.biggerbutton{ display: block; width: 250px; text-align: center; margin: 8px auto; font-size: 14px; padding: 8px 0;}
.sizecontrol{ width: 300px; height: 100px; margin: 10px auto; font-size: 12px;}
.bigger{ font-size: 17px;}
.sizecontrol{ width: 300px; height: 100px; margin: 10px auto; font-size: 12px;}
.bigger{ font-size: 17px;}
<div class="sizecontrol"> ここに入ってる文字が大きくなったり小さくなったりします。 </div> <button class="biggerbutton">文字サイズを大きくする</button>
★ミッション
ボタン(<button>)を押したらコンテンツ(<div class="sizecontrol">)の文字のサイズを大きくする、再度押したら元の大きさに戻す。
★仕組み
要素に指定しているcssをボタンを押したタイミングで切り替えることで、文字のサイズの大小をコントロールする。
★プログラム的に↑の処理を最低限実行するシナリオを日本語で言うと
1)ボタン<button>が押されたら（イベント）
2)文字サイズを大きくしたいコンテンツ<div class="sizecontrol">に大きめのフォントサイズを指定しているCSSクラス"bigger"を足す（CSS制御）
3)ボタン<button>のラベルを「文字サイズを戻す」に切り替える（HTML操作）
4)再度ボタン<button>が押されたら、（イベント）
5)文字を大きくしているclass="bigger"を<div class="sizecontrol">から削除（CSS制御）
6)ボタン<button>のラベルを「文字サイズを大きくする」に切り替える（HTML操作
今大きいのか小さいのかによって1)～3)をやるのか、4)から6)をやるのか動きか変わるので、
if文を使って状況を判断しておく
1)ボタンのクリックを感知する部分を書く
この一番最初の「function()」には、「ページ読み込みが完了したら」という意味があります。詳しくは別の機会に…！！
最初以外にもfunction()は出てきますが、その時は「関数を定義する」という意味で使われています。
イベントが発生したときに、次に定義した関数を実行せよ、という感じになります。
クリックの感知には、イベントメソッドの中の「clickメソッド」を使います。 文法的には以下の感じです。
今回動かしたい部分はページの中の「.biggebutton」というクラスが付いているbuttonに限って動きを付けたいので、
と書きます。
<script type="text/javascript"> $(function(){
// ここに処理を記述します。
});
</script>
$(function(){}); はjQueryの処理を書く際、最初に定型的に書くものです。// ここに処理を記述します。
});
</script>
この一番最初の「function()」には、「ページ読み込みが完了したら」という意味があります。詳しくは別の機会に…！！
最初以外にもfunction()は出てきますが、その時は「関数を定義する」という意味で使われています。
イベントが発生したときに、次に定義した関数を実行せよ、という感じになります。
クリックの感知には、イベントメソッドの中の「clickメソッド」を使います。 文法的には以下の感じです。
$("クリックされる対象のタグorタグについてるスタイル名").click(function(){この中の処理をやる});
今回動かしたい部分はページの中の「.biggebutton」というクラスが付いているbuttonに限って動きを付けたいので、
<script type="text/javascript">
$(function(){
$(".biggerbutton").click(function(){この中の処理をやる});
});
</script>
$(function(){
$(".biggerbutton").click(function(){この中の処理をやる});
});
</script>
と書きます。
2)文字が入っているdivに文字サイズを大きくするclassを足す
と、同時にボタンのラベルを「文字サイズを戻す」に書き換える
cssクラスをタグに追加するのには、CSSメソッドの中の「addClassメソッド」を使います。 文法的には以下の感じです。
html要素のテキスト変更には、htmlメソッドの中の「textメソッド」を使います。 文法的には以下の感じです。
この二つを、1)で書いた「この処理をやる」の中身として書いていきます。
でも、大きくなったきり、戻すことができません！
と、同時にボタンのラベルを「文字サイズを戻す」に書き換える
cssクラスをタグに追加するのには、CSSメソッドの中の「addClassメソッド」を使います。 文法的には以下の感じです。
$("追加する対象のタグやクラス名").addClass("追加するクラス名");
html要素のテキスト変更には、htmlメソッドの中の「textメソッド」を使います。 文法的には以下の感じです。
$("対象となるタグや、クラス名").text("変更後のテキスト");
この二つを、1)で書いた「この処理をやる」の中身として書いていきます。
<script type="text/javascript">
$(function(){
$(".biggerbutton").click(function(){
$(".sizecontrol").addClass("bigger");
$(".biggerbutton").text("文字サイズを戻す");
});
});
</script>
これで文字が大きくなりました！$(function(){
$(".biggerbutton").click(function(){
$(".sizecontrol").addClass("bigger");
$(".biggerbutton").text("文字サイズを戻す");
});
});
</script>
でも、大きくなったきり、戻すことができません！
3)再びボタンを押したら、文字サイズを元に戻したい。
「文字サイズ」を元に戻す＝「文字サイズを大きくしているスタイルを取る」ことになるかと思います。
html要素のテキスト変更には、CSSメソッドの中の「removeClassメソッド」を使います。 文法的には以下の感じです。
文字が小さくなったら、ボタンのラベルを再度大きくしたい時ように差し替えておいたほうが親切なので、先ほどのtextメソッドで再度、「文字を大きくする」に変更する処理を書きます。
と一旦書きます。やりたい動きの処理は全部書きました。
が、これだけでは、大きくしたり小さくしたりして終わってしまう処理なので、
ボタンが押されたときの状態を「判断」する処理を追加する必要があります。
「文字サイズ」を元に戻す＝「文字サイズを大きくしているスタイルを取る」ことになるかと思います。
html要素のテキスト変更には、CSSメソッドの中の「removeClassメソッド」を使います。 文法的には以下の感じです。
$("対象となるタグや、クラス名").removeClass("除去するclass名");
文字が小さくなったら、ボタンのラベルを再度大きくしたい時ように差し替えておいたほうが親切なので、先ほどのtextメソッドで再度、「文字を大きくする」に変更する処理を書きます。
<script type="text/javascript">
$(function(){
$(".biggerbutton").click(function(){
$(".sizecontrol").addClass("bigger");
$(".biggerbutton").text("文字サイズを戻す");
$(".sizecontrol").removeClass("bigger");
$(".biggerbutton").text("文字サイズを大きくする");
});
});
</script>
$(function(){
$(".biggerbutton").click(function(){
$(".sizecontrol").addClass("bigger");
$(".biggerbutton").text("文字サイズを戻す");
$(".sizecontrol").removeClass("bigger");
$(".biggerbutton").text("文字サイズを大きくする");
});
});
</script>
と一旦書きます。やりたい動きの処理は全部書きました。
が、これだけでは、大きくしたり小さくしたりして終わってしまう処理なので、
ボタンが押されたときの状態を「判断」する処理を追加する必要があります。
4)今、文字サイズは大きいのか小さいのか！
文字サイズが大きいかどうか＝class="bigger"がついているかどうか、で判断出来るかと思います。 これには「hasClassメソッド」を使います。
↑のように書いて、付いているか確かめたいclass名が実際付いていたら裏側的にtrueを返します。
これだけ書くと、ただ、「あるよ！」というお返事だけが返ってきて何も起こらないので、
この結果如何で処理を分けるように指示文を書かなければなりません。
そこで出てくるのがif文です。
if(条件){処理1}else{処理2}
という書き方になります。else{}は条件に合わなかった場合の処理を書きます。何もしない場合は省略できます。
実際にやりたい処理をそれぞれに入れ込んでいきましょう。
文字サイズが大きいかどうか＝class="bigger"がついているかどうか、で判断出来るかと思います。 これには「hasClassメソッド」を使います。
$("対象となるタグや、クラス名").hasClass("付いているか確かめたいclass名");
↑のように書いて、付いているか確かめたいclass名が実際付いていたら裏側的にtrueを返します。
これだけ書くと、ただ、「あるよ！」というお返事だけが返ってきて何も起こらないので、
この結果如何で処理を分けるように指示文を書かなければなりません。
そこで出てくるのがif文です。
if(条件){処理1}else{処理2}
という書き方になります。else{}は条件に合わなかった場合の処理を書きます。何もしない場合は省略できます。
<script type="text/javascript">
if($(".sizecontrol").hasClass("bigger")){
.biggerが付いていた場合にやりたい処理
}else{
.そうでなかったときにやる処理
}
</script>
if($(".sizecontrol").hasClass("bigger")){
.biggerが付いていた場合にやりたい処理
}else{
.そうでなかったときにやる処理
}
</script>
実際にやりたい処理をそれぞれに入れ込んでいきましょう。
<script type="text/javascript">
if($(".sizecontrol").hasClass("bigger")){
$(".sizecontrol").removeClass("bigger");
$(".biggerbutton").text("文字サイズを大きくする");
}else{
$(".sizecontrol").addClass("bigger");
$(".biggerbutton").text("文字サイズを戻す");
}
</script>
これで文字サイズを大きくするjQuery書けました！ if($(".sizecontrol").hasClass("bigger")){
$(".sizecontrol").removeClass("bigger");
$(".biggerbutton").text("文字サイズを大きくする");
}else{
$(".sizecontrol").addClass("bigger");
$(".biggerbutton").text("文字サイズを戻す");
}
</script>
いつ使うのか、ということはさておき、
cssの着脱をjQueryでコントロールする、という発想は理解いただけたでしょうか。
cssが理解出来ている方であればjQueryがぐっと身近に感じられたハズです。ハズです。
↑では
.hasClass
.removeClass
.addClass
というcssコントロール系のメソッドを使っていますが、
jQueryには他にも
こんなCSS制御系メソッドがあったりします。
今回はclassの着脱をしたので、
toggleClass() 選択した要素がら、複数のクラスの追加/削除の間をトグルする
こちらも使えそうですね。
toggleClassメソッドを使うと、↓のような感じになりました。
<script type="text/javascript">
$(function(){
$(".biggerbutton").click(function(){//"biggerbutton"というクラスの付いた要素がクリックされたら
$(".sizecontrol").toggleClass("bigger");//.sizecontrolというクラスのついた要素に"bigger"というクラスを着脱する
if($(".sizecontrol").hasClass("bigger")){
$(".biggerbutton").text("文字サイズを小さくする");
}
else{
$(".biggerbutton").text("文字サイズを大きくする");
}
});
});
</script>
他にも変数を使って書いたり、さまざまな記述方法があると思いますが、とりあえず今日はこのへんで。
どんなメソッドがあるのかがある程度覚えられると、自分で処理を書く時の考え方の幅も拡がりそうですね。
ここまで読んでいただきありがとうございました。jQueryアレルギー解消の一助になれば幸いです。
cssの着脱をjQueryでコントロールする、という発想は理解いただけたでしょうか。
cssが理解出来ている方であればjQueryがぐっと身近に感じられたハズです。ハズです。
↑では
.hasClass
.removeClass
.addClass
というcssコントロール系のメソッドを使っていますが、
jQueryには他にも
| addClass() | 選択した要素へ複数のクラスを追加します |
| css() | 選択した要素の複数のstyleプロパティを設定するか返す |
| hasClass() | 選択した要素が指定のクラスを持っているかどうかをチェックする |
| height() | 選択した要素の高さを設定するか返す |
| offset() | 選択した要素の位置（ドキュメントの相対位置）を設定するか返す |
| offsetParent() | 置かれている位置の最初の親要素を返す |
| position() | 選択した要素の位置（親要素からの相対位置）を返す |
| removeClass() | 選択した要素から複数のクラスを削除する |
| scrollLeft() | 選択した要素のスクロールバーの横方向の位置を設定するか返す |
| scrollTop() | 選択した要素のスクロールバーの楯方向の位置を設定するか返す |
| toggleClass() | 選択した要素がら、複数のクラスの追加/削除の間をトグルする |
| width() | 選択した要素の幅を設定するか返す |
こんなCSS制御系メソッドがあったりします。
今回はclassの着脱をしたので、
toggleClass() 選択した要素がら、複数のクラスの追加/削除の間をトグルする
こちらも使えそうですね。
toggleClassメソッドを使うと、↓のような感じになりました。
<script type="text/javascript">
$(function(){
$(".biggerbutton").click(function(){//"biggerbutton"というクラスの付いた要素がクリックされたら
$(".sizecontrol").toggleClass("bigger");//.sizecontrolというクラスのついた要素に"bigger"というクラスを着脱する
if($(".sizecontrol").hasClass("bigger")){
$(".biggerbutton").text("文字サイズを小さくする");
}
else{
$(".biggerbutton").text("文字サイズを大きくする");
}
});
});
</script>
他にも変数を使って書いたり、さまざまな記述方法があると思いますが、とりあえず今日はこのへんで。
どんなメソッドがあるのかがある程度覚えられると、自分で処理を書く時の考え方の幅も拡がりそうですね。
ここまで読んでいただきありがとうございました。jQueryアレルギー解消の一助になれば幸いです。
by spdesigner
| 2013-12-26 11:02
|
Comments(0)
