Jquery之选择器与方法综合练习

来源：互联网发布：万网购买域名能退款吗编辑：程序博客网时间：2024/05/16 14:36

首先创建test.html文件，内容如下：
这里用的jquery版本是jquery-1.8.2.js,

http://download.csdn.net/detail/broccoli2/9922753

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>    <div>   <!-- multiple表示可以多选 -->        <select style="width:60px" multiple size="10" id="leftID">            <option>选项A</option>            <option>选项B</option>            <option>选项C</option>            <option>选项D</option>            <option>选项E</option>            <option>选项F</option>            <option>选项G</option>            <option>选项H</option>            <option>选项I</option>            <option>选项J</option>        </select>    </div>    <div style="position:absolute;left:100px;top:60px">        <input type="button" value="批量右移" id="rightMoveID"/>    </div>    <div style="position:absolute;left:100px;top:90px">        <input type="button" value="全部右移" id="rightMoveAllID"/>    </div>    <div style="position:absolute;left:220px;top:20px">         <select multiple size="10" style="width:60px" id="rightID">        </select>    </div>  </body>  <script type="text/javascript">        //双击右移        //定位左边的下拉框，同时添加双击事件        $("#leftID").dblclick(function(){            //获取双击时选中的option标签            var $option = $("#leftID option:selected");            //将选中的option标签移动到右边的下拉框中            $("#rightID").append( $option );        });        //批量右移        //定位批量右移按钮，同时添加单击事件        $("#rightMoveID").click(function(){            //获取左边下拉框中选中的option标签            var $option = $("#leftID option:selected");            //将选中的option标签移动到右边的下拉框中            $("#rightID").append( $option );        });             //全部右移        //定位全部右移按钮，同时添加单击事件        $("#rightMoveAllID").click(function(){            //获取左边下拉框中所有的option标签            var $option = $("#leftID option");            //将选中的option标签移动到右边的下拉框中            $("#rightID").append( $option );        });  </script></html>

阅读全文

0 0