jQuery的DOM操作
假设页面上有一些元素如下:
<body>
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
引入外部的jQuery资源:
<script src="../jquery.js"></script>
1.创建元素:
2.插入元素:
// append:要插入指定父元素的最后一个子元素
// $("#box")被div插入了
$("#box").append(div);
// 把div插入到$("#box")中,这里的效果与上面的效果一样
div.appendTo($("#box"));
// prepend:插入指定父元素的第一个子元素
$("#box").prepend(div);
div.prependTo($("#box"));
// before:给指定元素,在上面添加一个兄弟
$("#box").before(div);
// after:给指定元素,在下面添加一个兄弟
$("#box").after(div);
3.元素的删除:
// 删除指定元素
$(".box").remove();
// 删除所有子元素
$("#box").empty();
4.元素的修改(替换元素):
// 获取标签自身同时删除自己
var s = $("#box").replaceWith();
console.log(s);
// 传字符的参数,会修改标签
$("#box").replaceWith("<span id='" + $("#box").attr("id") + "'>" + $("#box").html() + "</span>");
5.元素的克隆:
$("#box").click(function(){
console.log(1);
})
// 只克隆结构
var b = $("#box").clone();
$("body").append(b);
// 除了克隆结构,还会克隆事件
var b = $("#box").clone(true);
$("body").append(b);
注意: 上述的每个方法中又有不同的情况,在使用这些方法时,根据需求选择合适的情况