当前位置： 代码迷 >> Web前端 >> jQuery统制页面
  详细解决方案

jQuery统制页面

热度：269   发布时间：2012-07-15 20:11:36.0
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>&nbsp;
<button>第二个Button</button>&nbsp;
<button>第三个Button</button>&nbsp;
<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，找到兄弟元素ul
	var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
	//CSS交替更换来实现显、隐
	if(oSecondDiv.className == "myHide")
		oSecondDiv.className = "myShow";
	else
		oSecondDiv.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有子菜单ul
		if(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 class="myHide">
            	<li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
		<li><a href="#">Sports</a>
        	<ul class="myHide">
            	<li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>        
        </li>
		<li><a href="#">Weather</a>
        	<ul class="myHide">
            	<li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</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>交替变幻的表格</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 class="datalist" 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 html
function textHtml(){
	$("p").click(function(){
		var str = $(this).text();
		$(this).html(str);
	});
}

//2.append
function 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)之后添加a
function afterMany(){
	$("p").after($("a:eq(0)"));//添加目标为多个<p> 复制
}

//7.after 添加目标是唯一的 在p之后添加a
function after(){
		$("p:eq(0)").after($("a:eq(1)"));//添加目标是唯一的<p> 移动
}

//8.remove
function removeAllP(){
	$("p").remove();
}

//9.remove contians remove过滤器
function removeContains(){
	//$("p").remove(":contains('段 落1')");
	$("p:contains('段 落1')").remove();
	//两者效果一致，建议用后者
}

//10.删除子元素 empty
function 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.appendToCopyOrMove
function 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.clone
function 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()方法可以克隆元素。

?

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.