jQuery_Project/views/dom.php

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<div class="col-md-10 col-md-offset-1">
        <h1>Manipulando los elementos</h1>
        <p>Hay numerosas formas de manipular un elemento existente con jQuery. 
            La más común es cambiar el contenido del HTML o un atributo de un elemento. 
            jQuery permite de manera simple, la manipulación de estos. 
            También se puede conseguir información acerca de ellos. 
            A continuación veremos una lista con los métodos más comunes para conseguir información:
        </p>
        <ul>
            <li><a href="http://api.jquery.com/html/">.html()</a> – Obtiene o establece el contenido del HTML.</li>
            <li><a href="http://api.jquery.com/text/">.text()</a> – Obtiene o establece el texto</li>
            <li><a href="http://api.jquery.com/attr/">.attr()</a> – Obtiene o establece el valor de un atribuito.</li>
            <li><a href="http://api.jquery.com/width/">.width()</a> – Obtiene o establece la anchura en pixels del primer elemento de la selección como un integer.</li>
            <li><a href="http://api.jquery.com/height/">.height()</a> – Obtiene o establece la altura en pixels del primer elemento de la selección como un integer.</li>
            <li><a href="http://api.jquery.com/position/">.position()</a> – Obtiene un objeto con la información de la posición para el primer elemento de la selección, relativo a su primer ancestro posicionado.</li>
            <li><a href="http://api.jquery.com/val/">.val()</a> – Obtiene o establece el valor de un elemento dentro un formulario.</li>
        </ul>
        <h3>Getters o Setters</h3>
        <p>Cambiando los elementos es algo trivial, 
            solo hay que recorder que el cambio afectará a todos los elementos de la selección. 
            Si solo quieres cambiar un elemento, asegúrate de estar llamando a 
            ese elemento antes de crear un método setter.
        </p>
        <pre>
            <code>
$( "#myDiv p:first" ).html( "New &lt;strong&gt;first&lt;/strong&gt; paragraph!" );
            </code>
        </pre>
        <br>
        <p>Por ejemplo vamos a ver como se consigue el valor de un input y de un 
            párrafo.
        </p>
        <div>Pon algo<input type="text" name="prueba" id="inputPrueba"></div>
        <p id="parraPrueba">Esto es una prueba afjadkfsdfasdf</p> 
        <div>
            <button id="getValor">Ver valor</button>
            <button id="setValor">Intercambiar valores</button>
        </div>
        <pre>
            <code>
$$("#getValor").click(function() {
   alert($("#inputPrueba").val());
   alert($("#parraPrueba").text());
});

$("#setValor").click(function(){
   var inputValue = $("#inputPrueba").val(); 
   var pText = $("#parraPrueba").text();
   $("#inputPrueba").val(pText);
   $("#parraPrueba").text(inputValue);
});
            </code>
        </pre>
        <br>
        <h3>Moviendo, Copiando y Eliminando Elementos</h3>
        <p>Hay un gran número de formas para mover elementos alrededor del DOM, 
            pero hay dos maneras de enfocarlo:
        </p>
        <ul>
            <li>Colocar el elemento(s) seleccionado relativo a otro elemento.</li>
            <li>Colocar un elemento de manera relativa al elemento seleccionado.</li>
        </ul>
        <p>Por ejemplo, jQuery tiene los métodos “.insertAfter()” y “.after()”. 
            El método “.insertAfter()” coloca el elemento(s) seleccionado(s) después del 
            elemento proporcionado como argumento. Mientras el método “.after()” coloca 
            el elemento proporcionado como argumento después del elemento seleccionado. 
            Luego otros métodos siguen el mismo patrón como “.insertBefore()” y “.before()”,
            “.appendTo()” y “.append()”, y como “.prependTo()” y “.prepend()”.
        </p>
        <p>El método que necesitarás va a depender de como 
            enfoques la manera de mover o los elementos que quieras insertar. 
            Incluso de si quieres guardar una referencia al elemento.
            Si necesitas guardar la referencia del elemento que has insertado o movido
            lo mejor es usar .insertAfter(), .insertBefore(), .appendTo(), y .prependTo().
        </p>
        <div>
            <ul id="myList">
                <li>0 item de la lista</li>
                <li>1 item de la lista</li>
                <li>2 item de la lista</li>
                <li>3 item de la lista</li>
                <li>4 item de la lista</li>
                <li>5 item de la lista</li>
                <li>6 item de la lista</li>
            </ul>
        </div>
            <button id="but-appendTo">Usar appendTo</button>
            <button id="but-append">Usar append</button><br>
        <pre>
            <code>
// Mover elementos tiene diferentes enfoques

// Para hacer el primer item de la lista el último item
$("#but-appendTo").click(function() {
   var li = $( "#myList li:first" ).appendTo( "#myList" );
   alert(li.text());
});
 
// Otro enfoque al mismo problema
$("#but-append").click(function() {
   $( "#myList" ).append( $( "#myList li:first" ) );
});
 
