jq的DOM操作增删改

来源：互联网发布：oracle 清除表数据编辑：程序博客网时间：2024/06/06 02:15

jq的DOM操作增删改

样式

body{    width: 100%;    height: 100%;}ul{    padding-top:20px;}ul> li{    width: 100px;    height: 30px;    background: #c4e3f3;    float: left;    list-style: none;    text-align: center;    margin-left: 10px;    font-size:7px;    line-height: 30px;}#list{    clear: both;    padding-top:10px;    text-align: center;}input{    margin-top: 10px;}button{    margin-top: 20px;    margin-left: 20px;}#box{    margin-top:100px;    width: 100%;    height: 100%;}#box ul li{    width: 100px;    height: 30px;    background: #c4e3f3;    float: left;    list-style: none;    text-align: center;    margin-left: 10px;    font-size:7px;    line-height: 30px;}

结构

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body><ul id="elect">    <li id="app">前置</li>    <li id="applast">追加</li>    <li id="delF">删除第一个</li>    <li id="delL">删除最后一个</li>    <li id="update">替换</li></ul><br><ul id="list">    <li><input type="checkbox"></li>    <li>姓名</li>    <li>性别</li>    <li>年龄</li>    <li>操作</li></ul><div id="box"></div><br>姓名:<input type="text" id="names"><br>性别:<input type="text" id="sex"><br>年龄:<input type="text" id="age"><br><button id="btn" style="display: none">修改</button></body></html>

<script src="../js/jquery-3.2.1.js"></script><script>    //前置    $('#app').click(function () {        $("#box").prepend(app())    })    //追加    $('#applast').click(function () {        $("#box").append(app())    })    //删除第一个    $("#delF").click(function () {        $("#box ul:first-child").remove()    })    //删除最后一个    $("#delL").click(function () {        $("#box ul:last-child").remove()    })    //替换    $("#update").click(function () {     if($("input:checkbox:checked").length){         $("button").show()     }    })    //修改    $("#btn").click(function () {        var list=$('<ul>')        var oldlist=$("input:checkbox:checked").parents("ul")        $.each($("input:text"),function (i,v) {            var list_li=$('<li>');            list_li.html($(v).val())            list.append(list_li)//            console.log(list_li)        })        list.prepend("<li><input type='checkbox'></li>")        list.append("<li>替换</li>")        list.replaceAll( oldlist)    })    //封装app    function app() {        var username=""        var sex=""        var age=""        var html=""        username+=$("#names").val()        sex=$("#sex").val()        age+=$("#age").val()        html+="<ul>"+" <li><input type='checkbox'></li>"+"<li>"+username+"</li>"+"<li>"+sex+"</li>"+"<li>"+age+"</li>"+"<li>替换</li>"+"</ul>"        return html    }</script>

阅读全文

0 0