zoukankan      html  css  js  c++  java
  • JavaScript(17):基于输入框的增删与复制

        示例代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基于输入框的增删与复制</title>
    </head>
    <body>
        <input type="text" id="te">
        <input type="button" value="添加" id="add">
        <input type="button" value="删除" id="del">
        <input type="button" value="复制" id="copy">
    
        <ul>
            <li>秋风</li>
            <li>萧瑟</li>
        </ul>
    
        <script src="jquery-1.12.4.js"></script>
        <script>
            $('#add').click(function () {
                var r = $('#te').val();
                var temp = "<li>"+r+"</li>";
                $('ul').prepend(temp);
    //            直接追加字符串的方式原来就能添加子标签了呀
    //            append是追加为子元素的最后处,而prepend是追加为子元素的最前处
            });
    
    //        删除是通过索引来实现的
            $('#del').click(function () {
                var index = $('#te').val();
                $('ul').children().eq(index).remove();
            });
    
    //      复制也是通过索引来实现的
            $('#copy').click(function () {
                var index = $('#te').val();
                var co = $('ul>li').eq(index).clone();
    //            clone(),复制函数
                $('ul').append(co);
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    元素绑定与非元素绑定
    窗口之间的交互,windows和自定义的窗口集合
    e.which
    prop()和attr()
    web动画
    $.proxy()和$.makeArray()
    匿名自执行函数报错
    页面适配
    gulp
    伪元素和伪类
  • 原文地址:https://www.cnblogs.com/wangchongzhangdan/p/9409620.html
Copyright © 2011-2022 走看看