La Estancia Azul

Extracto de "jquery w3schools":    What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library:

• make it much easier to use JavaScript on your website.
• takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
• simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains the following features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

jQuery website: la información detallada de la librería se encuentra en la web: jquery website

Seleccionar elementos con jQuery:  el símbolo $ sirve para seleccionar elementos del DOM. Se parece mucho a utilizar el selector querySelectorAll(). 

• Seleccionar todos los <a> tags: 

  $('a')
  

• Seleccionar todos los elementos de la clase "container"

  $(".container")
  

• Seleccionar todos los elementos con el id "special"

  $("#special")
  

Eventos en jQuery: más ejemplos en jQuery events

• Haciendo click en un elemento:

  $('h3').click(function() {  $(this).text("I was changed!");  })
  $('li').click(function() {  console.log("any li was clicked!");  })

• Cuando se pulsa una tecla:

  $('input').eq(0).keypress(function(){  $('h3').toggleClass("turnBlue");  })
  $('input').eq(0).keypress(function(event){  console.log(event);  })
  $('input').eq(0).keypress(function(event){  console.log(event);  })
  $('input').eq(0).keypress(function(event){  if (event.which === 13) {...} }
  

• On event es similar a addEventListener de Js:

  $('h1').on('dblclick', function(){  $(this).toggleClass("turnBlue");  })
  $('h1').on('mouseenter', function(){  $(this).toggleClass("turnBlue");  })
  

Animations: mas ejemplos en jQuery effects

$('input').eq(1).on("click",function(){  $(".container").fadeOut(3000); })
$('input').eq(1).on("click",function(){ $(".container").slideUp(1000); })