2013-08-14

Webサイト制作におけるjQueryの基本的なメソッド1

ｊQuery

今回から、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドについて、何回かに渡ってまとめていく。

スタイルを変更する基本的なメソッド

css()メソッド：要素のcssを操作する
width()メソッド：要素の幅を操作する。カッコ内はデフォルト（単位記述なし）がピクセル単位で、別の単位で指定したいときのみ単位と一緒にシングルクォートで囲んで記述する
height()メソッド：要素の高さを操作する。カッコ内はデフォルト（単位記述なし）がピクセル単位で、別の単位で指定したいときのみ単位と一緒にシングルクォートで囲んで記述する
show()メソッド：要素を表示する
hide()メソッド：要素を非表示にする

width()/height()メソッドの記述例

ピクセル単位で指定する場合は以下のようになる。

　$('#sample').width(200);
　$('#sample').height(100);

ピクセル以外の単位で指定する場合は以下のようになる。

　$('#sample').width('20em');
　$('#sample').height('auto');

cssメソッドを用いた場合は以下のようになる。

　$('#sample').css('width',200);
　$('#sample').css('height',100);
　$('#sample').css('width','20em');
　$('#sample').css('height','auto');

2013-08-12

Webサイト制作におけるjQueryのメソッドの基本的な書き方

ｊQuery

Webサイト制作のコーディングにおいて用いるjQueryのメソッドの基本的な書き方をまとめておく。

まずは記述の共通ルールを確認する。

共通ルール

メソッドはドット「.」で繋ぐ（ドットシンタックス）
メソッド名には必ず括弧()をつける
必要に応じて括弧()内にパラメータを指定する

以下、記述例。

$('セレクタ名').メソッド名(パラメータ);

ここで、基本的なメソッドの1つであるcssメソッドについて説明しておく。
cssメソッドは、名前の通り、cssを操作するためのメソッドで、下記のように記述する。

$('セレクタ名').css('プロパティ名','値');

これをより具体的に書くと、以下のようになる。

$('#sample').css('color','blue');

また、複数のメソッドをドットで繋いでまとめて指定する方法をメソッドチェーンと呼び、
下記のように記述する。

$('セレクタ名').メソッド1(パラメータ).メソッド2(パラメータ).…

以下、具体例。

$('#sample').css('color','blue').width(100).height(50);

更に、同一のメソッドに対して、複数のプロパティをまとめて指定することができる。
書き方のポイントは以下の通り。

プロパティ名と値とはそれぞれシングルクォートで囲み、間はコロン「:」で繋ぐ
プロパティ間はカンマ「,」で区切る
複数のプロパティの指定をまとめて波括弧「{}」で囲む

$('セレクタ名').メソッド名({'プロパティ1':'値','プロパティ2':'値',…});

以下、具体例。

$('#sample').css({
　'color':'green',
　'background':'pink'
});

複数のプロパティを指定しつつ、メソッドチェーンで書くと、
以下のようになる。

$('#sample').css({
　'color':'green',
　'background':'pink'
}).width(100);

記述時の注意点

パラメータの「値」が文字（列）の場合は、'white'のように必ずシングル（orダブル）クォートで囲む
パラメータの「値」が数字（数値）の場合は、width(100)のように()内にそのまま書いてよい

2013-08-07

Webサイト制作におけるjQueryのセレクタの種類１

ｊQuery

Webサイト制作のコーディングにおいて用いるjQueryのセレクタの種類をまとめておく。

セレクタはほぼCSSと同じなので、CSSが分かっている人は一度確認しておく程度でよいと思われる。

基本的なセレクタの種類

