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(); //削除する</pre>

ID セレクタ

<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>

CLASSセレクタ

<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>

タイプセレクタ（element）

<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>

子孫セレクタ（ancestor descendant）

<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>

変数を何度も使う

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

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