节点操作(上)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#txt {
color: #FF0000;
}
</style>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<!-- 节点操作：
* 1.创建节点
* DOM：document.createElement("标签名");
* jQuery：$("<h1 title='标题'>我是一个h1标签</h1>");
* 2.添加节点
* DOM:
* 父元素节点.appendChild(子元素节点); 在父元素内部末尾追加一个节点
* 父元素节点.insertBefore(子元素节点, 参照节点) 在父元素中的参照节点前面添加一个节点
* jQuery：
* 在内部添加节点: 参照了父元素节点
* -- 在内部父节点末尾插入节点
* 父节点.append(需要添加的子节点);
* 需要添加的子节点.appendTo(父节点);
* -- 在内部父节点开头添加节点
* 父节点.prepend(需要添加的子节点);
* 需要添加的子节点.prependTo(父节点);
* 在外部添加节点：不需要参照父节点
* -- 在参照元素前面添加节点
* 参照节点.before(需要添加的节点);
* 需要添加的节点.insertBefore(参照节点);
* -- 在参照元素后面添加节点
* 参照节点.after(需要添加的节点);
* 需要添加的节点.insertAfter(参照节点);
* 3.删除节点
* 和DOM的删除节点不同，jQuery删除节点直接用节点本身.remove()方法
* -- jQuery对象.remove(); 删除这个“jQuery对象”
* -- jQuery对象.remove("筛选(CSS选择器)"); 删除符合筛选条件的“jQuery对象”
* 例如：$("#box>h3").remove(".cont");
* 4.清空节点：清空该节点的文本内容和子节点
* -- jQuery对象.empty();
* 不建议使用empty方法来清空节点，因为js引擎会遍历所有匹配的元素,再依次调用remove()删除
* 例如$("#box>span")，先要找到所有的span，再遍历这些span元素，然后依次调用remove()方法
* 一个个的删
* 建议使用html("")代替empty()
-->
<div id="box">
我是普通文本<br/>
<span>我是第一个span标签</span>
<span id="second">我是第二个span标签</span>
<div id="txt">我是div标签</div>
<h3 class="cont">我是第1个h3元素</h3>
<h3>我是第2个h3元素</h3>
<h3 class="cont">我是第3个h3元素</h3>
<p>
<div>我是p内部的div</div>
</p>
</div>
<button id="btn1">末尾追加一个元素[内部]</button>
<button id="btn2">开头添加一个元素[内部]</button>
<button id="btn3">在参照元素前插入一个元素[外部]</button>
<button id="btn4">在参照元素后插入一个元素[外部]</button>
<button id="btn5">删除节点</button>
<button id="btn6">清空节点（删除文本和后代节点）</button>
<button id="btn7">删除ul里的li节点</button>
<hr>
畅销手机品牌
<ul style="background-color: yellow;">
<li>苹果</li>
<li class="phone">三星</li>
<li>小米</li>
<li class="phone">魅族</li>
<li>华为</li>
</ul>
<script>
$("#btn7").click(function(){
//$("ul>li").remove();
$("ul>li").remove(".phone");
});
$("#btn1").click(function(){
//创建一个元素，使用$(html字符串)
var $h2=$("<h2>我是h2元素</h2>");
//$("#box").append($h2);
//子节点.appendTo(父元素)
$h2.appendTo( $("#box"));
})
$("#btn2").click(function(){
//创建一个元素，使用$(html字符串)
var $h1=$("<h1>我是h1元素</h1>");
// 开头添加：父节点. prepend(子节点)
// $("#box").prepend($h1);
//子节点，prependTo(父节点)
$h1.prependTo($("#box"));
})
$("#btn3").click(function(){
//在 id="txt"的div前面插入一个span元素
var $span=$("<span style='color:red'>我是第3个span</span>")
$("#txt").before($span);
})
$("#btn4").click(function(){
//在 id="txt"的div后面插入一个p元素
var $p=$("<p style='color:blue'>我是1个段落</p>")
$("#txt").after($p);
})
$("#btn5").click(function(){
//删除id=second的span元素
// $("span#second").remove();
//删除div中的class="cont"的h3元素
$("#box>h3").remove(".cont");
})
$("#btn6").click(function(){
// /删除id=box的div里面所有的span
$("#box>span").empty();
})
</script>
</body>
</html>
节点操作(下)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: yellow;
}
#des {
width: 200px;
background-color: blue;
}
</style>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
/**
* 复制节点:
* 语法：需要复制的节点.clone();
* 返回一个复制好的jQuery对象(副本)，包含了子节点。
* 如果clone(true)携带参数为true，那么代表把节点的事件一起复制。
* 如果没有带参数，那么不会复制节点的事件
*/
$("#btn").click(function(){
// 复制节点
var $copy= $("#src").clone();
//将复制好的jQUery对象添加到des元素中
$("#des").append($copy);
})
$("#src").click(function(){
console.log("src元素的单击");
})
})
</script>
</head>
<body>
<div id="src">
<p>我是一个p标签</p>
</div>
<hr>
<div id="des">
</div>
<button id="btn">复制节点</button>
</body>
</html>
遍历节点(祖先)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent {
width: 400px;
height: 400px;
border:1px solid yellow;
}
#parent_2 {
width: 200px;
height: 200px;
border:1px solid green;
}
#child {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div id="parent">
<div id="parent_2">
<div id="child">我是child</div>
</div>
</div>
<script>
/**
* 节点遍历操作：
* 1.节点遍历-父元素
* -- 找直接父元素
* 语法：子元素.parent()
* -- 找祖先元素
* 语法: 子元素.parents() 找到全部的父辈元素
* 语法: 子元素.parents("CSS选择器"): 找到指定的父辈元素
*/
$("#child").parent().css("background-color","yellow");
</script>
</body>
</html>
遍历节点(后代)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent {
width: 400px;
height: 400px;
background-color: yellow;
}
#child {
width: 250px;
height: 250px;
background-color: red;
}
</style>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div id="parent">
<div id="child">
<p>我是一个p标签</p>
<h1>strong</h1>
</div>
<p>我是一个p标签</p>
</div>
<script>
/**
* 节点遍历操作：
* 1.节点遍历-父元素
* -- 找直接父元素
* 语法：子元素.parent()
* -- 找祖先元素
* 语法: 子元素.parents() 找到全部的父辈元素
* 语法: 子元素.parents("CSS选择器") 找到指定的父辈元素
* 2.节点操作-后代
* -- 找直接子元素(可以有多个)
* 语法：父元素.children() 找到全部的亲儿子
* 语法：父元素.children("CSS选择器") 找到指定的亲儿子
* -- 找后代元素
* 语法：父元素.find("*") 找到全部的后代元素
* 语法：父元素.find("CSS选择器") 找到指定的后代元素
*
*/
// console.log($("#child").children("p"));
console.log($("#parent").find("p"));
</script>
</body>
</html>
