1 append追加
function myclick(){
var len = $("li").length;
//在ul内追加jQuery的li对象
var liObj = $("<li>列表项"+(len+1)+"</li>")
$("ul").append(liObj);
}
prepend 在前面追加
2 菜单项移动小练习
<script type="text/javascript">
$(function(){
})
//右移
function rightMove(){
//获得左面被选中的option
$("#perm option").each(function(){
var opt = $(this).attr("selected");
if(opt=="selected"){
$("#selPerm").append($(this));
}
})
}
//右移全部
function rightMoveAll(){
$("#perm option").each(function(){
$("#selPerm").append($(this));
})
}
//左移
//获得左面被选中的option
function leftMove(){
$("#selPerm option").each(function(){
var opt = $(this).attr("selected");
if(opt=="selected"){
$("#perm").append($(this));
}
})
}
function leftMoveAll(){
$("#selPerm option").each(function(){
$("#perm").append($(this));
})
}
</script>
<style type="text/css">
select{
width:200px;
height: 200px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="perm" multiple="multiple">
<option>登陆</option>
<option>员工管理</option>
<option>部门管理</option>
<option>订单管理</option>
</select>
</td>
<td>
<input type="button" value=">" onclick="rightMove()"/><br>
<input type="button" value=">>" onclick="rightMoveAll()"/><br>
<input type="button" value="<" onclick="leftMove()"/><br>
<input type="button" value="<<" onclick="leftMoveAll()"/>
</td>
<td>
<select id="selPerm" multiple="multiple">
</select>
</td>
</tr>
</table>
</body>
效果如下：
此移动效果为剪切，[$(this).clone()]效果为复制。
3 外部节点追加
4 节点删除
小练习
function add(){
var username= $("#username").val();
var age= $("#age").val();
var address= $("#address").val();
//创建一行
var trObj = $("<tr><td><input type=\"checkbox\"></td><td>"+username+"</td><td>"+age+"</td><td>"+address+"</td><td><a href=\"javascript:void(0)\" onclick=\"del(this)\">删除</a></td></tr>")
$("#mytb").append(trObj);
}
// 删除
function del(obj){
//找父节点
$(obj).parent().parent().remove();
}
// 全选删除
function checkAll(obj){
var checkAllStatus = $(obj).attr("checked");
if(checkAllStatus == 'checked'){
$("tbody input").attr("checked","checked");
}else{
$("tbody input").removeAttr("checked");
}
}
function delBatch(){
$("tbody input:checked").parent().parent().remove();
}
</script>
<style type="text/css">
table{
width:800px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名： <input id="username" type="text" ></td>
<td>年龄： <input id="age" type="text" ></td>
<td>地址： <input id="address" type="text" ></td>
<td>
<input value="添加" type="button" onclick="add()" >
<input value="批量删除" type="button" onclick="delBatch()" >
</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<td><input id="checkAll" type="checkbox" onchange="checkAll(this)"></td>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
<td>操作</td>
</tr>
</thead>
<tbody id="mytb">
<tr>
<td><input type="checkbox"></td>
<td>大德</td>
<td>20</td>
<td>长春</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</tbody>
</table>
</body>
效果如下：
5 节点克隆（复制）
[clone()不带事件复制]，[clone(true)带事件]
