day17--Modal programming box 4

1. This section learns how to process documents in jquery

There are four ways to append: append before before; append after after

Remove all; empty content empty;

Clone clone

(1) Four additional methods

Now the page writes an input box and an add button. When writing a list, when the "add" button is clicked, the list increases;

The page code is as follows:

        <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>

 

The results are as follows:

 

In jquery binding event:

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

 　　(A) append increases downward

　　

　　(B) prepend increases upward

　　

　　(3) after increase downward

　　

　　(4) before increasing upward

　　

(2) Delete button

Delete includes delete all, and delete only the content: enter the index in the input box and get

　　(A) remove: enter the index value 1 of list 2 and click the delete button, the row is deleted

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

 

　　(B) empty: enter the index value of list 2 and click the delete button, the content of the line is deleted

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

 

(3) Cloning

　　Enter the index in the input box, get the value of the index and clone it, and append it to the ul list

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