70回目授業内容　課題サイト製作続き〜jQueryとは - 四十路男TokiyoのWeb人生再スタートDiary

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

jQueryとは

JavaScriptのライブラリのひとつ
ブラウザ依存を気にしなくてよい
DOMの操作が簡単
記述の仕方は、CSSに似ている
write less, do more.
オープンソース（MITライセンス+GPLライセンス）
http://iquery.com/

jQueryの概念

- 「何かを取ってくる」→「それに何かする」

  $('h1').show(); //表示させる
  $('h1').fadeIn();//フェードインさせる
  $('h1').slideDown(); //スライドアニメーションつきで表示させる
  $('h1').css('border', '1px solid red'); //1pxの赤線をつける
  $('h1').remove(); //削除する

ID セレクタ

<body>
<ul>
<li>fox</li>
<li id="cat">cat</li>
<li>fish</li>
<li id="dog">dog</li>
<li>bird</li>
</ul>

<script>
$(function() {
	$('#cat').css('background','pink');
	$('#dog').css('background','yellowgreen');
});
</script>
</body>

CLASSセレクタ

<body>
<ul>
<li class="man">Paul</li>
<li class="man">Billy</li>
<li class="woman">Alice</li>
<li class="man">Taro</li>
<li class="woman">Hanako</li>
</ul>

<script>
$(function() {
	$('.man').css('background','lightblue');
	$('.woman').css('background','pink');
});
</script>
</body>

タイプセレクタ（element）

<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>

<ul>
<li>The quick brown fox jumps over the lazy dog.</li>
<li>The quick brown fox jumps over the lazy dog.</li>
</ul>

<script>
$(function() {
	$('p').css('background','pink');
	$('li').css('background','yellowgreen');	
});
</script>
</body>

子孫セレクタ（ancestor descendant）

<body>
<div>
<p>I have a <strong>pen</strong>.</p>
</div>

<ul>
<li>His <strong>pen</strong> is red.</li>
<li>I need his <strong>pen</strong>.</li>
</ul>

<p>She dosn't need a <strong>pen</strong>.</p>
<script>
$(function() {
	$('div strong').css('background','lightblue');
	$('ul strong').css('background','pink');	
});
</script>
</body>

変数を何度も使う

<script>
var lastName = 'Yamada';
var me = lastName + 'Taro';
var father = lastName + 'Ichiro';
var mother = lastName + 'Hanako';

alert(me);
alert(father);
alert(mother);
</script>

jQueryで変数を使う



**脱線話（復活）
-