lern jquery in 15 minutes

Tutorial from devtipes channel

by Outrora

HTML

<script src="jqeury.js"></script>
<div class="box">
  <h1 class="white">Hi my name is marcelo</h1>
</div>
<div class="box2">
  <h1>Box 2</h1>
</div>
<div class="box3">
  <h1 class="box3-h1">Box 3</h1>
  <input type="text" class="text">
</div>
<div class="box4">
  <h1>Box 4</h1>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-siing: border-box;
}

.box {
  background: dodgerblue;
  padding: 25px;
}

.box2 {
  background: #EE3636;
  padding: 25px;
}

.box3 {
  background: #363636;
  padding: 25px;
}

.box4 {
  background: blue;
  padding: 10px;
}

h1 {
  transition: all 1s ease 0s;
}

.white {
  color: white;
}

.grey {
  color: grey;
}

JavaScript

$(document).ready(function() {
  $('.box').css('border-bottom', '15px solid lightgreen');
  //$('.box').slideUp(800).delay(0).slideDown(800);
  //$('.box > h1').fadeOut(500).fadeIn(2500);
  //aula 2
  $('.box').attr('class', 'box'); //pega o atributo class e transforma

  $('.box2 > h1').attr('class', 'white');
  $('.box2 > h1').fadeOut(800);
  $('.box2 > h1').fadeIn(800, function() {
    $(this).attr('class', 'grey');
  });

  //box 3
  $('.box3-h1').text('Hellow man a new text');
  $('.box3-h1').html('<i>Hello man</i>');
  $('input[class="text"]').val('I am a value');

  //box 4
  $('.box4').children().css('border-bottom', '15px solid lightgreen');
  //alert($('.box4').children().html());
  //alert($('.box4').parents().html()); //pega os parentes, nao os filhos

  //event inding
  //$('.box4').children().bind('click', function(){
  //$(this).toggleClass('grey');
  //});
  //$('.box4').children().click(function(){
  //$(this).toggleClass('grey');
  //});
  //$('.box4').children().hover(function(){
  //$(this).toggleClass('white');
  //});
  $('html').keypress(function() {
    $('.box4').children().toggleClass('white');
  });








});