Weboo!

CSS3&javascript&jQuery

 

 

 

jQueryとは?

javascriptのライブラリの一つです。

ライブラリとは、jsファイルにあらかじめ汎用性の高いjavascriptのコードがプログラミングされたもので、

ウェブ上ではいくつかのライブラリが配布されています。

その中でも特に人気の高いものがjQueryです。

ウェブページに動きを付けたいときなどに、特定のコードを記述し、jQueryからjavascriptを使用します。

それによってjavascriptではそれなりに手間がかかっていたコードを省略することできます。

手軽に動きのあるサイトを作れるだけでなく、コードがすっきりして見やすくなるので、

扱いが容易になり、ページの管理をしやすくすることが出来ます。

このページでは、javascriptとjQueryの関係性、メリットやデメリット、jQueryの使い方などを記述していきます。

javascriptとの関係性

jQueryとは、javascriptで作られたライブラリです。

一番特徴的なことは、javascriptをより手間の少なく手軽に実装できる点が上げられます。

WEB上でHTMLやCSSをユーザーの操作などに応じて変更することで、

サイトに動的な効果を与えることができます。

サイトにちょっとした動きをつけたい、といったときにjavascriptを書くよりも書くコードが少ないため、とても便利です。

jQueryのメリット

・初心者でも手軽にjavascriptと同じ事が出来る

コードが短いことはもちろん、記述方法もとても簡単なもので出来ているので、

初心者でもより高度なサイトを作ることが出来ます。

・設置方法が簡単

設置方法は至って簡単で、jQueryがサイトで配布しているファイルをHTMLに読み込むだけで使うことができます。

・CSSに似ているところがあるため、覚えやすい

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セレクタ $("#~")

IDを選択するセレクタです。指定したいclass名の前に#をつけます。

スクリプト

$(function(){ $("#main").css("color","#00ff00"); });

  HTMLタグ

<div id="main">あいうえお</div>

これを実行すると、#mainというIDのCSSのカラーコードのプロパティが選択され、

後に記述するメソッドの命令を与えることができます。

●classセレクタ $(".~")

classを選択するセレクタです。指定したいclass名の前に.をつけます。

スクリプト

$(function(){ $(".contents").css("font-size","8px"); });

  HTMLタグ

<div class="contents">あいうえお</div>

これを実行すると、.contentsというclassのCSSのサイズのプロパティが選択され、変更されます。

セレクタについて2

●要素セレクタ $("要素名")

要素(タグ)を指定するセレクタです。

スクリプト

$(function(){ $("h1").css("background-color","#00ffff"); });

  HTMLタグ

<h1>あいうえお</h1>

これを実行すると、.h1というタグのCSSの背景色のプロパティが変更されます。

●ユニバーサルセレクタ $("*")

全ての要素を指定するセレクタです。

スクリプト

$("*")

●グループセレクタ $("セレクタ,セレクタ")

,で区切りを入れることによって複数のセレクタを指定できます。

ID、クラス、要素のどれも入れることができます。

スクリプト

$("#id , .class , p")

メソッドについて1

セレクタで指定したものにどう影響を与えるかを命令する役割を持ちます。

●CSSの変更、取得 .css("","");

cssの変更などする際に使うメソッド

スクリプト

$(function(){ $(".contents").css("color","green"); });

  HTMLタグ

<p class="contents">あいうえお</p>

これを実行すると、セレクタで指定したcontentsというクラスの文字色が緑色に変更されます。

メソッドについて2

●テキストの変更 .text("");

テキストの変更などする際に使うメソッド

スクリプト

.text("変更したい文字");

●テキストの取得●

.text();のように()内を空白にすることによって、textの取得が行えます。

●HTMLの変更、取得、追加 .html(""): .prepend(""); .after(""); .before("");

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"); }); });

  HTMLタグ

<p id="button">ここをクリックすると</p> <span class="moji">文字の色が変わるよ</span>

 実行結果

ここをクリックすると

文字の色が変わるよ
					

クリックやマウスオーバーなどのイベントは、.onというメソッドを使い、

$("操作するセレクタ").on("クリックなどのイベントの種類" , function(){});という形で指定します。

{}中にクリックされた後の命令文(セレクタ、メソッド)を記述します。

命令文の参考は前のセクションやスライドページ等を参考にしてください。

イベント2

イベント(.onメソッド)の種類の一部

マウスの操作

●クリック

対象物をクリックした際にイベントを実行する

スクリプト

$(セレクタ).on( "click" , function(){ } );

●ダブルクリック

対象物をダブルクリックした際にイベントを実行する

スクリプト

$(セレクタ).on( "dblclick" , function(){ } );

●マウスオーバー

対象物にマウスを乗せた際にイベントを実行する

スクリプト

$(セレクタ).on( "mouseover" , function(){ } );

●マウスアウト

対象物にマウスを乗せ、離した際にイベントを実行する

スクリプト

$(セレクタ).on( "mouseout" , function(){ } );

CSS3やJavaScriptも
学んでみよう!