Usuario:ManuelRomero/JavaScript/jquery/html

De WikiEducator
Saltar a: navegación, buscar


Concepto

  • La biblioteca o API JQuery, contiene muchos métodos que nos van a permitir cambiar y manipular los elementos del documento html (acceder a ellos mismos a sus atributos, tanto para conocer valores (leerlos o métodos get), como para modificarlos (métodos del tipo set).
  • De nuevo los métodos de JQuery simplifica el acceso para hacerlo más fácil e intuitivo

Métodos

Son tres los métodos que tenemos para este objetivo 

text() // Permite modificar el contenido del elemento html
html() // Lo mismo que text, pero incluyendo etiquetas de marca html (p.e. <h1> , ..)
val() // Permite acceder (leer y modificar ) los valroes de los campos de un formulario

Añadiendo nuevos elementos

  • En este caso, lo que pretendemos es insertar contenido dentro del elemento, sin perder los datos o valores que tuviera como contenido ese elemnto. 
append() - Insertará el contendido al final del elemento seleccionado
prepend() - Insertará el contendido al principio del elemento seleccionado
after() - Inserta el contenido después del elemento seleccionado
before() - Inserta el contenido antes del elemento seleccionado

Eliminando elementos de la página

En este caso vamos a eliminar un elemento o bien su contenido 

remove() - Removes the selected element (and its child elements)
empty() - Removes the child elements from the selected element


Icon activity.jpg

Accediendo al input

Haz que se visualice un alert con el contenido de la caja de texto 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
//Escribe aquí el código
</script>
</head>
<body>
 
Nombre: <input type="text" value="Mi nombre que bonito es">
 
</body>
</html>






Icon activity.jpg

Accediento al input

Haz que cuando seleccione el ancla me salga una caja de tipo alert informando de la página que voy a visitar

  • Cambia para que me pregunte si quiero ir a esa página (cambia alert por confirm) 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
//Escribe aquí el código
</script>
</head>
<body>
 
<a href="http://www.w3schools.com">W3Schools</a>
 
</body>
</html>






Icon activity.jpg

Cambiando contenido

  • Cambia el contenido del elemento p por un texto nuevo
  • Prueba ha hacerlo con una función de calback, para que primero en un alert me informe del texto que se va a cambiar (el antiguo y el nuevo, y luego me deje cambiarlo
  • Prueba a pedir confirmación 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
<p>Esto es un texto :) .</p>
 
</body>
</html>






Icon activity.jpg

 




Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/html&oldid=19323»