PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【jQuery】 HTML/CSS操作の演習

HTML/CSS操作の演習を行いました。今回はそのソースです。

特定のID/クラスのスタイルを変更する

使うメソッド「css();」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習1</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="third">jQuery</li>
<li>PHP</li>
</ul>
<script>
$(function(){
$('#third').css({
'background':'yellowgreen',
'font-size':'2em',
'color':'#fff',
'width':'200px',
'padding':'0.5em 10px'
});
});

</script>

</body>
</html>


親要素内に子要素を追加

使うメソッド「append();」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習2</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<script>
$(function(){
$('ol').append('<li>jQuery</li>');
});

</script>

</body>
</html>

要素前に追加

使うメソッド「before();」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習3</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<script>
$(function(){
$('ol').before('<h1>Web制作に必須のjQueryを勉強します。</h1>');
});

</script>

</body>
</html>

親要素を追加する

使うメソッド「wrap();」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習4</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<script>
$(function(){
$('ol').wrap('<div id="wrapper"></div>');
});

</script>

</body>
</html>

要素を消す

使うメソッド「remove();」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習5</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>jQuery</li>
</ol>
<script>
$(function(){
$('#list li:last-child').remove();
});

</script>

</body>
</html>

要素をクリック

使うメソッド「click();」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習6</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
div{
  width: 100px;
  height: 100px;
  background: yellow;
  cursor: pointer;
}
</style>
</head>

<body>
<div></div>
<script>
$(function(){
$('div').click(function(){
alert('クリックされました');
});
});

</script>

</body>
</html>

リンクをクリックしてイベント発生

使うメソッド「click();」「return fales;」

テキストの場合

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習7</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<p id="photo">
<img src="img/natsu.png" alt="夏の風景">
</p>
<p>
<a id="trigger" href="img/surf.png" title="サーフィン">このテキストリンクをクリックするとサーフィンの写真に置き換わる</a>
</p>
<script>
$(function(){
$('a#trigger').click(function(){
$('p#photo img').attr('src',$(this).attr('href')).attr('alt',$(this).attr('title'));
}).click(function(){
return false;
});
});

</script>

</body>
</html>

画像の場合

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習8</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/natsu.png" alt="夏の風景"></a>
</p>
<script>
$(function(){
$('a#trigger').click(function(){
$('img').attr('src',$(this).attr('href')).attr('alt',$(this).attr('title'));
}).click(function(){
return false;
});
});

</script>

</body>
</html>

マウスポインターが要素の上にあるときのイベント

使うメソッド「mouseover();」「mouseout();」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習9</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/natsu.png" alt="夏の風景"></a>
</p>
<script>
$(function(){
$('img').mouseover(function(){
$(this).attr('src',$('a#trigger').attr('href')).attr('alt',$('a#trigger').attr('title'));
}).mouseout(function(){
$(this).attr('src','img/natsu.png').removeAttr('title');
});
});

</script>

</body>
</html>

画像のフェードアウト

使うメソッド「fadeOut();」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習10</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
img{
  cursor: pointer;
}
</style>
</head>

<body>
<p id="photo">
<img src="img/halloween.jpg" alt="ハロウィーン">
</p>
<script>
$(function(){
$('img').click(function(){
$(this).fadeOut('slow');
});
});

</script>

</body>
</html>

アコーディオンメニュー

使うメソッド「ready();」「css();」「click();」「slideUp();」「slideDown();」「if();」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習11</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
div{
  width: 300px;
  margin: 50px auto;
}

dt{
  background: #7CADB6;
  padding: 10px;
  cursor: pointer;
}
dd{
  border: 1px solid #7CADB6;
  margin: 0;
}

</style>
</head>

<body>
<div id="container">
<dl>
<dt>項目 1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
</div>
<script>
$(document).ready(function() {
  $('dd:not(:first)').css('display','none');
  $('dl dt').click(function(){
		if($('+dd',this).css('display')=='none'){
		$('dd').slideUp('fast');
		$('+dd',this).slideDown('fast')
};
});
});

</script>

</body>
</html>