// Podemos ver que no hay forma de acceder al item de la lista 
// que hemos movido porque vuelve a la lista
            </code>
        </pre>
        <br>
        <h3>Clonando Elementos</h3>
        <p>Métodos como “.appendTo()” mueven el elemento, pero algunas veces se
            necesita una copia del elemento. Se puede usar por ejemplo “.clone()”.
        </p>
        <p>Para pasar además datos relativos y eventos al elemento clonado, se tendrá
            que usar "true" como argumento.
        </p>
        <div>
            <ul id="myList2">
                <li>0 item de la lista</li>
                <li>1 item de la lista</li>
                <li>2 item de la lista</li>
                <li>3 item de la lista</li>
                <li>4 item de la lista</li>
                <li>5 item de la lista</li>
                <li>6 item de la lista</li>
            </ul>
        </div>
            <button id="clone-appendTo">Usar appendTo</button><br>
        <br>
        <pre>
            <code>
// Primero se hace una copia del elemento
 
// Y luego se pone al final de la lista
$("#clone-appendTo").click(function() {
   $( "#myList2 li:first" ).clone().appendTo( "#myList2" );
});
            </code>
        </pre>
        <br>
        
        <h3>Eliminando Elementos</h3>
        <p>Hay dos formas de eliminar elementos de la página:</p>
        <ul>
            <li><a href=”http://api.jquery.com/remove/” >.remove()</a>: 
                Elimina el elemento permanentemente de la página web. Pero devuelve 
                el elemento eliminado sin los datos y eventos asociados a él por si 
                se quiere devolverlo a la web.</li>
            <li><a href=”http://api.jquery.com/detach/”>.detach()</a>: 
                Elimina el elemento permanentemente de la página web. Pero devuelve 
                el elemento eliminado con los datos y eventos asociados a él por si 
                se quiere devolverlo a la web. </li>
            <li><a href="http://api.jquery.com/empty/">.empty()</a>:
                Elimina el contenido del elemento dejándolo vacío.</li>
        </ul>
        <div id="insertParra">
            <h4>.remove()</h4>
            <p class="yellow">¿que pasa?</p>
            saecio
            <p class="yellow">como vas</p>
        </div>
        <div>
            <button id="use-remove">Usar remove()</button>
            <button id="add-remove">Volver a añadir elementos</button>
        </div><br>
        <pre>
            <code>
var parra;
$( "#use-remove" ).click(function() {
  parra = $( ".yellow" ).remove();
});

$( "#add-remove" ).click(function() {
  $( "#insertParra" ).append(parra);
});
            </code>
        </pre>
        <br>
        <h4>.detach()</h4>
        <p>Para conservar los eventos asociados al elemento es mejor usar
            “.detach()”. Pues se puede manipular
            el árbol DOM mientras se mantienen todos los eventos y datos asociados
            a los elementos.
        </p>
        <div id="insertParra2">
            <p class="yellow2">¿que pasa?</p>
            saecio
            <p class="yellow2">como vas</p>
        </div>
        <div>
            <button id="use-detach">Usar detach()</button>
            <button id="add-detach">Volver a añadir elementos</button>
        </div><br>
        <br>
        <pre>
            <code>
var parra2;
$( "#use-detach" ).click(function() {
  parra2 = $( ".yellow2" ).detach();
});

$( "#add-detach" ).click(function() {
  $( "#insertParra2" ).append(parra2);
});
            </code>
        </pre>
        <br>
        <h4>.empty()</h4>
        <p>Este método eliminar todo los hijos y descendientes dentro del elemento
            y además si existe texto también lo elimina.
        </p>
        <div id="insertParra3">
            <p class="yellow3">¿que pasa?</p>
            saecio
            <p class="yellow3">como vas</p>
        </div>
        <div>
            <button id="use-empty">Usar empty()</button>
            <button id="add-empty">Volver a añadir elementos</button>
        </div><br>
        <br>
        <pre>
            <code>
var parra3;
$( "#use-empty" ).click(function() {
  parra3 = $( ".yellow3" ).empty();
});

$( "#add-empty" ).click(function() {
  $( "#insertParra3" ).append(parra3);
});
            </code>
        </pre>
        <br>
        <h3>Creando nuevos elementos</h3>
        <p>
            jQuery ofrece de manera trivial una forma de crear nuevos elementos 
            e insertarlos con el método que siempre hemos visto $(). Existen dos 
            métodos de crear elementos de manera interactiva y fácil.
        </p>
        <pre>
            <code>
// Crear elementos nuevos desde un string HTML
$( "&lt;p&gt;This is a new paragraph&lt;/p&gt;" );
$( "&lt;li class="new"&gt;new list item&lt;/li&gt;" );
            </code>
        </pre>
        <br>
        <pre>
            <code>
