Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/html»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con «====Aplicando efectos con JQuery==== ====Encadenando métodos en JQuery==== ====Dom y JQuery; Modificando elemntos==== ====Dom y JQuery; Accediendo a los atributos==== ====...»)
 
(→‎Métodos)
 
(Una revisión intermedia por el mismo usuario no mostrado)
Línea 1: Línea 1:
−
====Aplicando efectos con JQuery====
+
{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
−
====Encadenando métodos en JQuery====
+
{{__TOC__}}
−
====Dom y JQuery; Modificando elemntos====
+
 
−
====Dom y JQuery; Accediendo a los atributos====
+
===Concepto===
−
==== JQuery y CSS====
+
*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).
−
==== JQuery y Formularios====
+
*De nuevo los métodos de JQuery simplifica el acceso para hacerlo más fácil e intuitivo
−
==== JQuery y Eventos====
+
===Métodos===
−
==== JQuery Validando formularios con plugin====
+
Son tres los métodos que tenemos para este objetivo
−
==== JQueryUI: Interfaz gráfico con JQuery====
+
<source lang=javascript>
 +
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
 +
</source>
 +
===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.
 +
<source lang=javascript>
 +
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
 +
</source>
 +
===Eliminando elementos de la página===
 +
En este caso vamos a eliminar un elemento o bien su contenido
 +
<source lang=javascript>
 +
remove() - Removes the selected element (and its child elements)
 +
empty() - Removes the child elements from the selected element
 +
</source>
 +
{{Actividad|
 +
Title=Accediendo al input
 +
|Haz que se visualice un alert con el contenido de la caja de texto
 +
<source lang=javascript>
 +
<!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>
 +
</source>
 +
}}
 +
 
 +
{{Actividad|
 +
Title=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)
 +
<source lang=javascript>
 +
<!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>
 +
</source>
 +
}}
 +
{{Actividad|
 +
Title=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
 +
<source lang=javascript>
 +
<!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>
 +
</source>
 +
}}
 +
 
 +
{{Actividad|
 +
Title=
 +
|
 +
<source lang=javascript>
 +
</source>
 +
}}

Última revisión de 00:44 9 abr 2016


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»