1、查找节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>01_查找节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script></head><body><ul><li id="bj"></li><li id="tj" name="tianjin">天津</li></ul></body><script type="text/javascript">
// alert($("#bj").text());
//
// $("#bj").text("北京");
// alert($("#bj").text());alert($("#bj").attr("name"));$("#bj").attr("name","beijing");alert($("#bj").attr("name"));$("#bj").removeAttr("name");alert($("#bj").attr("name"));</script></html>
2、创建节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>02_创建节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script></head><body><ul id="city"><li id="bj" name="beijing">北京</li></ul></body><script type="text/javascript">//在city下增加<li id="tj" name="tianjin">天津</li>节点//1 创建<li id="tj" name="tianjin">天津</li>
// //1 创建元素节点<li></li>
// var $li = $("<li></li>"); //创建元素节点:$(HTML代码) 标签闭合
//
// //2 设置属性
// $li.attr("id","tj");
// $li.attr("name","tianjin");
//
// //3 设置文本内容
// $li.text("天津");var $li = $("<li id='tj' name='tianjin'>天津</li>");//2 获取id="city"标签//3 添加$("#city").append($li);</script></html>
3、内部插入节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>03_内部插入节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script></head><body><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><ul id="love"><li id="fk" name="fankong">反恐</li><li id="xj" name="xingji">星际</li></ul><div id="foo1">Hello1</div> </body>
<script type="text/javascript">
//* append(content) :向每个匹配的元素的内部的结尾处追加内容//append后面的元素插入到append前面的元素的后面
// $("#bj").append($("#fk"));//* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处//appendTo前面的元素插入到appendTo后面的元素的后面
// $("#bj").appendTo($("#fk"));//* prepend(content):向每个匹配的元素的内部的开始处插入内容//prepend后面的元素插入到prepend前面的元素的前面$("#bj").prepend($("#fk"));//* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处//prependTo前面元素插入到prependTo后面元素的前面
// $("#bj").prependTo($("#fk"));</script></html>
4、外部插入节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>04_外部插入节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script></head><body><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><p id="p3">I would like to say: p3</p><p id="p2">I would like to say: p2</p><p id="p1">I would like to say: p1</p></body>
<script type="text/javascript">
//* after(content) :在每个匹配的元素之后插入内容//after后面的元素插入到after前面的元素的后面
// $("#bj").after($("#p2"));//* before(content):在每个匹配的元素之前插入内容 //before后面的元素插入到before前面的元素的前面$("#bj").before($("#p2"));//* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面//insertAfter前面的元素插入到insertAfter后面的元素的后面
// $("#bj").insertAfter($("#p2"));//* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 //insertBefore前面的元素插入到insertBefore后面的元素的前面
// $("#bj").insertBefore($("#p2"));</script></html>
5、删除节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>05_删除节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script></head><body><ul id="city"><li id="bj" name="beijing">北京<p>海淀区</p></li><li id="tj" name="tianjin">天津<p>河西区</p></li><li id="cq" name="chongqing">重庆</li></ul><p class="hello">Hello</p> how are <p>you?</p> </body>
<script type="text/javascript">//删除<li id="bj" name="beijing">北京</li>$("#bj").remove();//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).$("#tj").empty();alert($("#tj").attr("name"));</script></html>
6、复制节点
<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>06_复制节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script></head><body><button>保存</button><br> <p>段落</p></body><script type="text/javascript">//button增加事件$("button").click(function(){alert("button");});//克隆button 追加到p上 ,但事件不克隆//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为$("button").clone(true).appendTo($("p"))//克隆button 追加到p上 ,但事件也克隆//clone(true): 复制元素的同时也复制元素中的的事件 </script>
</html>
7、替换节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>07_替换节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script></head><html><p>段落</p><p>段落</p><p>段落</p><button>保存</button></html>
<script type="text/javascript">//$("button")用 <p>tttttttt</p>替换$("button").replaceWith($("<p>tttttttt</p>"));// p 用 <button>保存</button> 替换$("<button>保存</button>").replaceAll($("p"));</script>
</html>
8、样式操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>08_样式操作.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><style type="text/css">.one{width: 200px;height: 140px;margin: 40px;background: red;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div.mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style></head><body><input type="button" value="采用属性增加样式" id="b1"/><input type="button" value=" addClass" id="b2"/><input type="button" value="removeClass" id="b3"/><input type="button" value=" 切换样式" id="b4"/><input type="button" value=" hasClass" id="b5"/><h1>天气冷了</h1><h2>天气又冷了</h2><br><div id="mover">动画</div><br><span class="spanone"> span</span></body>
<script type="text/javascript">
//<input type="button" value="采用属性增加样式" id="b1"/>$("#b1").click(function(){$("#mover").attr("class","one");});//<input type="button" value=" addClass" id="b2"/>$("#b2").click(function(){$("#mover").addClass("mini");});//<input type="button" value="removeClass" id="b3"/>$("#b3").click(function(){/** removeClass()* * 不传:删除所有样式* * 传递:删除指定样式*/$("#mover").removeClass();});//<input type="button" value=" 切换样式" id="b4"/>$("#b4").click(function(){//toggleClass():切换样式是在没有样式与指定样式之间$("#mover").toggleClass("one");});//<input type="button" value=" hasClass" id="b5"/>$("#b5").click(function(){//hasClass():是判断是否含有某个具体样式alert($("#mover").hasClass("one"));});</script>
</html>
9、遍历节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>09_遍历节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script></head><body><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="nj" name="nanjing">南京</li></ul></body><script type="text/javascript">//获取北京节点的父节点//alert($("#bj").parent().attr("id"));//获取city标签下的所有子节点的个数//alert($("#city").children().length);//获取天津节点的上一个兄弟节点和下一个兄弟节点
// alert($("#tj").prev().attr("name"));
// alert($("#tj").next().attr("name"));//获取city标签下所有li标签alert($("#city").find("li").length);</script></html>
10、包裹节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>10_包裹节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script></head><body><strong title="jQuery">jQuery</strong><strong title="jQuery">jQuery</strong></body><script type="text/javascript">//jQuery代码如下：$("strong").wrap("<b></b>");/** 得到的结果如下* <b><strong title="jQuery">jQuery</strong></b>* <b><strong title="jQuery">jQuery</strong></b>*///jQuery代码如下：$("strong").wrapAll("<b></b>");/** 得到的结果如下* <b>* <strong title="jQuery">jQuery</strong>* <strong title="jQuery">jQuery</strong>* </b>*///jQuery代码如下：$("strong"). wrapInner("<b></b>");/** 得到的结果如下* <strong title="jQuery"><b>jQuery</b></strong>* <strong title="jQuery"><b>jQuery</b></strong>*/</script></html>