jQuery学习笔记--remove()删除选择的节点,applend() 添加到节点

最新推荐文章于 2020-04-26 17:52:26 发布

Cybernet

最新推荐文章于 2020-04-26 17:52:26 发布

阅读量729

点赞数

分类专栏： jQuery学习笔记文章标签： jquery function button float input class

jQuery学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
      .red{ background-color:Red;}
    </style>
        <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    /*
      remove()删除选择的节点,applend() 添加到节点
      注意：
      ==========================================================
      1，remove 方法有返回值；var lis = $("#ulSite").remove;
      2，remove 方法的返回值是被删除的节点的对象，还可以继续使用被删除的节点。
         $("#ulSite2").append(list)
      3，可以重新添加到其他节点下。
      ===========================================================
            
      例1：删除 ul class=red 节点
      例2：列表权限选择：移到右边，移到左，
      
    */

        $(function() {

            // 例1：
            $("#del").click(function() {
                $("ul li.red").remove();
            });


            // 例2：
            $("#moveToRight").click(function() {
                var items = $("#select1 option:selected").remove();
                $("#select2").append(items);

            })

            $("#moveToLeft").click(function() {
                var items = $("#select2 option:selected").remove();
                $("#select1").append(items);

            })

            $("#moveToRightAll").click(function() {
                var items = $("#select1 option").remove();
                $("#select2").append(items);

            })

            $("#moveToLeftAll").click(function() {
                var items = $("#select2 option").remove();
                $("#select1").append(items);

            })
        });
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul>
      <li>aaa</li>
      <li class="red">aaa</li>
      <li>aaa</li>
      <li>aaa</li>
     <li class="red">aaa</li>
      <li>aaa</li>
    </ul>
    <input type="button" id="del" value="删除" />
        <br />
        <br />
    </div>

   
    <div>
    
    <select style="float:left;width:200px" id ="select1" multiple="multiple">
    <option>添加</option>
    <option>删除</option>
    <option>修改</option>
    <option>查询</option>
    <option>打印</option>
    </select>
    
    <div style="float:left;width:100px">
    <input style="float:left;width:100%" id="moveToRight" type="button" value=">" />
    <input style="float:left;width:100%" id="moveToLeft"type="button" value="<" />
    <input style="float:left;width:100%" id="moveToRightAll"type="button" value=">>" />
    <input style="float:left;width:100%" id="moveToLeftAll"type="button" value="<<" />
    </div>
    
    <select style="float:left;width:200px" id ="select2" multiple="multiple"> 
    </select>
    
    </div>
    
    
    </form>
</body>
</html>

Cybernet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记--remove()删除选择的节点,applend() 添加到节点

.red{ background-color:Red;} /* remove()删除选择的节点,applend() 添加到节点注意： ========================================================== 1，remove 方法有返回值；va
复制链接

扫一扫