<!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>js操作对象
原文地址：http://www.cnblogs.com/wwlw/p/7773712.html