WEBデザインの勉強

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

jQuery基礎4

click()イベント

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>click()イベント</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
  $('button').on('click', function(){
    $('img').attr('src','img/02.png').attr('alt','木2');
  });
});
</script>
<style>
button {
  cursor: pointer;
}
</style>
</head>
<body>
<p><button>画像を変更</button></p>
<p><img src="img/01.png" alt="木"></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>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('a:eq(0)').click(function(){
    $('img').attr('src','img/flower.png').attr('alt','花');
    return false;
});
  $('a:eq(1)').click(function(){
    $('img').attr('src','img/sea.png').attr('alt','海');
    return false;
});
  $('a:eq(2)').click(function(){
    $('img').attr('src','img/jellyfish.png').attr('alt','くらげ');
    return false;
});
  $('a:eq(3)').click(function(){
    $('img').attr('src','img/Building.png').attr('alt','建物');
    return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="img/flower.png"></a></li>
<li><a href="img/sea.png"></a></li>
<li><a href="img/jellyfish.png">くらげ</a></li>
<li><a href="img/Building.png">建物</a></li>
</ul>
<p><img src="img/flower.png" alt="花"></p>
</body>
</html>

CSSを変更する

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イベントが発生した要素を取得する</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
//$(function(){
//  $('#third').css("color","white");
//  $('#third').css("background","yellowgreen");
//});
$(function(){
  $('#third').css({
  'color': 'white',
  'background': 'yellowgreen',
  'padding': '10px',
  'font-size': '30px'
})
 .width( 250 );
});
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="third">jQuery</li>
<li>PHP</li>
</ul>
</body>
</html>