JS——appendTo（）方法

来源：互联网发布：数据分析测试题编辑：程序博客网时间：2024/05/22 15:45

【前言】

本篇博客将讲一个利用appendTo（）方法做的一个“权限管理”的例子，听到“权限管理”四字似乎有点高大上，其实就是把一个元素里内容追加到另一个元素的尾部，详情请见下文！

【正文】

一、简析

1、appendTo()

◆ appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
◆ append()方法和 appendTo() 方法执行的任务相同

◆append()方法和 appendTo()方法的不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

◆ 例如：$(A).appendTo(B)，即把A追加到B中

2、例子思路：

视频中给例子起的名字叫“权限管理”，其实就是利用appendTo把第一个框中的内容追加到第二个框中，点击“>”或“<”是把选中的一个或多个追加过去，点击“>>”或“<<”是把全部的追加过去

注意：例子中的multiple="multiple"表示多选

二、代码

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <!--样式-->    <style>        * {            font-size:20px;        }        select {            width:150px;            height:120px;        }        #selectFrom,#selectTo,#btns{            float:left;            margin-right :10px;        }        #btns input{            font-size:20px;            width:80px;            height:30px;        }    </style>    <!--引用JQuery-->    <script src="scripts/jquery-1.7.1.js"></script>    <script>        $(function () {            //  >方法（左边选中的复制到右边）:"#btns input:first"中间空格不能丢，表示input中的第一个            $("#btns input:first").click(function () {                //获得左边选中项，点击>后选中项就复制到右边                $(":selected").appendTo("#selectTo");            });            //   <方法（右边选中的回到左边）            $("#btns input:eq(1)").click(function () {                //获得左边选中项，点击>后选中项就复制到右边                $(":selected").appendTo("#selectFrom");            });            //   >>方法（左边的全到右边）            $("#btns input:eq(2)").click(function () {                //获得左边选中项:左边就全到右边去了，左边就没了                $("#selectFrom *").appendTo("#selectTo");            });                       //  <<方法（右边的全到左边）            $("#btns input:eq(3)").click(function () {                //获得左边选中项:左边就全到右边去了，左边就没了                $("#selectTo *").appendTo("#selectFrom");            });            //DOM结构的特点            //每一个节点有几个父节点            //在js中，由于其动态特征，只要设置节点的父节点，就会从原来的节点上移除        });    </script></head><body>     <!--multiple="multiple"表示多选-->    <select size="5" id="selectFrom" multiple="multiple">           <option >权限1</option>        <option >权限2</option>        <option >权限3</option>        <option >权限4</option>        <option >权限5</option>        <option >权限6</option>        <option >权限7</option>        <option >权限8</option>        <option >权限9</option>        <option >权限10</option>    </select>    <div id="btns">        <!--<br />会让所有竖起来，办法就是用float-->    <input type="button" name="name" value=">" /><br />          <input type="button" name="name" value="<" /><br />    <input type="button" name="name" value=">>" /><br />    <input type="button" name="name" value="<<" />        </div>    <select size="5" id="selectTo">    </select>    <!--clear:both该属性的值指出了不允许有浮动对象的边。作用：清除同行元素，不允许其它元素与之在一行内。-->    <div style="clear:both;"></div></body></html>

三、效果图：

阅读全文

0 0