Para trabajar necesitamos saber como posicionar nuestros scripts, lo podemos utilizar en la cabecera o en el cuerpo, nosotros situaremos nuestros script antes del cierre del head
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background: #1a1a1a;
color: white;
}
</style>
<title>Acceder al DOM desde Jquery</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script>
<script type="text/javascript">
$("document").ready(function(){//Este metodo nos permite trabajar el documento cuando la pagina esta cargada.
$("#enlace-principal").css("color", "red");//Ponemos estilo a nuestro enlace encerrado con etiquetas h1
})
</script>
</head>
<body>
<h1><a id="enlace-principal" href="#">Canvaso</a></h1>
<h2>DOM desde Jquery</h2>
<div id="contenido">
<p> En este tutorial veremos los siguientes elementos html que nos ayudan a seleccionar, los siguientes metodos son:</p>
<ul class="lista-de-metodos">
<li>Metodo Each</li>
<li>Metodo Eq</li>
<li>Metodo on</li>
</ul>
<h3 class="temas-menores">Metodo Each</h3>
<p class="parrafos-menores">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </p>
<h3 class="temas-menores">Metodo Eq</h3>
<p class="parrafos-menores">Duis aute irure dolor in reprehenderit in voluptate velit cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3 class="temas-menores">Metodo On</h3>
<p class="parrafos-menores">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Como observamos agregue todo el documento para que no ocasione problema si se esta iniciando desde cero. Utlizamos la version 2.1.0 de jquery y el codigo que se ejecuta es el siguiente
$("document").ready(function(){//Este metodo nos permite trabajar el documento cuando la pagina esta cargada.
$("#enlace-principal").css("color", "red");//Ponemos estilo a nuestro enlace encerrado con etiquetas h1
});
Seleccionamos la id llamada "enlace-principal" y le aplicamos un estilo a la fuente de texto de color rojo, tenga en cuenta que si trabajamos en la cabecera del
head necesitamos del metodo ready para que cuando todos los elementos del html esten cargados en el navegador, el codigo de selectores pueda funcionar. Se pueden omitir estos metodos y declar nuestro script antes del cierre del </body>. Una vez comprendido trabajaremos con el mismo documento.Selectores css
En la figura anterior se habla acerca de la posición del DOM por ejemplo si quisiéramos seleccionar elementos hijos del elemento div, como las p, escribiríamos así el código,
$('div > p').css("background", "blue");
En este caso seleccionamos con ("div > p") en la forma que lo hace css. Para ver más seleccionadores nos vamos a la siguiente tabla
$(".contenido")
Selecciona la clase llamada "contenido"
$("#contenido")
Selecciona la ID llamada "contenido"
$("p")
Selecciona todos los párrafos del documento
$("p a")
Selecciona todas las <a> descendientes de un <p>
$("p, a")
Selecciona todas las <a> y <p>
$("ul.lista-de-metodos")
Selecciona todas las <ul> con clase llamada lista de metodos
$("div ~ p")
Selecciona todos los elementos <p> hermanos de div
$("div > p")
Selecciona los párrafos que son hijos directos de un <div>
$("h1 + h2")
Selecciona un <h2> precedidos de <h1> solo un hermano inmediato
$("p[class]")
Selecciona los párrafos <p> que tiene un atributo clase
$("p[id*=parrafos-solos]")
Selecciona los parrafos <p>
que tienen la ID con palabra parrafos-solos
$("a[href$=html]")
Selecciona todas elementos <a> con atributo "href" terminando en html
$("a[title^=Hac]")
Selecciona todas elementos <a> con atributo "title" y la palabra empieza con "Hac"
Selectores Jquery
Con la gran variedad de selectores que tiene css, jquery utiliza los suyos para poder interactuar con los elementos del html como se muestran a continuación:
$("p:first")
Selecciona el primer elemento <p> de la pagina
$("a[href$=html]:first")
Selecciona el primer elemento <a> que tiene atributo con terminacion html
$("p:last")
Selecciona el ultimo elemento <p>
$("li:first-child")
Selecciona todos los elemento <li> que son primeros hijos
$("li:last-child")
Selecciona ultimos hijos <li>
$("li:nth-child(1)")
Selecciona todos los primeros elementos <li> de cada <ul>
$("li:nth-child(odd)")
Selecciona los <li> que son impares
$("li:nth-child(even)")
Selecciona todos los <li> que son pares
$("p:nth-child(3n)")
Selecciona el tercer elemento <p>
$("p:odd")
Selecciona <p> impares
$("p:even")
Selecciona <p> pares
$("p:eq(2)")
Selecciona el segundo<p> comenzando desde cero
$("p:gt(1)")
Selecciona todos los<p> excepto los dos primeros y cuenta desde cero
$("p:lt(2)")
Selecciona los primeros dos elementos <p> este no cuenta desde cero
Estos son algunos selectores posicionales que funcionan a traves de la posición en que son nombrados, por ejemplo, si queremos seleccionar el primer elemento p, quedaria de la siguiente manera,
$("p:eq(0)").css("background", "red");
Metodo html y text
Ya tenemos como seleccionar los elementos, enseguida veremos algunos métodos que nos ayudan, a saber que contenido hay en los elemento, como lo es, el metodo html y text:
console.log($("h1").html());//<a href="#" id="enlace-principal">Canvaso</a>
console.log($("p:eq(0)").text());//En este tutorial veremos los siguientes elementos html que nos ayudan a seleccionar, los metodos son:
Las salidas en el caso de html() es otro elemento semantico y en el caso de metodo text() contiene solo texto. Tambien se pueden insertar datos nuevos a las etiquetas, se escribiria asi:
$("h1").html("<a id='enlace-principal' href='#'>Canvasososososote</a>");
$("p:eq(0)").text("Veremos los metodos html y text, los metodos son:");
Metodo attr
Ahora trabajamos con el atributo de una etiqueta con el método attr(), por ejemplo en una div se puede seleccionar: id y class; en un enlace: title y href; en una imagen: alt y src. Asi podemos enumerar muchos de los atributos como también los son en el formulario que veremos en otro tutorial.
console.log($("h1 a").attr("id"));//enlace-principal
de este modo accedemos a la ID de "a" que lleva por nombre "enlace-principal" que es el único del documento que dimos mas arriba y es donde estamos trabajando. Para poder insertar un attr de un solo valor, ponga un enlace en elemento link y de inicio al evento click y se abrirá otra pagina con el atributo target: _blanck.
$("a").attr("target", "_blank");
Ahora agreguemos a ese documento html y agregamos una etiqueta <img>, que insertaremos algunos atributos, a continuación,
$( "img" ).attr({
src: "10.jpg",
title: "jQuery",
alt: "jQuery Logo"
});
Metodo CSS
El metodo css nos permite leer estilos css en la pagina mediante javascript de la siguiente forma:
$("h1").css("font-weight");//bold
Esta es la forma de acceder a sus propiedades de los elementos css, pero si queremos insertar varios estilos (ya que anteriormente escribimos solo un atributo), con las {} nos permiten insertar multiples estilos así.
$("a").css({
backgroundColor: "green",
color: "yellow",
padding: "5px 2px 5px 2px",
border: "dotted black 4px"
});
De esta manera se puede insertar varios estilos en cascada y establecer varios propiedades en su contenido.
Metodos AddClass removeClass y toggleClass
Addclass nos permite agregar una clase de estilos css a nuestros elementos, primero declaramos nuestra clase para posteriormente utilizarla
.otro-stilo{
color: blue;
font-size: 20px;
padding: 10px;
background: white;
}
Para tener acceso a esta clase agregamos estas lineas, que serán puestas al elemento <a> y modificara sus estilos css.
$("a").addClass("otro-stilo");
Para eliminar esta clase se utiliza el metodo removeClass
$("a").removeClass("otro-stilo");
Para ver el funcionamiento de toggleClass necesitamos un controlador de evento de tipo click, en este caso utilizaremos el elemento h2 asi,
$( "h2" ).click(function() {
$( this ).toggleClass("otro-stilo");
});
su funcionamiento se dispara cuando hacemos click a cualquier h2 del documento, y cuando volvemos a dispar el evento click, esta regresa a su posicion original.
El metodo has
Este método devuelve true si se encuentra una clase igual a la que se le esta invocando y false si es todo lo contrario.
$("a").hasClass("otro-stilo");//false
En este caso no se encuentra la clase llamada otro-sitio en el elemento <a> es por eso, que devuelve false.
Seleccion de metodos
A demás del seleccionador que proporciona jquery $ define varios métodos de selección.
Metodo Find
El método devuelve el selector y encuentra la etiqueta que se le especifica en el método find
$("div#contenido").find("p").length;//Devuelve el numero de elementos p que son 4
Metodo Filter
Devuelve el selector principal y otra propiedad que se quiere encontrar, similar a esto $("div#contenido"), a continuacion se muestra
$("div").filter("#contenido").html();//Devuele todo el contenido html en div#contenido
Metod End
El metodo End() destruye la seleccion y busca el primer pariente, por ejemplo,
$("div#contenido").find("p").css("border", "solid 1px white");
aqui selecciona todas los elementoa p y le colocamos un borde, si utilizamos el metodo end() quedaria de esta manera,
$("div#contenido").find("p").end().css("border", "solid 1px white")
lo que seleccionaría seria todo el div con id "contenido" padre de las p. En el caso del método filter, este seleccionaría a todos sus div hermanos, si añadimos más div en nuestro ejemplo, posemos observar lo que pasa
<div id="contenido">...</div>
<div id="contenido-dos">Soy el contenido dos</div>
<div id="contenido-tres">Soy el contenido tres</div>
Insertamos nuestro código y vemos que sera insertado un borde verde
$("div").filter("#contenido").end().css("border", "solid 1px green");
