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