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');　

また、width()メソッド及びheight()メソッドの括弧()内に数値を指定しないことで、指定した要素の幅/高さを取得することができる。

以下、サンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>幅/高さ自動取得</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.one, .two {
  width: 200px;
  margin-left: 20px;
  padding: 10px;
  background: #ccc;
  float: left;
}
</style>
</head>
<body>
<p class="one">
この一番目のpタグの高さは、CSSでは指定せず、テキスト量に依存して決まるようにします。
テストテストテストテストテストテストテストテストテストテストテストテストテストテスト
</p>
<p class="two">
この二番目のpタグの高さは、一番目のpタグの高さと一緒にします。
</p>
<script>
$(function(){
  $( '.two' ).height( $( '.one' ).height() ); /* 「.one」の高さを取得 → 「.two」の高さに「.one」の高さを指定 */
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
上記例のように、複数の要素の幅や高さを合わせたいときなどに使える。

show()/hide()メソッド

以下、ブロックレベル要素（div）に対するサンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>show()/hide()メソッドのブロックレベル要素に対する確認</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
div {
  width: 200px;
　height: 300px;
  margin-left: 20px;
  padding: 10px;
}
.one {
　float: left;
　background: #0f0; /* 緑 */
}
.two {
　float: left;
　display: none;
　background: #0ff; /* 水色 */
}
.three {
　clear: both;
　float: left;
　display: none;
　background:#F9F; /* ピンク */
}
.four {
　float: left;
　display: none;
　background:#FC3; /* オレンジ */
}
.five {
　float: left;
　background:#C99; /* 紫 */
}
</style>
</head>
<body>
<div class="one">
一番目のdiv
</div>
<div class="two">
二番目のdiv
</div>
<div class="three">
三番目のdiv
</div>
<div class="four">
四番目のdiv
</div>
<div class="five">
五番目のdiv
</div>
<script>
$(function(){
　$('.one').hide();
　$('.two').show();
　$('.three').css('display','block');
　$('.four').css('display', 'inline');
　$('.five').css('display','none');
});
</script>
</body>
</html>

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

続いてインライン要素（span）に対するサンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>show()/hide()メソッドのインライン要素に対する確認</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
span {
  margin-left: 20px;
  padding: 10px;
}
.one {
　float: left;
　background: #0f0; /* 緑 */
}
.two {
　float: left;
　display: none;
　background: #0ff; /* 水色 */
}
.three {
　clear: both;
　float: left;
　display: none;
　background:#F9F; /* ピンク */
}
.four {
　float: left;
　display: none;
　background:#FC3; /* オレンジ */
}
.five {
　float: left;
　background:#C99; /* 紫 */
}
</style>
</head>
<body>
<span class="one">
一番目のspan
</span>
<span class="two">
二番目のspan
</span>
<span class="three">
三番目のspan
</span>
<span class="four">
四番目のspan
</span>
<span class="five">
五番目のspan
</span>
<script>
$(function(){
　$('.one').hide();
　$('.two').show();
　$('.three').css('display','block');
　$('.four').css('display', 'inline');
　$('.five').css('display','none');
});
</script>
</body>
</html>

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

以上のことから、show()/hide()メソッドは、CSSでのdisplay:noneとinline or blockとの切替に相当する（ほぼ等しい）機能であることが分かる。
※hide()メソッドは、display:noneに相当するため、その要素の領域が確保されずに詰められることに注意。

また、show()/hide()メソッドとCSSでdisplayを操作することの違いとしては、show()/hide()メソッドは要素がもつ本来の値（displayプロパティに関して、divならnoneとblock、spanならnoneとinline）を切り替えるという機能をもつとのことなので、念のため以下で確認してみる。

上記インライン要素（span）に対するサンプルコードに下記の変更を加える。

span {
  margin-left: 20px;
  padding: 10px;
　width: 200px;
　height: 300px;
}

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

この結果を見る限りでは、インライン要素であるspanタグへ指定した幅と高さが効いているので、show()/hide()メソッドを用いるかあるいはcssでdisplayプロパティを操作するかに違いはないように見える。だが、cssでdisplayをinlineに指定したものにまで幅と高さの指定が効いているのはおかしい。

そこで、各クラスに指定していたfloatの指定をなくしてみた。

以下、検証コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>show()/hide()メソッドの検証</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
span {
  margin-left: 20px;
  padding: 10px;
　width: 200px;
　height: 300px;
}
.one {
　background: #0f0; /* 緑 */
}
.two {
　display: none;
　background: #0ff; /* 水色 */
}
.three {
　display: none;
　background:#F9F; /* ピンク */
}
.four {
　display: none;
　background:#FC3; /* オレンジ */
}
.five {
　background:#C99; /* 紫 */
}
</style>
</head>
<body>
<span class="one">
一番目のspan
</span>
<span class="two">
二番目のspan
</span>
<span class="three">
三番目のspan
</span>
<span class="four">
四番目のspan
</span>
<span class="five">
五番目のspan
</span>
<script>
$(function(){
　$('.one').hide();
　$('.two').show();
　$('.three').css('display','block');
　$('.four').css('display', 'inline');
　$('.five').css('display','none');
});
</script>
</body>
</html>

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

この結果から、floatを指定すると勝手にブロックレベル要素扱いになってしまうこと、show()/hide()メソッドは要素がもつ本来の値（displayプロパティに関して、divならnoneとblock、spanならnoneとinline）を切り替える機能をもつということが確認できた。

※指定したスタイルの優先順位について
cssで「!important」を付けて指定したスタイルは、jQueryのcssメソッドより優先されるが、それ以外のものに対するjQueryでのスタイル変更は、HTMLの要素（タグ）のstyle属性で指定したスタイルとほぼ同等の優先度を持つことになり、外部から読み込んだスタイルやHTML上部に書いたstyleタグ内で指定したスタイルよりも優先される。