column

jQueryとはを簡単に説明

CATEGORY jQuery PC & Web お勉強 TAG, , ,

投稿日:2013年5月2日 更新日:

執筆者:

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>

コメントを残す

関連記事

PREV

WordPressを1から組んでみた

NEXT

jQueryメソッド 色々やってみた

jQueryとはを簡単に説明

side bar

メニューはこちら

メニューはこちら