Usuario:ManuelRomero/JavaScript/jquery/conceptosGenerales

De WikiEducator
Saltar a: navegación, buscar


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
  1. nombre
  2. id
  3. clases
  4. tipos
  5. atributos
  6. valores de atributos
  7. 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: 
$(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

</div>

  • 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 
$("*");
Selección por nombre de elemento o nodo
  • Los elementos concretos de un determinado tipo. Selección por nombre de elemento o nodo 
//todos los párrafos
$("p");
//todas las imagenes
$("img");
//todas los formularios
$("form")
Selección por id
  • En esta selección debemos anteponer el # al valor del id seleccionado 
<h1 id="titulo"> .. </h1>
...
$("#titulo")
//Seleccionaría el elemento titulo
Selección por class
  • En este caso ante del valor de la clase se pone un . (punto) . 
<h1 id="titulo" class="principal">  .. </h1>
...
$(".principal")
//Seleccionaría el elemento h1 cuya clase es principal
Selección de elementos que tengan un atributo definido
  • Para ello se especifica el atributo entre corchetes [] . 
<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
elementos que tengan un atributo con un determinado valor $("[atributo=valor]")
  • En este caso se especifica el valor esperado del atributo 
<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"


Icon activity.jpg

Dado el siguiente código oculta todos los elementos

<!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>






Icon activity.jpg

Oculta el elemento con id=test.

<!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>






Icon activity.jpg

Oculta todos los elementos del documento

<!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>






Icon activity.jpg

Oculta los elementos con un atributo href

<!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>






Icon activity.jpg

Oculta todas las filas pares de la tabla

<!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>





Acciones con html

Manipulación del contenido html

  • Cambia el contenido del elemento/s html seleccionado/s: 
$(selector).html(contenido)
  • Añaden contenido en el elemento HTML seleccionado: 
$(selector).append(content)
$(selector).prepend(content)
  • Añaden contenido después o antes del elemento HTML seleccionado: 
$(selector).after(content)
$(selector).before(content)

Aplicando efectos con JQuery

Encadenando métodos en JQuery

Dom y JQuery; Modificando elemntos

Dom y JQuery; Accediendo a los atributos

JQuery y CSS

JQuery y Formularios

JQuery y Eventos

JQuery Validando formularios con plugin

==== JQueryUI: Interfaz gráfico con JQuery====
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/conceptosGenerales&oldid=19318»