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); })

COMENTARIOS RECIENTES

Sergio hace 2 años, 7 meses

[Varios] - Vuelvo Al Blog Y Vuelvo A Programar!

Ya estábamos ansiosos por la vuelta crack!

Tam hace 2 años, 7 meses

[Varios] - Vuelvo Al Blog Y Vuelvo A Programar!

Muy bien!!! ❤️