día17 - Cuadro de programación modal 4

1. Esta sección aprende cómo procesar documentos en jquery

Hay cuatro formas de agregar: agregar antes antes; agregar después después

Eliminar todo; contenido vacío vacío;

Clon clon

(1) Cuatro métodos adicionales

Ahora la página escribe un cuadro de entrada y un botón Agregar. Al escribir una lista, cuando se hace clic en el botón "Agregar", la lista aumenta;

El código de la página es el siguiente:

        <input id = " t1 " type = " text " /> 
        <input id = " a1 " type = " button " value = " 添加" /> 
        <input id = " a2 " type = " button " value = " 删除" /> 
        <input id = " a3 " type = " button " value = "复制" /> 
        
        <ul id = "ul " > 
            <li> 1 </li> 
            <li> 2 </li> 
        </ul>

 

Los resultados son los siguientes:

 

En evento de enlace jquery:

<script src = " jquery-1.12.4.js " > </script> 
        <script> 
            $ ( ' # a1 ' ) .click (function () {
                 var v = $ ( ' # t1 ' ) .val ();
                 var temp = " <li> " + v + " </li> " ; 
                $ ( ' #ul ' ) .append (temp);     // 向下 增加
                 // $ ('# ul'). prepend (temp) ;       // 向上 增加
                 //$ ('# ul'). after (temp);
                // $ ('# ul'). before (temp); 
            }) 
　　　　 </script>

 　　(A) agregar aumentos a la baja

　　

　　(B) anteponer aumenta hacia arriba

　　

　　(3) después del aumento a la baja

　　

　　(4) antes de aumentar hacia arriba

　　

(2) Botón Eliminar

Eliminar incluye eliminar todo y eliminar solo el contenido: ingrese el índice en el cuadro de entrada y obtenga

　　(A) eliminar: ingrese el valor de índice 1 de la lista 2 y haga clic en el botón Eliminar, la fila se elimina

$ ( ' # a2 ' ) .click (function () {
                 var index = $ ( ' # t1 ' ) .val (); 
                $ ( ' #ul li ' ) .eq (index) .remove ();     // All Eliminar 
            ))

 

　　(B) vacío: ingrese el valor de índice de la lista 2 y haga clic en el botón Eliminar, el contenido de la línea se elimina

$ ( ' # a2 ' ) .click (function () {
                 var index = $ ( ' # t1 ' ) .val (); 
                $ ( ' #ul li ' ) .eq (index) .empty ();     // Clear Contenido 
            })

 

(3) Clonación

　　Ingrese el índice en el cuadro de entrada, obtenga el valor del índice y clónelo, y añádalo a la lista ul

$ ( ' # a3 ' ) .click (function () {
                 var index = $ ( ' # t1 ' ) .val ();
                 var v = $ ( ' #ul li ' ) .eq (index) .clone ();     // clonar 克隆 
                $ ( ' #ul ' ) .append (v); 
            })