Weboo!
CSS3&javascript&jQuery
jQueryとは?
javascriptのライブラリの一つです。
ライブラリとは、jsファイルにあらかじめ汎用性の高いjavascriptのコードがプログラミングされたもので、
ウェブ上ではいくつかのライブラリが配布されています。
その中でも特に人気の高いものがjQueryです。
ウェブページに動きを付けたいときなどに、特定のコードを記述し、jQueryからjavascriptを使用します。
それによってjavascriptではそれなりに手間がかかっていたコードを省略することできます。
手軽に動きのあるサイトを作れるだけでなく、コードがすっきりして見やすくなるので、
扱いが容易になり、ページの管理をしやすくすることが出来ます。
このページでは、javascriptとjQueryの関係性、メリットやデメリット、jQueryの使い方などを記述していきます。
javascriptとの関係性
jQueryとは、javascriptで作られたライブラリです。
一番特徴的なことは、javascriptをより手間の少なく手軽に実装できる点が上げられます。
WEB上でHTMLやCSSをユーザーの操作などに応じて変更することで、
サイトに動的な効果を与えることができます。
サイトにちょっとした動きをつけたい、といったときにjavascriptを書くよりも書くコードが少ないため、とても便利です。
jQueryのメリット
コードが短いことはもちろん、記述方法もとても簡単なもので出来ているので、
初心者でもより高度なサイトを作ることが出来ます。
設置方法は至って簡単で、jQueryがサイトで配布しているファイルをHTMLに読み込むだけで使うことができます。
IDやクラス名、要素名など、CSSのセレクタが使えるため、普段CSSやHTMLを使い慣れている人にとっては覚えやすいです。
javascriptを書く際には、どのWebブラウザを使うかによってレイアウトが崩れたりしてしまう場合
があるため、ブラウザへの対応を意識しなければいけないですが、jQueryは
主なブラウザに対応するようになっているため、そのようなことを意識しなくても使えるようになります。
豊富なプラグインを使うことによって、jQueryをさらに簡単に扱うことができます。
jQueryのデメリット
jQueryの使い方
基本的なことがわかったところで、使い方を説明していきます。
準備
まずはjQueryを使うための準備です。現時点でjQueryのバージョンには1.x、2.x、3.xがあり、2.x以降のバージョンでは、
処理の高速化などが行われていますが、IE8以下の古いバージョンのブラウザをサポートしていません。
ここでは1.x系の最新版である1.12.4を使います。
使い方は、jQueryをダウンロードして使う方法と直接リンクを貼り付ける方法がありますが、
今回はGoogleが提供するサーバーから直接リンクを貼り付けて簡単に使う方法を紹介します。
HTML内のhead内に下記のように書き込みます。
HTMLタグ<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
/jquery.jsの前の1.12.4の部分を変更することによって前のバージョン、新しいバージョンも使うことができます。
これで準備は完了です。次は記述方法を見てみましょう。
コードについて
コードの記述場所は、<head>内に<script>タグを記述する方法、
またはjavascriptと同じように外部jsファイルに記述する方法があります。
外部jsファイルに記述したものを使用する際には、必ず先ほど挿入した<head>内のjQueryファイルの後ろに
<script src="ファイル名.js"></script>
このように記述してください
jQueryの基本的な記述方法は、
$(function(){ $(セレクタ).メソッド(); });
です。
$(function(){});とは、ページが読み込まれたときにスクリプトが実行されるということを表しています。
セレクタは、対象を指定するものです。
メソッドは、セレクタで指定した対象に()内の変化を加える、という文を書きます。
例えば、
$(function(){ $("p").css("font-size","50px"); });
.css("","")というメソッドは、cssのプロパティを変更するときに使うものなので、上記のようにすればセレクタで指定したpタグの文字のサイズを50pxに変更するという風にできます。
次のセクションでは、セレクタとメソッドの基本なものの一部を紹介します。
セレクタについて
セレクタとはHTMLまたはCSSのどの部分に変更を適用するかの対象を指定するものです。
指定方法は$()のカッコ内にCSSで良く使われるidやclassで指定する方法、cssのタグ要素を指定する方法など色々あります。
ここでは、基本的なものを紹介します。
IDを選択するセレクタです。指定したいclass名の前に#をつけます。
スクリプト$(function(){ $("#main").css("color","#00ff00"); });
<div id="main">あいうえお</div>
これを実行すると、#mainというIDのCSSのカラーコードのプロパティが選択され、
後に記述するメソッドの命令を与えることができます。
classを選択するセレクタです。指定したいclass名の前に.をつけます。
スクリプト$(function(){ $(".contents").css("font-size","8px"); });
<div class="contents">あいうえお</div>
これを実行すると、.contentsというclassのCSSのサイズのプロパティが選択され、変更されます。
要素(タグ)を指定するセレクタです。
スクリプト$(function(){ $("h1").css("background-color","#00ffff"); });
<h1>あいうえお</h1>
これを実行すると、.h1というタグのCSSの背景色のプロパティが変更されます。
全ての要素を指定するセレクタです。
スクリプト$("*")
,で区切りを入れることによって複数のセレクタを指定できます。
ID、クラス、要素のどれも入れることができます。
スクリプト$("#id , .class , p")
メソッドについて1
セレクタで指定したものにどう影響を与えるかを命令する役割を持ちます。
cssの変更などする際に使うメソッド
スクリプト$(function(){ $(".contents").css("color","green"); });
<p class="contents">あいうえお</p>
これを実行すると、セレクタで指定したcontentsというクラスの文字色が緑色に変更されます。
テキストの変更などする際に使うメソッド
スクリプト.text("変更したい文字");
●テキストの取得●
.text();のように()内を空白にすることによって、textの取得が行えます。
HTMLの変更などする際に使うメソッド
スクリプト.html("<h1>htmlタグなどを変更できます</h1>");
.html();のように()内を空白にすることによって、HTMLの取得が行えます。
●HTMLの文字の先頭に挿入●
スクリプト.prepend("HTMLを文字の先頭に挿入");
●HTMLの文字の後ろに挿入●
スクリプト.after("HTMLを文字の後ろに挿入");
●HTMLの指定した"要素"の前に挿入●
スクリプト.before("HTMLを指定した要素の前に挿入");
イベント
javascriptと同じように、イベント処理が出来ます。イベントとは、ユーザーが何らかの操作(アクション)を起こしたときに実行されるもののことなど指します。
例えば、あるボタンがクリックされたときに、jQuery(javascript)が実行されて画像が切り替わるetc...
記述方法は、前スライドページで紹介した書き方に少しプラスします。以下はクリックしたときにイベントを起こす、というサンプルです。
スクリプト$(function(){ $("#button").on("click" , function(){ $(".moji").css("color","red"); }); });
<p id="button">ここをクリックすると</p> <span class="moji">文字の色が変わるよ</span>
ここをクリックすると
文字の色が変わるよ
クリックやマウスオーバーなどのイベントは、.onというメソッドを使い、
$("操作するセレクタ").on("クリックなどのイベントの種類" , function(){});という形で指定します。
{}中にクリックされた後の命令文(セレクタ、メソッド)を記述します。
命令文の参考は前のセクションやスライドページ等を参考にしてください。
イベント(.onメソッド)の種類の一部
マウスの操作
対象物をクリックした際にイベントを実行する
スクリプト$(セレクタ).on( "click" , function(){ } );
対象物をダブルクリックした際にイベントを実行する
スクリプト$(セレクタ).on( "dblclick" , function(){ } );
対象物にマウスを乗せた際にイベントを実行する
スクリプト$(セレクタ).on( "mouseover" , function(){ } );
対象物にマウスを乗せ、離した際にイベントを実行する
スクリプト$(セレクタ).on( "mouseout" , function(){ } );