DOM操作与权限列表-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_19683/article/details/82513668

1、dom创建运行效果自己Copy代码运行去

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title >创建dom</ title>
    <style type="text/css">
    table{ border-collapse:collapse ;}
   #tbMy td{ width :122px; height:36px ; border: 1px solid #000;}
   ul{ border:1px solid #000;width :100px; }
    </style >
    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></ script>
    <script type="text/javascript">
    //-------------------------------$("<a></a>")/.append()/.appendto()/.parent()
        var jsonArr =
        [
            { "id":1,"name" :"刘德华", "age":17,"gender" :"男"},
            { "id":2,"name" :"刘德华2", "age":27,"gender" :"女"},
            { "id": 3, "name" : "刘德华3", "age": 37, "gender" : "不男不女" }
        ];
            $( function () {
                //向Jquery方法中 设置  html 代码，Jquery会自动帮我们生成dom元素，并封装到一个新的Jquery对象
                //var $Link = $("<a href='http://www.baidu.com'>去百度</a>");
                //将 新的 Jquery对象append到 所有奇数单元格中  $()括号中直接设置元素内容 最简单的dom创建
                //$("td:odd").append($Link);
                for (var index = 0; index < jsonArr.length; index++) {
                    var perObj = jsonArr[index]; //获得 数组中的一个 人员信息
                    //$("<li></li>") 做了两个事儿：1.创建了 dom元素li；2将 此dom元素li 封装成一个Jqeury对象$Li
                    var $Li = $("<li id='" + perObj.id + "' gender=" + perObj.gender + ">" + perObj.name + "</li>")
                    .click( function () {
                        //$("#ulRight").append($(this));  append与appendTo正好相反
                        var $now = $(this );//获得被点击的 li dom对象,然后通过 $()将其转成 JQ对象
                        if ($now.parent().attr("id" ) == "ulLeft")
                            $now.appendTo($( "#ulRight"));
                        else
                            $now.appendTo($( "#ulLeft"));
                    });
                    $( "#ulLeft").append($Li);
                }
//                $("div").attr("style", "border:1px solid black");
//                $.each(jsonArr, function (index, item) {
//                    var jsonIndex = jsonArr[index];
//                    var $LI = $("<li id=" + jsonIndex.id + "name=" + jsonIndex.name + ">" + jsonIndex.name + "</li>").click(function () {
//                        if ($(this).parent().attr("id") == "ulLeft") {
//                            $(this).appendTo($("#ulRight"));
//                        } else {
//                            $(this).appendTo($("#ulLeft"));
//                        }
//                    });
//                    $("#ulRight").append($LI);
//                })
            })
    </script >
</head>
<body>
<select multiple="multiple">
<option value="1">aaa </option>
<option value="2">bbb </option>
</select>
<ul id="ulLeft" onclick="alert('123');">
</ul>
<ul id="ulRight">
</ul>
   <table id="tbMy">
        <tr>
            <td class="myPreours">ID </td>
            <td id="td1">NAME </td>
            <td> GENDER</td >
        </tr>
        <tr>
            <td class="myPreours">1 </td>
            <td class="myPreours">痞子 </td>
            <td id="td2">男 </td>
        </tr>
        <tr>
            <td> 2</td >
            <td> 一毛</td >
            <td> 女</td >
        </tr>
        <tr>
            <td> 3</td >
            <td> 三毛</td >
            <td> 男</td >
        </tr>
        <tr>
            <td> 4</td >
            <td> 三点</td >
            <td> 男</td >
        </tr>
        <tr>
            <td> 汇总：8888</td >
            <td></ td>
            <td></ td>
        </tr>
    </table >
</body>
</html>

2、通过权限列表左右移动介绍JQuery函数操作Dom 运行效果自己Copy代码运行去

< html xmlns ="http://www.w3.org/1999/xhtml">
< head>
    <title > 权限列表</ title >
    <style type="text/css">
    select{ height :200px ; float: left ;margin : 10px;}
    #divBtns{ width :60px ; float: left ; padding : 20px; margin :20px ; border: 1px solid #000 ;}
    </style >
    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></ script >
    <script type="text/javascript">
    //Jquery对象本身就是一个数组
    //-----------.append()/.appendTo()/.remove()/.empty()/.before()/.after()/.insertBefore()/.insertAfter()/.sort()/.sort(function(pre,next){})
        var jsonArr =
        [
            { "id" :1,"name" : "1刘德华", "age" :17,"gender" : "男"},
            { "id" :2,"name" : "2黄小琥", "age" :27,"gender" : "女"},
            { "id" : 3, "name" : "3张学友", "age" : 37, "gender" : "不男不女" },
            { "id" : 4, "name" : "4彭佳慧", "age" : 47, "gender" : "女" },
            { "id" : 5, "name" : "5凤凰传奇" , "age" : 47, "gender": "男" },
            { "id" : 6, "name" : "6那英", "age" : 27, "gender" : "男" }
        ];
            $( function () {
                //获得 左下拉框
                var $leftSel = $("#leftSel" );
                //-------------------------初始化下拉框 数据
                for (var i = 0; i < jsonArr.length; i++) {
                    var per = jsonArr[i];
                    var $opt = $("<option sort='" + per.id + "' value='" + per.name + "' > " + per.name + "</option>");
                    $leftSel.append($opt);
                }
                //------------------------点击 右移 按钮
                $( "#btnMoveRight" ).click(function () {
                    //获得选中的左侧列表里的 选项
                    $( "#leftSel option:selected" ).appendTo($("#rightSel" ));
                });
                //------------------------点击 全右移 按钮
                $( "#btnMoveAllRight" ).click(function () {
                    //获得左侧列表里的 所有选项
                    var $optsSelected = $("#leftSel option" );
                    $optsSelected.appendTo($( "#rightSel" ));
                });
                //------------------------点击 左移 按钮
                $( "#btnMoveLeft" ).click(function () {
                    //获得选中的右侧列表里的 选项
                    var $optsSelected = $("#rightSel option:selected" );
                    $optsSelected.appendTo($( "#leftSel" ));
                });
                //------------------------点击 全左移 按钮
                $( "#btnMoveAllLeft" ).click(function () {
                    //获得右侧列表里的 所有选项
                    var $optsSelected = $("#rightSel option" );
                    $optsSelected.appendTo($( "#leftSel" ));
                });
                //------------------------点击 左移 按钮，移动到左侧列表选中的 选项后
                $( "#btnMoveLeftAfter" ).click(function () {
                    //获得选中的右侧列表里的 选项
                    var $optsSelected = $("#rightSel option:selected" );
                    //获得左侧列表中 选项(因为选中项可能有多个，所以，我们总是选择最后一个)
                    var $selectedLeftOpt = $("#leftSel option:selected:last" );
                    //将 右侧 选中项 追加到 左侧选中项的后面
                    $selectedLeftOpt.after($optsSelected); //after(content)在每个匹配的元素之后插入内容abefore(content)相反
                    //insertBrfore() insertAfter查看帮助
                });

                $( "#btnClearLeft" ).click(function () {
                    //删除后返回的就是被删除的节点，而且由JQuery对象封装
                    //var $removedOpts = $("#leftSel option").remove();//remove()方法返回被删除的节点对象
                    //alert($removedOpts.appendTo($("#rightSel")));
                    //$("#divBtns").remove();//.empty()则是保留div框架 而remove则是连div都不存在 remove返回被删除的节点对象
                });
                //对移入移出元素进行先后的排序
                $( "#btnMoveLeftSort" ).click(function () {
                    //获得选中的右侧列表里的 选项
                    var $optsSelected = $("#rightSel option:selected" );
                    $optsSelected.appendTo($( "#leftSel" ));
                    var sortedList = $("#leftSel option" ).sort( function (prev, next) {
                    //sort不知道如何排序 我们 需要匿名函数 指明排序方法  根据元素sort属性值进行排序
                        var prevI = parseInt(prev.sort);
                        var nextI = parseInt(next.sort);
                        if (prevI > nextI) return 1;
                        else if (prevI < nextI) return -1;
                        else return 0;
                    });
                    $( "#leftSel" ).append(sortedList);
                    //$("#leftSel").empty().append($(sortedList));
                    //for (var i = 0; i < sortedList.length; i++) {
                        //alert(sortedList[i].sort);
                    //}
                });

                //自己写的方法  较上比较复杂
//                $("#AllToR").click(function () {
//                    $("#selLeft").children().each(function () {
//                        $(this).appendTo($("#selRight"));
//                    })
//                })
            });
            //以下四种插入外部元素 方法 自己查看帮助
        //--------------------after(content)/before(content)/insertAfter(content)/insertBefore(content)
    </script >
</ head>
< body>
< select id ="leftSel" multiple ="multiple">
</ select>
< div id ="divBtns">
    <input type="button" id="btnMoveRight" value="->" />
    <input type="button" id="btnMoveAllRight" value="=>" />
    <input type="button" id="btnMoveLeft" value="&lt;-" />
    <input type="button" id="btnMoveAllLeft" value="&lt;=" />
    --------
    <input type="button" id="btnMoveLeftAfter" value="&lt;-" />
    <input type="button" id="btnMoveAllLeftAfter" value="&lt;=" />
    <input type="button" id="btnClearLeft" value="清空左侧列表" />
    <input type="button" id="btnMoveLeftSort" value="左移并排序" />
</ div>
< select id ="rightSel" multiple ="multiple">
</ select>
</ body>
</ html>

JQuery操作Dom