<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Dom的分类</title>
<!--
xml dom :针对于 xml文件的操作
html dom :处理html页面 document.forms[0]
css dom :操作css element.style.属性名
dom core:核心！只要是支持dom编程语言都可以使用！
javaSc对ript（jQuery）对上面的dom操作都提供了支持！
jQueryjavaScript中的dom操作 进行了封装！
-->
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>节点的操作</title>
</head>
<body>
<ul>
<li>大家辛苦了</li>
<li>不交作业了</li>
<li>就是不交</li>
<li>气死你</li>
<li>伤害了谁？</li>
</ul>
<button type="button" id="addLi">新增子节点</button>
<button type="button" id="addUl">新增同辈节点</button>
<button type="button" id="updateLi">替换下标为2节点</button>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#addLi").click(function(){
//创建一个节点li
var $newLi=$("<li>新增的作业</li>");
//把新增的节点放置到 ul的最后 $("ul").append($newLi); $newLi.appendTo($("ul"));
//把新增的节点放置到 ul的最前面
$("ul").prepend($newLi); //等同于 $newLi.prependTo($("ul"));
})
$("#addUl").click(function(){
//创建一个节点ul
var $newUl=$("<ul><li>新增1</li><li>新增2</li></ul>")
//把新增的ul放置在我们ul之后 $("ul").after($newUl); $newUl.insertAfter($("ul"));
//把新增的ul放置在我们ul之前 $("ul").before($newUl);
$newUl.insertBefore($("ul"));
})
/**
* 获取li下标值是2的元素 替换
* $(节点1).replaceWith($(替换节点))
* 等同于
* $(替换节点).replaceAll($(节点1))
*/
$("#updateLi").click(function(){
//创建替换的节点
var $updateLi=$("<li style='color: red'>我是替换节点</li>");
//获取下标是2的元素$("li:eq(2)").replaceWith($updateLi);
//替换所有元素
$("li:eq(0)").replaceAll($("li:eq(4)"));
})
//验证 clone
$("li:eq(2)").mouseover(function(){
$(this).css({"background":"red"});
})
//向ul中clone 节点3
$("li:eq(2)").clone().appendTo("ul");
// $("li:eq(2)").clone(true).appendTo("ul"); 会绑定事件，样式
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>删除节点</title>
<!--
empty(), remove(), detach()三者的区别
empty():只能清空节点的内容和子元素！节点本身不会被删除！
remove():
01.删除整个节点，包含自身和子元素！
02.删除了节点所对应的事件
detach():
01.删除整个节点，包含自身和子元素！
02.不会删除节点所对应的事件
-->
</head>
<body>
<div id="main">
main
<div id="first">first
<div>里面的子元素</div>
</div>
</div>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var $first=$("#first");
$first.click(function(){
alert("first");
})
// $first.empty();
// $first.remove();
$first.detach();
$first.prependTo("body");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>attr属性</title>
<!--
attr():
01.如果只有一个参数 ，就是获取对应属性的值
02.如果有两个参数 ，就是设置对应属性的值
-->
</head>
<body>
<img src="../images/cat.jpg">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("img").click(function(){
//获取元素指定的属性值
var $src= $(this).attr("src");
alert($src);
//增加鼠标悬停时的提示文字
$(this).attr({"title":"这是一只可爱的小猫咪","width":"200px"});
//清除对应的属性值
$(this).removeAttr("src");
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>获取同辈和父辈元素</title>
</head>
<body>
body
<div id="main">
main
<div id="first1">
first1
<div id="second1">
second1
<div id="third1">
third1
</div>
</div>
</div>
<div id="first2">
first2
<div id="second2">
second2
</div>
</div>
<div id="first3">
first3
<div id="second3">
second3
</div>
</div>
</div>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//获取main的子元素个数
alert("main的子元素个数"+$("#main").children().length);
//设置first1之后的兄弟节点的样式
// $("#first1").next().css({"color":"red"});
//设置first2之前的兄弟节点的样式
//$("#first2").prev().css({"color":"red"});
//所有同辈元素 之前和之后
//$("#first2").siblings().css({"color":"red"});
//设置first1的父级元素
// $("#first1").parent().parent().css({"color":"red"});
//设置third1的祖先元素
$("#third1").parents().css({"color":"pink"});
})
</script>
</body>
</html>
