JQueryImportant.js

// ADD in HTML, before any other javascript, probably in the footer
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">
</script>


// GET DOM OBJECT -- GET DOM OBJECT -- GET DOM OBJECT -- GET DOM OBJECT
//simula o click num elemento DOM com id login que faz um toggle num elemento DOM com a class loginMenu
$('#login').click(() => {     // id="login"
  $('.loginMenu').toggle()    // class="loginMenu"
});
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--

// CALLBACK FUNCTIONS -- CALLBACK FUNCTIONS -- CALLBACK FUNCTIONS -- CALLBACK FUNCTIONS -- CALLBACK FUNCTIONS -- 
// function call when the webpage (document) is finish rendering
$(document).ready(() => {

});

// function to change visibility of a elment
$(document).ready(() => {
  $('.product-photo').show()  // class="product-photo"
  $('#product-text').hide();  // id="product-text"
  $('div').toggle()           // element all div's     if visible make hide if invisible make show
  
  //variation saved in constante object
  const $navDropdown = $('#nav-dropdown');
  $navDropdown.hide();
  
  //event handlers
  //on
  $('#login').on('click', () => {
    ...
  })
  
  const $menuButton = $('.menu-button');
  $menuButton.on('click', () => {...})
  
  //event handlers
  //mouseleave
   $navDropdown.on('mouseleave', () => {  // quando o rato deixa o elemento o outro se esconde, como vemos nos menus
    $navDropdown.hide();
  })
  
});
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--
    
    
//ANIMATION -- ANIMATION -- ANIMATION -- ANIMATION -- ANIMATION -- ANIMATION -- ANIMATION -- ANIMATION -- 
$(document).ready(() => {  
    
  $('.fade-out-button').on('click', () => {
    $('.fade-image').fadeOut(500);
  });
  
  $('.fade-in-button').on('click', () => {
     $('.fade-image').fadeIn(4000);
  });
  
    $('.up-button').on('click', () => {
		$('.slide-image').slideUp(100);
  });
  
  $('.down-button').on('click', () => {
    $('.slide-image').slideDown('slow');
  });
  
  $('.slide-toggle-button').on('click', () => {
    $('.slide-image').slideToggle();    
  });

});
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--
    
// EVENT HANDLERS  --  EVENT HANDLERS  --  EVENT HANDLERS  --  EVENT HANDLERS
  $('.menu-button').on('click', () => {
    $('.nav-menu').toggle()
  })
    
  $('.menu-button').on('mouseenter', () => {
    $('.nav-menu').show()
  })
  
  $('.nav-menu').on('mouseleave', () => {
    $('.nav-menu').hide();
  })
    
  // adiciona uma classe a um elemento quando esta passa o rato, e remove a quando esta o deixa
  // nota adiciona a todos os elementos que tenham a classe product-photo
  $('.product-photo').on('mouseenter', () => {
		$('.product-photo').addClass('photo-active')
  }).on('mouseleave', () => {
    $('.product-photo').removeClass('photo-active')
  })
    
  //para que seja apenas o elemento onde ocorre o evento, utiliza-se event como callback
  $('.product-photo').on('mouseenter', (event) => {
    $(event.currentTarget).addClass('photo-active')
  }).on('mouseleave', event => {
    $(event.currentTarget).removeClass('photo-active')
  })
    
    //existe tb o methodo para mudança de class, se tiver class remove, se n tiver adiciona
    $('.example-class').toggleClass('active');
    
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--
    
    
// CSS MODYFIED -- CSS MODYFIED -- CSS MODYFIED -- CSS MODYFIED -- CSS MODYFIED -- 
 $('.example-class').css('color', '#FFFFFF');
    
   // OR
    
$('.example-class').css({
  color: '#FFFFFF',
  backgroundColor: '#000000',
  fontSize: '20px'
})
    
    //Change values with animation
    $('.example-class').animate({
        height: '100px',
        width: '100px',
        borderWidth: '10px'
     }, 500);                   // 500 milisecons
    
 //--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--
	  
	  
// ACESS PARENT and CHILD DOM ELEMENTS -- ACESS PARENT and CHILD DOM ELEMENTS -- ACESS PARENT and CHILD DOM ELEMENTS
	  //html
<div class='parent' id='holder'>
  <div>Child <span>1</span></div>
  <div>Child <span>2</span></div>
  <div>Child <span>3</span></div>
</div>
	  //js jquery
const $kids = $('#holder').children();
$kids.on('click', event => {
  $(event.currentTarget).css('border', '1px solid black');
});
	  
	  //OR SIMPLE
	  
$('.shoe-details').children().removeClass('disabled')
	  
	  //for fathers (parent)
	  $(event.currentTarget).parent().hide();
	  
	  //for brothers(siblings)
	  $('.choice').on('click', event => {
  		$(this).siblings().removeClass('selected');	//'this' refere to im self ($('.choice'))
	  });
	  
	  //for acessing the dom element more close to one, with one especifique class
	  $('.example-class-one').closest('.another-class');
	  
	  
	  //advanced example
	    $('.shoe-details li').on('click', event => {
		 $(event.currentTarget).addClass('active');
		 $(event.currentTarget).siblings().removeClass('active');
		 $(event.currentTarget).$(this).closest('.shoe-details').children().removeClass('disabled');
            });
	  
	  //target only the next sibling 
	  //html
	  <div class='heading'>MENU</div>
	  <ol style='display: none'>
		  <li>Appetizers</li>
		  <li>Entrees</li>
		  <li>Salads</li>
		  <li>Sides</li>
		  <li>Desserts</li>
	  </ol>
	  
	  //js jquery
	  //
	  const $heading = $('.heading');
	  $heading.on('click', () => {
	    $(event.currentTarget).next().toggle();
	  });
	  
	  //for previous
	  $(event.currentTarget).prev().toggle();
	  
	  //for find descendants of an element, especifique childrens or children
	  //find
	  const $items = $('.myList').find('li');
	  
	  //see other methods like
	//.prevUntil();
	//.nextUntil();
	  
	  // in 	https://api.jquery.com/
	  
 //--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//-- //--//--//--//--//--//--//--//--//--//--//