// También se puede crear como un objeto jQuery
$( "&lt;a/&gt;", {
    html: "This is a &lt;strong&gt;new&lt;/strong&gt; link",
    "class": "new",
    href: "foo.html"
});
            </code>
        </pre>
        <br>
        <p>Se puede ver que la propiedad Class está quoteada mientras que “html”
            y “href” no. Los nombres de las propiedades no suelen estar quoteadas 
            a no ser que sean <a href="https://mathiasbynens.be/notes/reserved-keywords">palabras reservadas</a>. Una vez creado el elemento, 
            no se inserta inmediatamente a la página, hay diversas formas para 
            insertar un elemento que vamos a ver.
        </p>
        <pre>
            <code>
var myNewElement = $( "&lt;p&gt;New element&lt;/p&gt;" );
myNewElement.appendTo( "#content" );
$( "ul" ).last().after( myNewElement.clone() ); // Clona el elemento p y ahora existen dos
            </code>
        </pre>
        <br>
        <p>
            El elemento creado no necesita guardarse en una variable porque 
            puedes llamar al método para añadir el elemento directamente.
            También puede crear un elemento mientras se añade a la página, pero 
            entonces no tendrás una referencia para el elemento creado.
        </p>
        
        <p>
            La sintaxis para añadir nuevos elementos es fácil, pero hay que 
            tener cuidado con el rendimiento de añadir elementos al árbol DOM de
            manera repetida. La manera más eficiente de insertar muchos elementos
            es crear un solo string con toda la información dentro y entonces
            insertarlo en vez de ir insertando los elementos uno a uno. Se puede
            usar un array o un String.
        </p>
        <pre>
            <code>
//Como array
var myItems = [];
var myList = $( "#myList" );
 
for ( var i = 0; i &lt; 100; i++ ) {
    myItems.push( "&lt;li&gt;item " + i + "&lt;/li&gt;" );
}
 
myList.append( myItems.join( "" ) );
            </code>
        </pre>
        <br>
        <pre>
            <code>
//Como String
var myItems = "";
var myList = $( "#myList" );
 
for ( var i = 0; i &lt; 100; i++ ) {
    myItems += "&lt;li&gt;item " + i + "&lt;/li&gt;";
}
 
myList.append( myItems);
            </code>
        </pre>
        <br>
        <h3>Añadir o modificar el CSS</h3>
        <p>jQuery nos da la oportunidad de mediante el método css() modificar 
            las propiedades de un elemento seleccionado de manera rápida y fácil.
        </p>
        <p class="parraCSS">Este párrafo puede mutar</p>
        <p class="parraCSS">Este también</p>
        <pre>
            <code>
$( ".parraCSS" )
  .on( "mouseenter", function() {
    $( this ).css({
      "background-color": "yellow",
      "font-weight": "bolder"
    });
  })
  .on( "mouseleave", function() {
    var styles = {
      backgroundColor : "#ddd",
      fontWeight: ""
    };
    $( this ).css( styles );
  });
            </code>
        </pre>
        <br>
        <h3>Manipulando atributos</h3>
        <p>La manipulación de atributos dentro de jQuery es bastante amplia.
            Los cambios básicos son simples, pero el método attr() permite una
            compleja manipulación si se desea. Puede obtener un valor de un 
            atributo o establecerlo. Para usarlo se necesita usar dos argumentos,
            el tipo de atributo y el valor del atributo.
        </p>
        <a id="duck" href="https://duckduckgo.com/">Ir a Duckduckgo</a>
        <div>
            <button id="changeHref">Cambiar link</button>
        </div>
        <pre>
            <code>
$("#changeHref").click(function() {
    $("#duck").attr( "href", "https://www.mozilla.org" ); 
}); 
            </code>
        </pre>
        <br>
        <p>Ahora vamos a cambiarle varios atributos</p>
        <a id="duck2" href="https://duckduckgo.com/">Ir a Duckduckgo</a>
        <div>
            <button id="changeAtt">Cambiar link</button>
        </div><br>
        <pre>
            <code>
//Esto es CSS
#google {
    color:red;
}
                
$("#changeAtt").click(function() {
   $("#duck2").text("Ir a google");
   $("#duck2").attr({
       href: "https://www.google.es",
       id: "google",
    });
});
            </code>
        </pre>
        <br>
        <h4>Método removeAttr()</h4>
        <p>También se puede eliminar un atributo de un elemento, por ejemplo se puede
            eliminar el título de una página</p>
        <a id="google2" href="https://www.google.es">Ir a Google</a><br>
        <button id="removeHref">Quitar el enlace</button><br>
        <pre>
            <code>
$("#removeHref").click(function() {
   $("#google2").removeAttr("href");
});
            </code>
        </pre>
        <br>
        <h3>Métodos addClass() y removeClass()</h3>
        <p>Este tipo de métodos suelen ir juntos pues al añadir una clase se suele
            quitar otra.
        </p>
        <p id="specialBig" class="specialBig">Este párrafo puede hacerse más grande</p>
        <pre>
            <code>
$("#specialBig").hover(function() {
       $(this).removeClass("specialBig").addClass("specialLittle");
   },
   function() {
       $(this).removeClass("specialLittle").addClass("specialBig");
   }); 
            </code>
        </pre>
        <br>
    </div>
<script src="../jQueryProject/assets/js/dom.js"></script>