<!DOCTYPE html>
<html>
<head>
<!-- 复制下来慢慢看。 -->
<title></title>
<!--DOM 文档对象模型(document object model)
1、创建节点 $()方法来创建一个节点.将该对象通过一些方法将他们插入html页面中
2、插入节点 内部插入节点和外部插入节点。
内部: 1)$().prepend() 表示在所选元素内部的开始位置插入元素 $(A).prepend(B) 往A内前插入B
$().prependTo() 表示将所选元素向某元素开始位置插入 $(A).prependTo(B) 向B内前插A
2)$().append() 表示在所选元素内部的末尾插入内容 $(A).append(B) 往A内后插入B
$().appendTo() 表示将所选元素向某元素末尾插入 $(A).appendTo(B) 向B内后插入A
外部： 3)$().before() 表示在所选元素外部前插入元素 $(A).before(B) 往A外前插入B
$().insertBefore()表示将所选元素插入到某元素外部前 $(A).insertBefore(B) 向B外前插入A
4)$().after() 表示在所选元素外部后插入元素 $(A).alter(B) 往A外后插入B
$().insertAfter()表示将所选元素插入到某元外部后 $(A).insertAfter(B) 往B外后插入A
3、复制节点
clone()方法 复制一个节点
格式：$(A).clone()
该方法可以添加一个布尔类型的参数，默认值是false
布尔类型参数决定了绑定事件是否复制，
如果false表示只复制节点
如果true即复制节点也复制绑定事件
4、替换节点
1、replaceWith() 将所选元素替换为其他元素，格式：$(A).replaceWith(B) 用B替换A
2、replaceAll() 格式：$(A).replaceAll(B) 用A替换B
5、包含节点
6、遍历节点
each()实现jQuery 下的节点遍历
格式：$().each(function(index)) callback可以接收参数，参数应该是索引值
7、删除节点
1)remove() $(A).remove();
2)detach() $(A).detach();
3)empty() $(A).empty();
区别： remove 彻底地删除元素(不仅删除元素，还删除了该元素的绑定事件) 把对象移除，页面已无此对象，绑定节点也没了。但在代码里，对象和值还在
detach 半彻底的删除元素(只删除元素，不删除绑定事件) ---把对象卸下 ---页面已无此对象
empty() 清空元素内部所有节点（针对全部情况）--望文生义 把对象清空-清空了-但对象还在页面。页面代码也有此对象，但无值
-->
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
var $li = "<li>****</li>";
$("ul").append($li);
$($li).appendTo("ul");
});
});
$(function() {
$("#btn2").click(function() {
var $li = "<h3>22222222222</h3>";
$("p").before($li);
});
});
$(function() {
$("#btn3").click(function() {
$("ul li:eq(3)").remove();
});
});
$(function() {
$("#btn4").click(function() {
$("ul li:eq(3)").detach();
});
});
$(function() {
$("#btn5").click(function() {
$("ul li:eq(3)").empty();
});
});
$(function() {
$("#btn9").click(function() {
$("li").each(function(index) {
var txt = "这是第 " + (index + 1) + "个li元素"
$(this).text(txt);
})
});
});
$(function() {
var $div2 = $("#div2");
alert($("#div2").html());
$("#detach").on("click", function() {
// $div2.detach();
$div2.remove();
alert($div2.text());
});
$("#empty").on("click", function() {
$div2.empty();
alert($("#div2").html());
});
$("#back").on("click", function() {
$("#div1").prepend($div2);
alert($("#div2").html());
});
$($div2).on("click", function() {
alert($("#div2").html());
});
$("#reset").on("click",function(){
$("#div2").text("新赋值");
});
});
</script>
<style type="text/css">
#div2 {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<input id="btn1" type="button" value="添加" />
<p>hahahahahahh</p>
<input id="btn2" type="button" value="添加" />
<input id="btn3" type="button" value="删除1" />
<input id="btn4" type="button" value="删除2" />
<input id="btn5" type="button" value="删除3" />
<input id="btn9" type="button" value="遍历" />
<hr>
<div id="div1">
<div id="div2">
div2
</div>
<div id="div3">
div3
</div>
</div>
<input value="detach" id="detach" type="button" />
<input value="back" id="back" type="button" />
<input value="empty" id="empty" type="button" />
<input value="reset" id="reset" type="button" />
</body>
</html>
扫一扫
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
