Tiggles ツ
12/25/2017 - 12:27 AM

JQuery Basics

some notes from treehouse

style.css
content_copyfile_download
* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body{
  background-color: #fff;
  margin: 30px;
}

h1 {
  padding-bottom: 30px;
}

.container {
  max-width: 80%;
  text-align: center;
  margin: 0 auto;
}

.box {
  height: 150px;
  width: 150px;
  margin: auto;
  border-radius: 10px;
  background: green;
}
sample.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<title>jQuery Basics</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
  <div class="container">
    <h1>Hello jQuery!</h1>
    <div class="box"></div>
  </div>
  
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
code.js
content_copyfile_download
// using plain js to hide the box 
const box = document.querySelector('.box');
box.style.display = 'none';
//using jq to do same thing
jQuery('.box').hide();
$('.box').hide();
$('.box').show();


/////

//using js to add click event handler
const box = document.querySelector('.box');

box.addEventListener('click', function() {
  alert('You clicked me!');
});

//using jquery to make the same function

$('.box').click(function(){
  alert('You clicked me with jQuery');
});