jQuery 节点操作
1.动态创建元素
// $()函数的另外一个作用:动态创建元素
var $spanNode = $(“<span>我是一个span元素</span>”);
var node = $(“#box”).html(“<li>我是li</li>”);
2.添加元素
在元素的最后一个子元素后面追加元素:
append()(重点)
作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以)
如果是页面中存在的元素,那么调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了。
如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去。
常用参数:htmlString 或者 jQuery对象
不常用操作:(用法跟append()方法基本一致)
1.appendTo()
作用:同append(),区别是:把$(selector)追加到node中去
$(selector).appendTo(node);
2.prepend()
作用:在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
3.after()
作用:在被选元素之后,作为兄弟元素插入内容或节点
$(selector).after(node);
4.before()
作用:在被选元素之前,作为兄弟元素插入内容或节点
$(selector).before(node);
3.html创建元素
作用:设置或返回所选元素的html内容(包括 HTML 标记)
设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的 innerHTML属性相同
// 动态创建元素
$(selector).html(‘<span>***</span>’);
// 获取html内容
$(selector).html();
4.清空元素
// 清空指定元素的所有子元素(光杆司令)
// 没有参数
$(selector).empty();
$(selector).html(“”);
// “自杀” 把自己(包括所有内部元素)从文档中删除掉
$(selector).remove();
5.复制元素
// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();
作者做了个小小的案例让大家看一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select{
width: 170px;
height: 200px;
font-size: 15px;
background-color: skyblue;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<select name="" id="sel1" multiple>
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">芒果</option>
<option value="3">菠萝</option>
</select>
<button>>>></button>
<button><<<</button>
<button>></button>
<button><</button>
<select name="" id="sel2" multiple>
</select>
<script>
$(function () {
$("button").eq(0).click(function () {
$("#sel2").append($("#sel1 option"))
});
$("button").eq(1).click(function () {
$("#sel1").append($("#sel2 option"))
});
$("button").eq(2).click(function () {
$("#sel2").append($("#sel1 option:selected"))
});
$("button").eq(3).click(function () {
$("#sel1").append($("#sel2 option:selected"))
});
})
</script>
</body>
</html>
效果展示