タイプセレクタ：HTMLの要素名（タグ名）　例 div
IDセレクタ：CSSのIDセレクタと同じ　例 #sample
クラスセレクタ：CSSのclassセレクタと同じ　例 .sample
子孫セレクタ：CSSの子孫セレクタと同じ　例 div p a　
全称セレクタ：CSSの全称セレクタと同じ　例 div *

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習 | 基本セレクタ</title>
<style>
body, p, li, em {
  margin: 0;
  padding: 0;		
}
ol li ul li{
　color: #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p>タイプセレクタ</p>
<ul>
<li id="sampleId" >idセレクタ</li>
<li class="sampleClass">classセレクタ</li>
<li><em>子孫セレクタ</em></li>
</ul>
<ol>
<li>全称１</li>
<li>全称２</li>
<li>全称３</li>
<li>
  <ul>
    <li>全称４-１</li>
    <li>全称４-２</li>
    <li>全称４-３</li>
  </ul>
</li>
</ol>
<script>
$(function(){
　$( 'p' ).css( 'background', 'lightgreen' );
  $( 'li#sampleId' ).css( 'background', 'lightblue' );
　$( 'li.sampleClass' ).css( 'background', 'yellow' );
　$( 'li em' ).css( 'background', 'pink' );
　$( 'ol *' ).css( 'background', 'purple' );
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

2013-08-07

Webサイト制作におけるjQueryのセレクタの種類2

ｊQuery

前回に続き、Webサイト制作のコーディングにおいて用いるjQueryのセレクタの種類をまとめていく。

今回は少し高度？なセレクタについて確認する。

セレクタの種類

子セレクタ：指定した親に対する子のみ（孫以下は対象外）を指定するセレクタ　例 div > span （親 > 子）
隣接セレクタ：HTML内の２つの要素が、間に他の（同階層の）要素を含まない状態で、隣り合っている場合に、“２つ目に指定した要素”を指定するセレクタ　例 h2 + h3
間接セレクタ：HTML内において、“１つ目に指定した要素”より後に書かれている“２つ目に指定した要素”を指定するセレクタ　例 h4 ~ h5
順番セレクタ：指定した要素の同階層（兄弟関係）にあるものの中で、指定した順番にある要素を指定するセレクタ　例 :nth-child(2)、:first-child　※注意が必要（下記確認結果参照）
否定セレクタ：指定した条件に該当しないものを指定するセレクタ　例 :not(div)　※注意が必要（下記確認結果参照）

各セレクタの種類ごとに挙動を確認していく。

Webサイト制作におけるjQueryの基礎

ｊQuery

Webサイト制作において、動的要素の導入方法の一つとして、jQueryを用いる方法がある。
jQueryはJavascriptのライブラリの一つで、現在ではデザイン面においても機能面においても幅広く利用されている。

本日よりjQueryについて基礎から学んでいく。

jQueryの主な特徴

ブラウザごとに異なる仕様の差異を吸収してくれる
記述の仕方がCSSに似ているため、CSSを分かっている人には使いやすい
オープンソースで、商用利用可能なものが少なくない
プラグインなどを使うと、比較的簡単に導入できる

※ライブラリとは：http://e-words.jp/w/E383A9E382A4E38396E383A9E383AA.html
※オープンソースとは：http://e-words.jp/w/E382AAE383BCE38397E383B3E382BDE383BCE382B9.html
※プラグインとは：http://e-words.jp/w/E38397E383A9E382B0E382A4E383B3.html

jQueryを使用するための準備

jQueryのバージョンを確認する。Ver.2.0からはIE8以下をサポートしていないため、現状（授業及びこのブログ）ではIE8以下もサポートしているVer.1.9.1を用いる
HTMLのhead内で読み込む。jsファイルを作成またはダウンロードして用いてもよいが、CDN(Content Delivery Network：ネットワーク経由でコンテンツを提供するサービス）を利用してもよい→特にネットの接続が切れやすい環境でなければCDNの利用で問題ない

※CDNには主にjQuery CDNとGoogle Ajax API CDNとがあるが、内容は変わらないのでどちらを使用しても問題ない
※ファイル名に「min」が入っているものは「Minified」の意味で、jsのコードから改行が除かれた圧縮版のことを意味する

head内の記述（読み込み）の仕方は以下の通り。
１．自作またはダウンロードしたjsファイルを相対パスで読み込む場合

<head>
<script src="js/jquery-1.9.1.min.js"></script>  
</head>

２．jQuery CDNを利用する場合

<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
</head>

３．Google Ajax API CDNを利用する場合

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
</head>

jQueryの考え方

対象（jQueryオブジェクト）と動作（メソッド）を指定する必要がある。すなわち、「何」に「どんなこと」をさせたいかを指定する。

jQueryの記述方法1

具体的な記述方法は以下の通り。

$('○○').△△();

「'○○'」：指定したい要素を示す（特定する）セレクタ名。
「$()」：()内に書いたセレクタをjQueryオブジェクト化する役割をもった（お決まりの記号のような）もの。
⇒「$('○○')」：この部分がjQueryオブジェクトを表す。

「△△()」：要素に指定するメソッド（動きや操作）。
「.」：jQueryオブジェクトとメソッドとを繋ぐ役割をもつドット（このような書き方をドットシンタックスという）。

具体例は以下の通り。

$('#sample').show();  //id名が「sample」の要素を表示させる

上記の記述方法を用語を交えて言い表すと、動きや操作などを指定したいHTML内の要素をセレクタ（CSSの指定の仕方とほぼ同じ）で指定し、それをjQueryオブジェクト化したものにメソッド（動きや操作）を指定して実行する。

※メソッドを指定するには指定したい要素（セレクタ）をjQueryオブジェクト化しなければならない。要素（セレクタ）はjQueryオブジェクト化されてはじめてメソッドを指定する対象となる点に注意

jQueryの記述方法2

記述方法1で示した部分を「$(function(){})」で囲む。
具体例は以下の通り。

$(function(){
　$('#sample').show();
});

「$(function(){})」：「$(document).ready(function(){})」の省略形で、ページの読み込みが完了した後に、この中に書かれたコードを実行するという役割を持つ。

Javascriptは読み込まれた順に（コードに書かれた順に上から）処理されていくため、「$(function(){})」で囲むことで、処理実行時の読み込み状況によって生じる結果の不具合（意図した処理をするのに十分な範囲の読み込みが終わっていないタイミングで処理が実行されると、まだ読み込んでいない部分が存在しないものとして認識され（処理が通過し）、本来意図したはずの処理が実行されていないにも関わらず処理済みのようになってしまう問題）を回避できる。

※処理の実行部分に関して、「$(function(){})」で囲めばhead内に記述しても問題ないが、より確実なタイミングで実行させるために、bodyの終了タグの前に書くのが無難。ただし、jsファイルの読み込みの記述に関してはhead内で問題ない。

スタイルを変更する基本的なメソッド

width()/height()メソッドの記述例

共通ルール

記述時の注意点

基本的なセレクタの種類

セレクタの種類

子セレクタ

jQueryの主な特徴

jQueryを使用するための準備

jQueryの考え方

jQueryの記述方法1

jQueryの記述方法2