jQuery０２ - 実践するWEBサイト制作

jQueryの概念

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

$とjQueryオブジェクト

$」こそが、「jQuery」そのもの
「$()」でHTML要素を、jQueryオブジェクト化することから始まる
要素を示すセレクタを取ってきて「jQueryオブジェクト」を作成する

何かする

記述内容

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

jQueryを使うメリット

《クリックしたらをDOMで記述》

クリックイベントについて、DOM(Document Object Model)で定義されている仕様を調べる

対象とする各ブラウザについて、対応状況を調べる

対応していない各ブラウザについて、そのブラウザ固有の仕様を調べる

対応状況を判別して、別の処理を書く

記述内容

var div = document.getElementById('div1');
if(div.addEventListener) {
	div.addEventListener('click', doSomething, false);
}else if(div.attachEvent) {
	div.attachEvent('onclick', doSomething);
}
function doSomething() {
	alert('クリックされました');
}

ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuer読み込み</title>

<style>
#div1 {
	display: block;
	width: 200px;
	height: 200px;
	background-color: #F00;
  cursor: pointer;
 	}
</style>

</head>

<body>

<div id="div1" onclick="doSomething()"></div>

<script type="text/javascript">
var div = document.getElementById('div1');
if(div.addEventListener) {
	div.addEventListener('click', doSomething, false);
}else if(div.attachEvent) {
	div.attachEvent('onclick', doSomething);
}
function doSomething() {
	alert('クリックされました');
}
</script>

</body>
</html>

ブラウザで表示【 Chrome 】

クリックするとアラートが表示する

PAGE TOP