LotosLabo

プログラミング技術とか気になった情報を載せていきます

jQueryについて1

jQueryとは

javascriptのライブラリの一つです。JavaScriptを便利に書くことができます。


開発環境


jQueryのインストールはこちらにあります。
http://jquery.com/download/

また、インストールをしなくてもURLからも指定できます。

このようにインターネットからライブラリを使うことを
CDNと言います。(コンテンツデリバリネットワーク)


今回はjQueryの公式のを使っていきます。
Googleさんのを使おうとしたのですが、読み込めなかったので

以下のサイトから使用していきます。

http://scriptsrc.net/

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

こちらをHTML文に組み込みます。


jQueryを始める


とりあえずサンプルをタイトルと適当に1行文章を表示させます。
※タグをはてな記法で書くと表示させないので、背景を囲みます。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
</head>
<body>
	<p>jQueyサンプル</p>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script>
	$(function() {
	});
	</script>
</body>
</html>



先ほどのスクリプトをbodyタグの中に配置します。


また、scriptタグの中の

$(function() {
});

というのはちょっと特殊な書き方で、

(documnet).ready(function(){
});

を省略したものになっています。


基本的なスクリプト

文字色を変える

$(function() {
$('p').css('color','red');
});

ここではpの要素を赤色にしています。

$('p') => セレクタ
css('color','red') => メソッド

と呼ばれています。


基本的にセレクタ.メソッドの書き方をしていきます。
また、メソッドはつなげることが出来ます。
それをメソッドチェーンと言います。

例:

$('p').css('color','red').hide('slow');



ここでは文字色が赤で、ゆっくり消えるようにアニメーション効果もつけました。
jQueryはこういうアニメーション効果も簡単につけれるので、とても便利です。


セレクタ

セレクタの指定できる要素は・・・

html要素=> p h1 ul li
id要素 => #main
クラス => .class

セレクタの指定方法


●「 > 」 直下の子要素

$("#main > p")


例:

<body>
 <div id="main"> 
  <p>jquery</p> // mainの直下の子要素<p>
 </div>
 <script>
  $(function() {
  $("#main > p").css('color', 'red');
  });
 </script>
</body>



●「 + 」 隣接する子要素

$("p + h1") h1タグ一つのみに指定

例:

<body>
 <div id="main">
 <p>jQueyサンプル</p>
 <h1>jquery</h1> // 隣接する子要素 <h1>
 </div>
 <script>
 $(function() {
 $("p + h1").css('color','red');
 });
 </script>
</body>



●「 , 」 複数の要素

$("p, h1") pタグとh1タグ両方。さらにほかのh1タグも。

例:

<body>
 <div id="main">
 <p>jQueyサンプル</p>
 <h1>jquery</h1> // 隣接する子要素 <h1>
 </div>
 <script>
 $(function() {
 $("p , h1").css('color','red');
 });
 </script>
</body>



●「 」← 空白 それ以下の子要素

$("p h1") h1を複数

例:

<body>
 <div id="main">
 <p>jQueyサンプル</p>
 <h1>jquery</h1>
 <h1>jquery1</h1>
 <h2>jquery2</h2>
 </div>
 <script>
 $(function() {
 $("#main h1").css('color','red');
 });
</script>


フィルタを使う


リスト項目のみに使用できます。
例として次のリストを用意します。

<body>
 <ul id = "main">
           <li>1-0</li>
           <li>1-1</li>
           <li class="item">1-2</li>
           <li class="item">1-3</li>
           <li>1-4</li>
 </ul>
</body>


eq() liタグの順番を指定する

例:

<script>
 $(function() {
 $("#main > li:eq(2)").css('color', 'red');
 });
</script>



liタグの上から3番目が赤色になる(配列なので2と指定すると3番目)


gt() liタグの指定した順番より大きい

例:

<script>
 $(function() {
 $("#main > li:gt(0)").css('color', 'red');
 });
</script>

liタグの上から2~5番目が赤色になる


lt() liタグの指定した順番より小さい

例:

<script>
 $(function() {
 $("#main > li:lt(4)").css('color', 'red');
 });
</script>

liタグの上から1~4番目が赤色になる


even liタグの偶数順番

例:

<script>
 $(function() {
 $("#main > li:even").css('color', 'red');
 });
</script>

liタグの偶数番号が赤色になる

odd liタグの奇数順番

例:

<script>
 $(function() {
 $("#main > li:odd").css('color', 'red');
 });
</script>

liタグの奇数番号が赤色になる


contains() liタグではなく文字の中身を指定できる

例:

<script>
 $(function() {
 $("#main > li:contains('2')").css('color', 'red');
 });
</script>

2が含まれたリストが赤色になる

first liタグの最初

例:

<script>
 $(function() {
 $("#main > li:first").css('color', 'red');
 });
</script>

liタグの最初が赤色になる

last liタグの最後

例:

<script>
 $(function() {
 $("#main > li:last").css('color', 'red');
 });
</script>

liタグの最後が赤色になる