Introduccion a jquery: Accediendo al dom

¿Qué es jQuery?

jQuery es un Framework de JavaScript creada por John Resig, cuya función es facilitar el acceso y manipulación del DOM, manejar eventos, creación de animaciones e interactuar con AJAX.

Descarga directa

Documentación oficial

Como lo empiezo a usar?

Debemos agregar el framework anteriormente descargado a nuestra pagina de la siguiente forma:

<script src="jquery-1.9.1.min.js"></script> //Forma Local

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
       // Utilizando los server de Google

Primero debemos tener claro que para usar jQuery debemos llamar a la función jQuery o $ de la siguiente forma:

$(document)

jQuery(document)

Tienen la misma funcionalidad y significan lo mismo, luego teniendo en cuenta que jQuery te facilita acceder al DOM e interactuar con este, debemos hacer que este código se aplique después de que el DOM esté listo, esto lo hacemos de la siguiente forma:

$(document).ready(OnReady);
function OnReady(){
    #Codigo jQuery
}

Siempre la función ready() tendrá como parámetro la función que se ejecutará cuando se tenga listo el DOM.

En la función $ o jQuery tenemos como parámetro el elemento al cual le afectará el cambio, puede ser un id, una clase o el documento en sí como es el caso anteriormente mencionado.

Accediendo al DOM

Para acceder al documento completo:

>  $(document)
      [ #document
<!DOCTYPE html>
<html lang="es">…</html>
]

Para acceder a un id lo hacemos de la siguiente forma:

> $('#wrapper')
   [<div id="wrapper">…</div>]

Para acceder a una clase:

> $('.overlay')
   [<div class="overlay"></div>]

Para buscar un id o una clase dentro de un elemento:

>  $('#wrapper').find('.overlay')
    [<div class="overlay active"></div>]

Para saber qué hijos tiene:

>  $('#wrapper').children()
     [<div class="overlay active"></div>,<a class="cont-edit" href="/add_curso">…</a>,<section id="cursos_p">…</section>]

Para saber sus padres:

>  $('#wrapper').parents();
     [<body class="prettify-desert">…</body>,<html lang="es">…</html>]

Para añadir una clase:

> $('#wrapper').addClass("nueva-clase");

Para eliminar un elemento:

> $('#wrapper').remove();

Para cambiar atributos:

> $('#wrapper').attr("class",”lol”);

Para agregar un elemento dentro de otro:

> $('#wrapper').append('<li>Elemento</li>');

Para cambiar el html de un elemento:

>$('#wrapper').html('<p>Holaaa</p>');