WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

jQuery練習

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $('#list').append('<li>jQuery</li>');
  $('#list').after('<p>Web制作に必須のjQueryを勉強します。</p>');
});
</script>
</head>
<body>
<div id="wrapper">
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
</div><!-- /#wrapper -->
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
  $('#list').wrap('<div id="wrapper"></div>');
  $('#list li:last-child').remove();
});
</script>
</head>
<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>jQuery</li>
</ol>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<style>
#div1 {
  width: 100px;
  height: 100px;
  background: orange;
}
</style>
<script>
$(function(){
  $('#div1').click(function(){
    alert('クリックされました');
  });
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<style>

</style>
<script>
$(function(){
  $('#trigger').click(function(){
    $('#photo img').attr({
      'src': 'img/surf.png',
      'alt': 'サーフィン'
  });
  return false;
	});
});
</script>
</head>
<body>
<p id="photo">
<img src="img/natsu.png" alt="夏の風景">
</p>
<p>
<a id="trigger" href="img/surf.png" title="サーフィン">このテキストリンクをクリックするとサーフィンの写真に置き換わる</a>
</p>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<style>

</style>
<script>
$(function(){
  $('#trigger').click(function(){
    $('#photo img').attr({
      'src': 'img/surf.png',
      'alt': 'サーフィン'
    });
  return false;
	});
});
</script>
</head>
<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/natsu.png" alt="夏の風景"></a>
</p>
<p>
画像をクリックするとサーフィンの写真に置き換える。
</p>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<style>

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