ManuelRomero: Página creada con «{{Usuario:ManuelRomero/JavaScript/jquery/nav}} {{TOC}} ====Seleccionar elementos del DOM con JQuery==== *Como ya hemos visto la acción de selección empieza por '''''$...»

2016-04-08T09:59:29Z

Página creada con «{{Usuario:ManuelRomero/JavaScript/jquery/nav}} {{__TOC__}} ====Seleccionar elementos del DOM con JQuery==== *Como ya hemos visto la acción de selección empieza por '''''$...»

Página nueva

{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
{{__TOC__}}
====Seleccionar elementos del DOM con JQuery====
*Como ya hemos visto la acción de selección empieza por '''''$()''''', y entre paréntesis se especifica la selección que se desea realizar
*La selección se puede hacer por los siguientes criterios
#nombre
#id
#clases
#tipos
#atributos
#valores de atributos
#otros mas
*Ahora vamos a ver unos ejemplos
'''$(selector).action()'''
*'''$''': Simbolo para definir JQuery (podríamos usar también JQuery)
:'''selector''': Consulta sobre los elementos HTML (sintaxis muy similar a CSS)
:'''action''': Acción que se ejecuta sobre los elementos

*Ejemplos:
<source lang="javascript">
$(this).hide() //oculta el elemento actual
$("p").hide() //oculta todos los elementos de tipo párrafo
$("p.test").hide() //oculta todos los párrafos con class=test
$("#test").hide() //oculta todos los elementos con id=test
</source>
</div>

<div class="slide">
*En este enlace puedes ver una lista mas elaborada de ejemplos
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

==== Seleccionando elementos del DOM con JQuery ====
;Todos los elementos del documento
<source lang=javascript>
$("*");
</source>
;Selección por nombre de elemento o nodo
*Los elementos concretos de un determinado tipo. Selección por nombre de elemento o nodo
<source lang=javascript>
//todos los párrafos
$("p");
//todas las imagenes
$("img");
//todas los formularios
$("form")

</source>
;Selección por id
*En esta selección debemos anteponer el '''''#''''' al valor del '''''id''''' seleccionado
<source lang=javascript>
<h1 id="titulo"> .. </h1>
...
$("#titulo")
//Seleccionaría el elemento titulo
</source>

;Selección por class
*En este caso ante del valor de la clase se pone un '''''.''''' (punto) .
<source lang=javascript>
<h1 id="titulo" class="principal"> .. </h1>
...
$(".principal")
//Seleccionaría el elemento h1 cuya clase es principal
</source>

;Selección de elementos que tengan un atributo definido
*Para ello se especifica el atributo entre corchetes '''''[]''''' .
<source lang=javascript>
<h1 id="titulo" class="principal" name="nombreTitulo1"> .. </h1>
<h2 id="titulo2" class="segunda" name="nombreTitulo2"> .. </h1>
...
$("[name]")
//Seleccionaría los elementos que tengan definido el atributo name independientemente del valor
</source>
;elementos que tengan un atributo con un determinado valor $("[atributo=valor]")
*En este caso se especifica el valor esperado del atributo
<source lang=javascript>
<h1 id="titulo" class="principal" name="nombreTitulo1"> .. </h1>
<h2 id="titulo2" class="segunda" name="nombreTitulo2"> .. </h1>
...
$("[name=nombreTitulo1]")
//Seleccionaría los elementos que tengan definido el atributo name con el valor especificado.

;Ejemplos
<source lang="javascript">
$("p") //se seleccionan todos los elementos de tipo párrafo
$("p.intro") //todos los párrafos con class=intro
$("p#demo") //todos los párrafos con id=demo
$("[href]") //todos los elementos con atributo href
$("[href='#']") //todos los elementos con atributo href="#"
$("[href!='#']") //todos los elementos con atributo href diferente de "#"
$("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg
$("p").css("background-color","yellow"); //modificamos el background-color de todos los párrafos a amarillo
$("p#intro:first") //El primer párrafo con id="intro"
$("ul li:first") El primer elemento <li> de cada <ul>
$("div#intro .head") //Todos los elementos con class="head" dentro de un <div> con id="intro"
</source>
</div>

<div class="slide">
{{Actividad
|Title=Dado el siguiente código oculta todos los elementos
|

<source lang=html5>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("selector").hide();
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
</source>
}}

{{Actividad
|Title=Oculta el elemento con id=test.
|
<source lang=html5>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("selector").hide();
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p id="test">This is a paragraph with id="test".</p>

</body>
</html>
</source>
}}
{{Actividad
|Title=Oculta todos los elementos del documento
|
<source lang=html5>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("selector").hide();
});
</script>
</head>
<body>

<h1>This is a heading</h1>
<h2>This is another heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is a div element.</div>
<button>This is a button</button>

</body>
</html>

</source>
}}
{{Actividad
|Title=Oculta los elementos con un atributo href
|
<source lang=html5>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("selector").hide();
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<a href="http://www.w3schools.com/html/">HTML Tutorial</a>
<a href="http://www.w3schools.com/css/">CSS Tutorial</a>

</body>
</html>
</source>
}}

{{Actividad
|Title=Oculta todas las filas pares de la tabla
|
<source lang=html5>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("selector").hide();
});
</script>
</head>
<body>

<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>

</body>
</html>
</source>
}}

====Acciones con html====
==== Manipulación del contenido html ====
*Cambia el contenido del elemento/s html seleccionado/s:
<source lang="javascript">
$(selector).html(contenido)
</source>
*Añaden contenido en el elemento HTML seleccionado:
<source lang="javascript">
$(selector).append(content)
$(selector).prepend(content)
</source>
*Añaden contenido después o antes del elemento HTML seleccionado:
<source lang="javascript">
$(selector).after(content)
$(selector).before(content)
</source>

Usuario:ManuelRomero/JavaScript/jquery/seleccion - Historial de revisiones

ManuelRomero: Página creada con «{{Usuario:ManuelRomero/JavaScript/jquery/nav}} {{__TOC__}} ====Seleccionar elementos del DOM con JQuery==== *Como ya hemos visto la acción de selección empieza por '''''$...»

ManuelRomero: Página creada con «{{Usuario:ManuelRomero/JavaScript/jquery/nav}} {{TOC}} ====Seleccionar elementos del DOM con JQuery==== *Como ya hemos visto la acción de selección empieza por '''''$...»