ababup1192
1/8/2015 - 12:54 PM

jQuery basic sample

jQuery basic sample

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <!-- jqueryをネットワーク経由でinclude -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <!-- 自分のjsはファイルから(相対パス) -->
  <script type="text/javascript" src="basic.js"></script>
  <link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
  <button id="button">test</button>

  <div id="box-a">
    <div id="box-a-1" data-x="10"></div> 
    <div id="box-a-2" data-x="20"></div>
  </div>

</body>
</html>
basic.js
content_copyfile_download
$(document).ready(function(){
  console.log('HTMLがロードされました。');
  console.log('-----------------------');

  $("#button").on('click', function() {
    console.log('ボタンがクリックされました。');
    console.log('ボタンのテキストは、' + $(this).html() + 'です。');
  });

  $("#box-a").on('click', function() {
    console.log('div id="box-a"がクリックされました。');
  });

  $("#box-a-1").on('click', function() {
    console.log('boxがクリックされました。');
    console.log('値は、' + $("#box-a-1").data("x") + 'です')
    console.log('div要素のidは、' + $("#box-a-1").attr("id") + 'です')
    $("#button").html("box-a-1");
  });

  $("#box-a-2").on('click', function() {
    console.log('boxがクリックされました。');
    console.log('値は、' + $(this).data("x") + 'です')
    console.log('div要素のidは、' + this.id + 'です')
    $("#button").html("box-a-2");
  });

});
basic.css
content_copyfile_download
#box-a{
  width:  300px;
  height: 300px;
  margin: 0px auto;
  border: 3px solid;
}

#box-a-1{
  width:  50px;
  height: 50px;
  margin: 30px auto;
  background-color:#09c;
}

#box-a-2{
  width:  50px;
  height: 50px;
  margin: 30px auto;
  background-color:#09c;
}