<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>
jQuery学习笔记--remove()删除选择的节点,applend() 添加到节点
最新推荐文章于 2021-06-24 08:54:15 发布