Usuario:ManuelRomero/JavaScript/jquery/html
De WikiEducator
< Usuario:ManuelRomero | JavaScript | jquery
Revisión a fecha de 01:44 9 abr 2016; ManuelRomero (Discusión | contribuciones)
LENGUAJE JAVASCRIPT: JavaScript un lenguaje de programación web
Programación web al lado del cliente
JavaScript Un lenguaje de script en el cliente
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
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>
|
|
Haz que cuando seleccione el ancla me salga una caja de tipo alert informando de la página que voy a visitar
<!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>
|
<!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>
|
|
|
