miércoles, 13 de mayo de 2015

[Parte 7]jQuery

jQuery - Manipulacion del DOM

jQuery proporciona metodos para manipular el DOM de forma eficiente. No es necesario escribir gran codigo para modificar el valor del atributo de cualquier elemento o para extraer el codigo HTML de un parrafo o div.

jQuery proporciona metodos tales como .attr(), .html() y .val() que actuan como getters (captadores) recuperan informacion de los elementos DOM para su uso posterior. 

Manipulacion de contenido

El metodo html() obtiene el contenido html (innerHTML) del primer elemento que coincida. Esta es la sintaxis del metodo:


selector.html()
Ejemplo:

El siguiente es un ejemplo que hace uso de los metodos .html() y .text(val). Aqui html() recupera el contenido HTML del objeto y luego .text(val) fija el valor del objeto con el parametro pasado.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            var content = $(this).html();
            $("#result").text( content );
        });
    });
    </script>
    <style type="text/css">
        #division {
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div id="division" style="background-color:yellow;">Este es un cuadrado amarillo!!!</div>
</body>
</html>


Reemplazando elementos del DOM

Usted puede reemplazar un elemento del DOM o varios elementos del DOM completamente con el HTML especificado. El metodo replaceWith(content) sirve para este proposito muy bien. Aqui esta la sintaxis del metodo:

selector.replaceWith(content)  
En lugar de content usted utilizara lo que realmente quiere reemplazar en los elementos originales. Esto podria ser HTML o texto simple. 

Ejemplo

A continuacion se presentara un ejemplo que reemplazara el elemento division con <h1>jQuery es genial!</h1>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).replaceWith("<h1>jQuery es genial!</h1>");
        });
    });
    </script>
    <style type="text/css">
        #division {
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div id="division" style="background-color:yellow;">Este es un cuadrado amarillo!!!</div>
</body>
</html>


Eliminando elementos del DOM

Puede haber una situacion en la que le gustaria eliminar uno o mas elementos del DOM desde el documento. jQuery proporciona dos metodos para manejar esta situacion. 
El metodo empty() elimina todos los nodos secundarios del conjunto de elementos coincidentes donde el metodo remove(expr) elimina todos los elementos coincidentes del DOM. Aqui esta la sintaxis de los metodos:

selector.remove([expr])

selector.empty()

Puede pasar un parametro opcional expr para filtrar el conjunto de elementos que desea eliminar.

Ejemplo

A continuacion se presenta un ejemplo donde se estaran eliminando los elementos tan pronto como se le hagan clic sobre ellos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).remove();
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;"></div>
    <div class="div" style="background-color:green;"></div>
    <div class="div" style="background-color:red;"></div>
</body>
</html>


Insertando elementos en el DOM

Puede haber una situacion en la que le gustaria insertar nuevos elementos ya sea uno o varios en su documento. jQuery proporciona varios metodos para insertar elementos en varios lugares. 
El metodo after(content) inserta contenido despues de cada uno de los elementos coincidentes, el metodo before(content) inserta contenido antes de cada uno de los elementos coincidentes. La siguiente es la sintaxis del metodo:

selector.after(content)

selector.before(content)

El contenido a insertar podria ser HTML o texto simple.

Ejemplo

A continuacion se presenta un ejemplo en el <div> los elementos se insertan justo antes del elemento que le des clic.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).before('<div class="div"></div>');
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;"></div>
    <div class="div" style="background-color:green;"></div>
    <div class="div" style="background-color:red;"></div>
</body>
</html>


Metodos de manipulacion del DOM

La siguiente tabla enumera una lista de metodos que se puede utilizar para manipular los elementos del DOM.


+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| Metodo                 | Descripcion                                                                                                                          |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| after(content)         | insertar contenido despues de cada uno de los elementos coincidentes.                                                                |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| append(content)        | Agrega contenido en el interior de cada elemento coincidente.                                                                        |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| appendTo(selector)     | Agrega todos los elementos coincidentes a otro, especificado, conjunto de elementos.                                                 |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| before(content)        | inserta el contenido antes de cada uno de los elementos coincidentes.                                                                |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| clone(bool)            | Clonar elementos DOM coincidentes, y todos sus controladores de eventos, y seleccionar los clones.                                   |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| clone()                | Clona los elementos DOM coincidentes y selecciona sus clones.                                                                        |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| empty()                | Quita todos los elementos secundarios del conjunto de elementos que coincidan.                                                       |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| html(val)              | Establece el contenido html de cada elemento coincidente.                                                                            |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| html()                 | Obtener el contenido html (innerHTML) del primer elemento coincidente.                                                               |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| insertAfter(selector)  | Inserta todos los elementos coincidentes despues de otros, especificados, conjunto de elementos.                                     |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| insertBefore(selector) | Inserta todos los elementos coincidentes antes de otros, especificados, conjunto de elementos.                                       |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| prepend(content)       | Antepone el contenido en el interior de cada elemento coincidente.                                                                   |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| prependTo(content)     | Anteponer todos los elementos coincidentes a otro, conjunto de elementos.                                                            |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| remove(expr)           | Elimina todos los elementos coincidentes del DOM.                                                                                    |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| replaceAll(selector)   | Reemplaza todos los elementos coincidentes por el selector especificado con los elementos coincidentes.                              |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| replaceWith(content)   | Reemplaza todos los elementos coincidentes con el HTML especificado o elementos del DOM.                                             |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| text(val)              | Establece el contenido de texto de todos los elementos coincidentes.                                                                 |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| text()                 | Obtener el contenido de texto combinado de todos los elementos coincidentes.                                                         |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrap(elem)             | Envuelve cada elemento coincidente con el elemento especificado.                                                                     |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrap(html)             | Envuelve cada elemento coincidente con el contenido HTML especificado.                                                               |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapAll(elem)          | Envuelve todos los elementos en el conjunto combinado en un unico elemento de envoltura.                                             |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapAll(html)          | Envuelve todos los elementos en el conjutno combinado en un unico elemento de envoltura.                                             |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapInner(elem)        | Envuelve todos los contenidos hijos interiores de cada elemento coincidente (incluyendo los nodos de texto) con un elemento DOM.     |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapInner(html)        | Envuelve todos los contenidos hijos interiores de cada elemento coincidente (incluyendo los nodos de texto) con una estructura HTML. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
 
 
Fuente: http://www.tutorialspoint.com

No hay comentarios:

Publicar un comentario en la entrada