読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

まとめ

「要素」を選ぶ

idセレクタ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>idセレクタ</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('#test').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<p id="test"><a href="#">idセレクタ:ココをクリックすると文字が変更されます</a></p>
</body>
</html>
classセレクタ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>classセレクタ</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('.test').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<p class="test"><a href="#">classセレクタ:ココをクリックすると文字が変更されます</a></p>
</body>
</html>
要素セレクタ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>要素セレクタ</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<p class="test"><a href="#">classセレクタ:ココをクリックすると文字が変更されます</a></p>
<div><a href="#">(これは、divタグ)ココをクリックしても何も起こりません</a></div>
<ul>
<li><a href="#">(これは、liタグ)ココをクリックしても何も起こりません</a></li>
</ul>
</body>
</html>
子孫セレクタ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子孫セレクタ</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('div p').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<div><p><a href="#">(divの中のpタグ)ココをクリックすると文字が変わります</a></p></div>
<p class="test"><a href="#">(これは、pタグ)ココをクリックしても何も起こりません</a></p>
</body>
</html>

「実行タイミング」を選ぶ

クリックイベント
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>クリックイベント</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<p><a href="#">ココをクリックすると文字が変更されます</a></p>
</body>
</html>
マウスオーバーイベント
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスオーバーイベント</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('mouseover', function() {
    $(this).text("マウスオーバーしました");
  });
});
</script>
</head>
<body>
<p><a href="#">ココにマウスを乗せると文字が変更されます</a></p>
</body>
</html>
マウスアウトイベント
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスアウトイベント</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('mouseout', function() {
    $(this).text("マウスアウトしました");
  });
});
</script>
</head>
<body>
<p><a href="#">ココからマウスを外すと文字が変更されます</a></p>
</body>
</html>

実行する処理を書く

テキストボックスの色を変更する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テキストボックスの色を変更する</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('input').on('focus', function(){
    $('input').css('background-color', '#ff0')
  }).on('blur', function(){
    $('input').css('background-color', '#fff')
  });
});
</script>
<style>
input {
  width: 50%;
  height: 30px;
}
</style>
</head>
<body>
<p><input type="text" value="フォーカスすると黄色になって、外すと元に戻ります"></p>
</body>
</html>
マウスオーバーでdivの背景色を変更する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスオーバーでdivの背景色を変更する</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('#bg01').on('mouseover', function () {
    $(this).css("background-color","#666");
  });
  
  $('#bg02').on('mouseover', function () {
    $(this).css("background-color","#999");
  });
  
  $('#bg03').on('mouseover', function () {
    $(this).css("background-color","#ccc");
  });
  
  $('#bg04').on('mouseover', function () {
    $(this).css("background-color","#eee");
  });
});
</script>
<style>
div {
  display: inline-block;
  padding: 18px;
  margin: 10px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="bg01">01</div>
<div id="bg02">02</div>
<div id="bg03">03</div>
<div id="bg04">04</div>
</body>
</html>
マウスオーバーでdivをフェードアウトする
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスオーバーでdivをフェードアウトする</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('#bg01').on('mouseover', function () {
    $(this).fadeOut('slow');
  });
});
</script>
<style>
div {
  display: inline-block;
  padding: 18px;
  margin: 10px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="bg01">マウスオーバーするとフェードアウトします</div>
</body>
</html>
クリックで新しいdivを作り出す
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスオーバーでdivをフェードアウトする</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('click', function () {
    $('p').after('<div>test</div>');
  });
});
</script>
<style>
div {
  display: inline-block;
  padding: 18px;
  margin: 10px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<p><a href="#">ココをクリックすると新しいdivが作られます</a></p>
</body>
</html>
クリックでdivの幅と高さを変更する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>クリックでdivの幅と高さを変更する</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('div').on('click', function () {
    $(this).css('width','40px').css('height','40px');
  });
});
</script>
<style>
div {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 18px;
  margin: 10px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="bg01">01</div>
<div id="bg02">02</div>
<div id="bg03">03</div>
<div id="bg04">04</div>
</body>
</html>
クリックでclassの付け替えをする
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>クリックでclassの付け替えをする</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('click', function () {
    if($(this).hasClass('on')){
      $(this).removeClass('on');
      $('a',this).text('ココをクリックすると「on」というclassがつきます')
    } else {
      $(this).addClass('on'); 
      $('a',this).text('「on」というclassがつきました。もう一度クリックすると元に戻ります')
    }
  });
});
</script>
<style>
.on {
  background: #ccc;
}
</style>
</head>
<body>
<p><a href="#">ココをクリックすると「on」というclassがつきます</a></p>
</body>
</html>

広告を非表示にする