jQuery控制页面
一、标记的属性
? 1.each()遍历元素
??? each(callback)方法主要用于对选择器中的元素进行遍历，它接受一个函数作为参数，该函数接受一个参数，指代元素的序号，可以配合this关键字来使用。index为元素所处的序号（从零开始计数）。
? 2.获取属性的值
??? attr(name)方法可以得到某个对象的某个特定属性的值。还可以通过位置选择器来指定某个元素的属性值(:eq(0))。
? 3.设置属性的值
? ? (1) attr(name,value) 通用表达式
? ? (2) attr(name,fn) 函数
? 4.删除属性
??? removeAttr(name)方法将删除某属性值。$("button").romoveAttr("disabled");removeAttr(name)删除属性相当于HTML的标记中不设置该属性，并不是取消了该标记的这个特点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>each()方法</title><style type="text/css"><!--img{border:1px solid #003863;}.myClass1{border:1px solid #750037;width:120px; height:80px;}.myClass2{background-color:#ffcdfc;}p{color:blue; cursor:help;font-size:13px;margin:0px; padding:5px;}.highlight{background-color:#FFFF00;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">//1.each function each(){ $("img").each(function(index){ this.title = "这是第" + index + "幅图，id是：" + this.id; });}//2.attr em eq function attr(){ var titleStr =$("em:eq(1)").attr("title"); $("span").text(titleStr);}//3.设置属性的值function attrValue(){$("button:gt(0)").attr("disabled","disabled");}//4.设置属性的值function attrEach(){$("div").attr("id",function(index){return index;}).each(function(){$(this).find("span").html("(id=" + this.id + ")");});}</script></head><body><img src="01.jpg" id="Tsinghua01"><img src="02.jpg" id="Tsinghua02"><img src="03.jpg" id="Tsinghua03"><img src="04.jpg" id="Tsinghua04"><img src="05.jpg" id="Tsinghua05"><input type="button" value="1.each" onclick="each();"><input type="button" value="5.attrMany" onclick="attrMany();"><p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p><p>在树林里面<em title="running">跑啊跑</em>...</p><p>title属性的值是：<span></span></p><input type="button" value="2.attr" onclick="attr();"><button onclick="DisableBack()">第一个Button</button> <button>第二个Button</button> <button>第三个Button</button> <input type="button" value="3.attrValue" onclick="attrValue();"><div>第0项 <span></span></div><div>第1项 <span></span></div><div>第2项 <span></span></div><input type="button" value="4.attrEach" onclick="attrEach();"></body></html>?二、设置元素的样式
? 1.添加、删除CSS类别
??? addClass(names)，类别之间可以用空格分离。
??? removeClass(names)，类别之间可以用空格分离。
? 2.在类别间动态切换
??? 用toggleClass()方法动态切换CSS类别，toggleClass()方法中，只能设定一种CSS类别，不能同时对多个CSS类别进行切换。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>each()方法</title><style type="text/css"><!--img{border:1px solid #003863;}.myClass1{border:1px solid #750037;width:120px; height:80px;}.myClass2{background-color:#ffcdfc;}p{color:blue; cursor:help;font-size:13px;margin:0px; padding:5px;}.highlight{background-color:#FFFF00;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">//6.同时添加多个CSS类别function addManyCSS(){$("div").addClass("myClass1 myClass2");}//7.删除多个CSS类别function removeManyCSS(){$("div").removeClass("myClass1 myClass2");}//8.CSS类别切换function toggleClass(){$("p").toggleClass("highlight");}</script></head><body><p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p><p>在树林里面<em title="running">跑啊跑</em>...</p><p>title属性的值是：<span></span></p><div></div><input type="button" value="6.同时添加多个CSS类别" onclick="addManyCSS();"><input type="button" value="7.删除多个CSS类别" onclick="removeManyCSS();"><p>高亮？</p><input type="button" value="8.CSS类别切换" onclick="toggleClass();">?</body></html>?eg：伸缩菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>伸缩的菜单，用jQuery重写</title><style><!--body{background-color:#ffdee0;}#navigation {width:200px;font-family:Arial;}#navigation > ul {list-style-type:none;/* 不显示项目符号 */margin:0px;padding:0px;}#navigation > ul > li {border-bottom:1px solid #ED9F9F;/* 添加下划线 */}#navigation > ul > li > a{display:block;/* 区块显示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515;/* 左边的粗红边 */border-right:1px solid #711515;/* 右侧阴影 */}#navigation > ul > li > a:link, #navigation > ul > li > a:visited{background-color:#c11136;color:#FFFFFF;}#navigation > ul > li > a:hover{/* 鼠标经过时 */background-color:#990020;/* 改变背景色 */color:#ffff00;/* 改变文字颜色 */}/* 子菜单的CSS样式 */#navigation ul li ul{list-style-type:none;margin:0px;padding:0px 0px 0px 0px;}#navigation ul li ul li{border-top:1px solid #ED9F9F;}#navigation ul li ul li a{display:block;padding:3px 3px 3px 0.5em;text-decoration:none;border-left:28px solid #a71f1f;border-right:1px solid #711515;}#navigation ul li ul li a:link, #navigation ul li ul li a:visited{background-color:#e85070;color:#FFFFFF;}#navigation ul li ul li a:hover{background-color:#c2425d;color:#ffff00;}#navigation ul li ul.myHide{/* 隐藏子菜单 */display:none;}/*不再需要myShow样式#navigation ul li ul.myShow{display:block;}*/--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">/*$(function(){//找到所有li标记中包含的ul标记//然后找到它的前一个标记（即<a>），并添加click()事件$("li").find("ul").prev().click(function(){//点击<a>时让它后面的兄弟（即<ul>）切换CSS样式$(this).next().toggleClass("myHide");});});*//*//替换原来的例题function change(){$(this).parent().find("ul").toggleClass("myHide");//通过父元素li，找到兄弟元素ulvar oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//CSS交替更换来实现显、隐if(oSecondDiv.className == "myHide")oSecondDiv.className = "myShow";elseoSecondDiv.className = "myHide";}window.onload = function(){$("li").find("ul").prev().click(change);/*var oUl = document.getElementById("listUL");var aLi = oUl.childNodes;//子元素var oA;for(var i=0;i<aLi.length;i++){//如果子元素为li，且这个li有子菜单ulif(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){oA = aLi[i].firstChild;//找到超链接oA.onclick = change;//动态添加点击函数}}}*/$(function(){$("li").find("ul").prev().click(function(){$(this).next().toggleClass("myHide");});});</script></head><body><div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a> <ul name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>交替变幻的表格</title><style><!--.datalist{border:1px solid #007108;/* 表格边框 */font-family:Arial;border-collapse:collapse;/* 边框重叠 */background-color:#d9ffdc;/* 表格背景色 */font-size:14px;}.datalist th{border:1px solid #007108;/* 行名称边框 */background-color:#00a40c;/* 行名称背景色 */color:#FFFFFF;/* 行名称颜色 */font-weight:bold;padding-top:4px; padding-bottom:4px;padding-left:12px; padding-right:12px;text-align:center;}.datalist td{border:1px solid #007108;/* 单元格边框 */text-align:left;padding-top:4px; padding-bottom:4px;padding-left:10px; padding-right:10px;}.datalist tr.altrow{background-color:#a5e5aa;/* 隔行变色 */}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("table.datalist tr:nth-child(odd)").addClass("altrow");$("table").mouseover(function(){$("tr:gt(0)").toggleClass("altrow");});$("table").mouseout(function(){$("tr:gt(0)").toggleClass("altrow");});});</script></head><body> <table summary="list of members in EE Studay" id="oTable"><tr><th scope="col">Name</th><th scope="col">Class</th><th scope="col">Birthday</th><th scope="col">Constellation</th><th scope="col">Mobile</th></tr><tr><td>isaac</td><td>W13</td><td>Jun 24th</td><td>Cancer</td><td>1118159</td></tr> <tr><td>fresheggs</td><td>W610</td><td>Nov 5th</td><td>Scorpio</td><td>1038818</td></tr><tr><td>girlwing</td><td>W210</td><td>Sep 16th</td><td>Virgo</td><td>1307994</td></tr><tr><td>tastestory</td><td>W15</td><td>Nov 29th</td><td>Sagittarius</td><td>1095245</td></tr><tr><td>lovehate</td><td>W47</td><td>Sep 5th</td><td>Virgo</td><td>6098017</td></tr><tr><td>slepox</td><td>W19</td><td>Nov 18th</td><td>Scorpio</td><td>0658635</td></tr><tr><td>smartlau</td><td>W19</td><td>Dec 30th</td><td>Capricorn</td><td>0006621</td></tr><tr><td>shenhuanyan</td><td>W25</td><td>Jan 31th</td><td>Aquarius</td><td>0621827</td></tr><tr><td>tuonene</td><td>W210</td><td>Nov 26th</td><td>Sagittarius</td><td>0091704</td></tr><tr><td>ArthurRivers</td><td>W91</td><td>Feb 26th</td><td>Pisces</td><td>0468357</td></tr><tr><td>reconzansp</td><td>W09</td><td>Oct 13th</td><td>Libra</td><td>3643041</td></tr><tr><td>linear</td><td>W86</td><td>Aug 18th</td><td>Leo</td><td>6398341</td></tr><tr><td>laopiao</td><td>W41</td><td>May 17th</td><td>Taurus</td><td>1254004</td></tr><tr><td>dovecho</td><td>W19</td><td>Dec 9th</td><td>Sagittarius</td><td>1892013</td></tr><tr><td>shanghen</td><td>W42</td><td>May 24th</td><td>Gemini</td><td>1544254</td></tr><tr><td>venessawj</td><td>W45</td><td>Apr 1st</td><td>Aries</td><td>1523753</td></tr><tr><td>lightyear</td><td>W311</td><td>Mar 23th</td><td>Aries</td><td>1002908</td></tr></table></body></html>?三、处理页面的元素
? 1.直接获取、编辑内容
??? hmtl()相当于获取节点的innerHTML属性，text()则用来获取元素的纯文本。
? 2.移动和复制元素
??? append()方法，可直接为某个元素添加新的子元素。如$("p").append($("a"));如果添加的目标<p>是唯一的一个元素，那么$("a")将会被移动到该元素的后面，如果目标 <p>是多个元素，那么$("a")将会以复制的形式，在每个<p>后面都添加一个子元素。
??? appendTo(target)，用来将元素添加为指定目标的子元素，和append()一样，目标为多个时复制，目标为一个时移动。
? 3.删除元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>text()与html()</title><style type="text/css"><!--p{margin:0px; padding:5px;font-size:15px;border:1px solid #642d00;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">//1.text and htmlfunction textHtml(){$("p").click(function(){var str = $(this).text();$(this).html(str);});}//2.appendfunction appendHTML(){//直接添加HTML代码$("p:eq(0)").append("<b>啊～～～～</b>");}//3.添加多个目标function appendMany(){$("p").append($("a")); //复制} //4.appendTo添加到指定目标的子元素，把appendTo之前的内容添加到appendTo之后的内容function appendTo(){$("a:eq(0)").appendTo($("p"));}//5.appendTo复制及移动function appendToCopyOrMove(){$("img").appendTo("p");}//6.afterMany() 添加多个目标 在p:eq(1)之后添加afunction afterMany(){$("p").after($("a:eq(0)"));//添加目标为多个<p> 复制}//7.after 添加目标是唯一的 在p之后添加afunction after(){$("p:eq(0)").after($("a:eq(1)"));//添加目标是唯一的<p> 移动}//8.removefunction removeAllP(){$("p").remove();}//9.remove contians remove过滤器function removeContains(){//$("p").remove(":contains('段 落1')");$("p:contains('段 落1')").remove();//两者效果一致，建议用后者}//10.删除子元素 emptyfunction empty(){$("p").empty();//只是清空子元素，样式等还在}</script></head><body><p><b>文本</b>段 落1<em>示</em>例</p><p><b>文本</b>段 落2<em>示</em>例</p><a href="#">增加的链接1</a><a href="#">增加的链接2</a><input type="button" value="1.text and html" onclick="textHtml();"><input type="button" value="2.append" onclick="appendHTML();"><input type="button" value="3.appendMany" onclick="appendMany();"><input type="button" value="4.appendTo" onclick="appendTo();"><input type="button" value="6.afterMany" onclick="afterMany();"><input type="button" value="7.after" onclick="after();"><input type="button" value="8.removeAllP" onclick="removeAllP();"><input type="button" value="9.removeContains" onclick="removeContains();"><input type="button" value="10.empty" onclick="empty();"></body></html>?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>appendTo()方法</title><style type="text/css"><!--body{ margin:5px; padding:0px; }p{ margin:0px; padding:1px 1px 1px 0px; }img{border:1px solid #003775;margin:4px;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">//1.appendToCopyOrMovefunction appendToCopyOrMove(){$("img:eq(0)").appendTo($("p"));//添加目标为多个<p> 复制$("img:eq(1)").appendTo($("p:eq(1)"));//添加目标是唯一的<p> 移动}function prependTo(){$("img:eq(0)").prependTo($("p"));//添加到所有子元素之前 复制}function prepend(){$("img:eq(0)").prepend($("p"));//添加到所有子元素之前 复制}//4.clonefunction clone(){$("img:eq(0)").clone().appendTo($("p"));//添加目标为多个<p> 复制$("img:eq(1)").clone().appendTo($("p:eq(1)"));//添加目标是唯一的<p> 复制}function cloneEven(){$("input[type=button]").click(function(){//克隆自己，并且克隆点击的行为$(this).clone(true).insertAfter(this);});}</script></head><body><img src="08.jpg" title="08"> <img src="09.jpg" title="09"> <hr> <p><img src="10.jpg" title="10"></p><p><img src="10.jpg" title="10"></p> <p><img src="10.jpg" title="10"></p><input type="button" value="1.appendToCopyOrMove" onclick="appendToCopyOrMove();"> <input type="button" value="2.prepend" onclick="prepend();"> <input type="button" value="3.prependTo" onclick="prependTo();"> <input type="button" value="4.clone" onclick="clone();"> <input type="button" value="5.cloneEven" onclick="cloneEven()"></body></html>???? remove()方法删除元素，可以在remove()方法中使用过滤器，但通常还是建议在选择器阶段就将要删除的对象确定，然后用remove()一次性删除。
??? empty()方法直接删除子元素（样式等保留，只删除内容）
? 4.克隆元素
??? 上面提到的元素的复制和移动，这取决于目标的个数，有时希望如果目标只有一个，也可同样执行复制操作，clone()方法可以克隆元素。
?