`

jquery控制页面

jquery 
阅读更多 
<!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;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("img").each(function(index){
		this.title = "这是第" + index + "幅图，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">
</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>attr(name)方法</title>
<style type="text/css">
<!--
em{
	color:#002eb2;
}
p{
	font-size:14px;
	margin:0px; padding:5px;
	font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	//var sTitle = $("em").attr("title");	//获取第一个<em>元素的title属性值
	var sTitle = $("em:eq(1)").attr("title");	//获取第二个<em>元素的title属性值
	$("span").text(sTitle);
});
</script>
</head>
<body>
<p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p>
<p>在树林里面<em title="running">跑啊跑</em>...</p>
<p>title属性的值是：<span></span></p>
</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>attr(name,value)方法</title>
<style type="text/css">
<!--
button{
	border:1px solid #950074;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function DisableBack(){
	$("button:gt(0)").attr("disabled","disabled");
}
</script>
</head>
<body>
	<button onclick="DisableBack()">第一个Button</button>&nbsp;
	<button>第二个Button</button>&nbsp;
	<button>第三个Button</button>&nbsp;
</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>attr(name,fn)方法</title>
<style type="text/css">
<!--
div{
	font-size:14px;
	margin:0px; padding:5px;
	font-family:Arial, Helvetica, sans-serif;
}
span{
	font-weight:bold;
	color:#794100;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("div").attr("id", function(index){
		//将id设置为序号相关的参数
		return "div-id" + index;
	}).each(function(){
		//找到每一项的span标记
		$(this).find("span").html("(id='" + this.id + "')");
	});
});
</script>
</head>
<body>
	<div>第0项 <span></span></div>
	<div>第1项 <span></span></div>
	<div>第2项 <span></span></div>
</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>attr(properties)方法</title>
<style type="text/css">
<!--
img{
	border:1px solid #003863;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("img").attr({
		src: "06.jpg",
		title: "紫荆公寓",
		alt: "紫荆公寓"
	});
});
</script>
</head>
<body>
<img>
<img>
<img>
<img>
<img>
</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>addClass()方法</title>
<style type="text/css">
<!--
.myClass1{
	border:1px solid #750037;
	width:120px; height:80px;
}
.myClass2{
	background-color:#ffcdfc;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	//同时添加多个CSS类别
	$("div").addClass("myClass1 myClass2");
});
</script>
</head>
<body>
	<div></div>
</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>toggleClass()方法</title>
<style type="text/css">
<!--
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">
$(function(){
	$("p").click(function(){
		//点击的时候不断切换
		$(this).toggleClass("highlight");
	});
});
</script>
</head>
<body>
	<p>高亮？</p>
</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>伸缩的菜单，用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;	//动态添加点击函数
		}
	}
}*/
</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>



<!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>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>css(name,value)方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("p").mouseover(function(){
		$(this).css("color","red");
	});
	$("p").mouseout(function(){
		$(this).css("color","black");
	});
});
</script>
</head>
<body>
	<p>把鼠标放上来试试？</p>
	<p>或者再移动出去？</p>
</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>设置opacity</title>
<style type="text/css">
<!--
body{
	/* 设置背景图片，以突出透明度的效果 */
	background:url(bg1.jpg);
	margin:20px; padding:0px;
}
img{
	border:1px solid #FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	//设置透明度，兼容性很好
	$("img").mouseover(function(){
		$(this).css("opacity","0.5");
	});
	$("img").mouseout(function(){
		$(this).css("opacity","1.0");
	});
});
</script>
</head>
<body>
	<img src="07.jpg">
</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>text()与html()</title>
<style type="text/css">
<!--
p{
	margin:0px; padding:5px;
	font-size:15px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	var sString = $("p:first").text();	//获取纯文本
	$("p:last").html(sString);
});
</script>
</head>
<body>
	<p><b>文本</b>段 落<em>示</em>例</p>
	<p></p>
</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>text()与html()</title>
<style type="text/css">
<!--
p{
	margin:0px; padding:5px;
	font-size:15px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("p").click(function(){
		var sHtmlStr = $(this).html();	//获取innerHTML
		$(this).text(sHtmlStr);		//将代码做为纯文本传入
	});
});
</script>
</head>
<body>
	<p><b>文本</b>段 落<em>示</em>例</p>
</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>append()方法</title>
<style type="text/css">
<!--
em{
	color:#002eb2;
}
p{
	font-size:14px;
	margin:0px; padding:5px;
	font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	//直接添加HTML代码
	$("p:eq(1)").append("<b>直接添加</b>");
});
</script>
</head>
<body>
	<p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p>
	<p>在树林里面<em title="running">跑啊跑</em>...</p>
</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>append()方法</title>
<style type="text/css">
<!--
p{
	font-size:14px; font-style:italic;
	margin:0px; padding:5px;
	font-family:Arial, Helvetica, sans-serif;
}
a:link, a:visited{
	color:red;
	text-decoration:none;
}
a:hover{
	color:black;
	text-decoration:underline;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("p").append($("a:eq(0)"));	//添加目标为多个<p>
	$("p:eq(1)").append($("a:eq(1)"));	//添加目标是唯一的<p>
});
</script>
</head>
<body>
	<a href="#">要被添加的链接1</a>
    <a href="#">要被添加的链接2</a>
    <p>从前有一只大恐龙...</p>
	<p>在树林里面跑啊跑...</p>
</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">
$(function(){
	$("img:eq(0)").appendTo($("p"));	//添加目标为多个<p>
	$("img:eq(1)").appendTo($("p:eq(0)"));	//添加目标是唯一的<p>
});
</script>
</head>
<body>
	<img src="08.jpg"> <img src="09.jpg">
    <hr>
    <p><img src="10.jpg"></p>
	<p><img src="10.jpg"></p>
    <p><img src="10.jpg"></p>
</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>after()方法</title>
<style type="text/css">
<!--
p{
	font-size:14px; font-style:italic;
	margin:0px; padding:5px;
	font-family:Arial, Helvetica, sans-serif;
}
a:link, a:visited{
	color:red;
	text-decoration:none;
}
a:hover{
	color:black;
	text-decoration:underline;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("p").after($("a:eq(0)"));	//添加目标为多个<p>
	$("p:eq(1)").after($("a:eq(1)"));	//添加目标是唯一的<p>
});
</script>
</head>
<body>
	<a href="#">要被添加的链接1</a>
    <a href="#">要被添加的链接2</a>
    <p>从前有一只大恐龙...</p>
	<p>在树林里面跑啊跑...</p>
</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>remove()方法</title>
<style type="text/css">
<!--
p{
	font-size:14px;
	margin:0px; padding:5px;
}
a:link, a:visited{
	color:red;
	text-decoration:none;
}
a:hover{
	color:black;
	text-decoration:underline;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("p").remove(":contains('大')");
	//$("p:contains('大')").remove();
});
</script>
</head>
<body>
    <p>从前有一只大恐龙...</p>
	<p>在树林里面跑啊跑...</p>
    <a href="#">突然撞倒了一颗大树...</a>
</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>empty()方法</title>
<style type="text/css">
<!--
p{
	border:1px solid #642d00;
	margin:2px; padding:3px;
	height:20px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("p").empty();	//删除所有子元素
});
</script>
</head>
<body>
    <p>从前有一只大恐龙...</p>
	<p>在树林里面跑啊跑...</p>
    <a href="#">突然撞倒了一颗大树...</a>
</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>clone()方法</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">
$(function(){
	//直接修改例题11.16
	$("img:eq(0)").clone().appendTo($("p"));
	$("img:eq(1)").clone().appendTo($("p:eq(0)"));
});
</script>
</head>
<body>
	<img src="08.jpg"> <img src="09.jpg">
    <hr>
    <p><img src="10.jpg"></p>
	<p><img src="10.jpg"></p>
    <p><img src="10.jpg"></p>
</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>clone(true)方法</title>
<style type="text/css">
<!--
input{
	border:1px solid #7a0000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input[type=button]").click(function(){
		//克隆自己，并且克隆点击的行为
		$(this).clone(true).insertAfter(this);
	});
});
</script>
</head>
<body>
	<input type="button" value="Clone Me">
</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>val()方法</title>
<style type="text/css">
<!--
select, p, span{
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function displayVals(){
	//直接获取选中项的value值
	var singleValues = $("#constellation1").val();
	var multipleValues = $("#constellation2").val() || [];	//因为存在不选的情况
	$("span").html("<b>Single:</b> " + singleValues + "<br><b>Multiple:</b> " + multipleValues.join(", "));
}
$(function(){
	//当修改选中项时调用
	$("select").change(displayVals);
    displayVals();
});
</script>
</head>
<body>
<span></span><br>
<form method="post" name="myForm1">
<p>
<select id="constellation1">
	<option value="Aries">白羊</option>
	<option value="Taurus">金牛</option>
	<option value="Gemini">双子</option>
	<option value="Cancer">巨蟹</option>
	<option value="Leo">狮子</option>
	<option value="Virgo">处女</option>
	<option value="Libra">天秤</option>
	<option value="Scorpio">天蝎</option>
	<option value="Sagittarius">射手</option>
	<option value="Capricorn">摩羯</option>
	<option value="Aquarius">水瓶</option>
	<option value="Pisces">双鱼</option>
</select>
<select id="constellation2" multiple="multiple" style="height:120px;">
	<option value="Aries">白羊</option>
	<option value="Taurus">金牛</option>
	<option value="Gemini">双子</option>
	<option value="Cancer">巨蟹</option>
	<option value="Leo">狮子</option>
	<option value="Virgo">处女</option>
	<option value="Libra">天秤</option>
	<option value="Scorpio">天蝎</option>
	<option value="Sagittarius">射手</option>
	<option value="Capricorn">摩羯</option>
	<option value="Aquarius">水瓶</option>
	<option value="Pisces">双鱼</option>
</select>
</p>
</form>
</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>val(value)方法</title>
<style type="text/css">
<!--
input{
	border:1px solid #006505;
	font-family:Arial, Helvetica, sans-serif;
}
p{
	margin:0px; padding:5px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input[type=button]").click(function(){
		var sValue = $(this).val();	//先获取按钮的value值
		$("input[type=text]").val(sValue);	//赋给文本框
	});
});
</script>
</head>
<body>
	<p><input type="button" value="Feed">
	<input type="button" value="the">
	<input type="button" value="Input"></p>
	<p><input type="text" value="click a button"></p>
</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>bind()</title>
<style type="text/css">
<!--
img{
	border:1px solid #000000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("img")
		.bind("click",function(){
			$("#show").append("<div>点击事件1</div>");
		})
		.bind("click",function(){
			$("#show").append("<div>点击事件2</div>");
		})
		.bind("click",function(){
			$("#show").append("<div>点击事件3</div>");
		});
});
</script>
</head>
<body>
	<img src="11.jpg">
	<div id="show"></div>
</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>one()</title>
<style type="text/css">
<!--
div{
	border:1px solid #000000;
	background:#fffd77;
	height:50px; width:50px;
	padding:8px; margin:5px;
	text-align:center;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	float:left;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	//首先创建10个<div>块
	for(var i=0;i<10;i++)
		$(document.body).append($("<div>Click<br>Me!</div>"));
	var iCounter=1;
	//每个都用one添加click事件
	$("div").one("click",function(){
		$(this).css({background:"#8f0000", color:"#FFFFFF"}).html("Clicked!<br>"+(iCounter++));
	});
});
</script>
</head>
<body>
</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>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
	border:1px solid #000000;
}
input{
	border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	var fnMyFunc1;	//函数变量
	$("img")
		.bind("click",fnMyFunc1 = function(){	//赋给函数变量
			$("#show").append("<div>点击事件1</div>");
		})
		.bind("click",function(){
			$("#show").append("<div>点击事件2</div>");
		})
		.bind("click",function(){
			$("#show").append("<div>点击事件3</div>");
		});
	$("input[type=button]").click(function(){
		$("img").unbind("click",fnMyFunc1);	//移除事件监听myFunc1
	});
});
</script>
</head>
<body>
	<img src="11.jpg"> <input type="button" value="移除事件1">
	<div id="show"></div>
</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>事件对象</title>
<style type="text/css">
<!--
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	margin:0px; padding:5px;
}
p{
	background:#ffe476;
	margin:0px; padding:5px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("p").bind("click", function(e){	//传递事件对象e
		var sPosPage = "(" + e.pageX + "," + e.pageY + ")";
		var sPosScreen = "(" + e.screenX + "," + e.screenY + ")";
		$("span").html("<br>Page: " + sPosPage + "<br>Screen: " + sPosScreen);
	});
});
</script>
</head>
<body>
	<p>Click Me!</p>
	<span></span>
</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>事件触发</title>
<style type="text/css">
<!--
input{
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	margin:0px; padding:4px;
	border:1px solid #002b83;
}
div{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px; margin:2px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function Counter(oSpan){
	var iNum = parseInt(oSpan.text());	//获取span中本身的值
	oSpan.text(iNum + 1);		//点击次数加1
}
$(function(){
	$("input:eq(0)").click(function(){
		Counter($("span:first"));
	});
	$("input:eq(1)").click(function(){
		Counter($("span:last"));
		$("input:eq(0)").trigger("click");	//触发按钮1的点击事件
	});
});
</script>
</head>
<body>
	<input type="button" value="Button 1">
	<input type="button" value="Button 2"><br><br>
    <div>按钮1点击次数：<span>0</span></div>
    <div>按钮2点击次数：<span>0</span></div>
</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>toggle()</title>
<style type="text/css">
<!--
body{
	/* 设置背景图片，以突出透明度的效果 */
	background:url(bg1.jpg);
	margin:20px; padding:0px;
}
img{
	border:1px solid #FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("img").toggle(
		function(oEvent){
			$(oEvent.target).css("opacity","0.5");
		},
		function(oEvent){
			$(oEvent.target).css("opacity","1.0");
		}
	);
});
</script>
</head>
<body>
	<img src="07.jpg">
</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>hover()方法</title>
<style type="text/css">
<!--
body{
	/* 设置背景图片，以突出透明度的效果 */
	background:url(bg1.jpg);
	margin:20px; padding:0px;
}
img{
	border:1px solid #FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("img").hover(
		function(oEvent){
			//第一个函数相当于mouseover事件监听
			$(oEvent.target).css("opacity","0.5");
		},
		function(oEvent){
			//第二个函数相当于mouseover事件监听
			$(oEvent.target).css("opacity","1.0");
		}
	);
});
</script>
</head>
<body>
	<img src="12.jpg">
</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>快餐在线</title>
<style type="text/css">
<!--
body{
	padding:0px;
	margin:165px 0px 0px 160px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	background:#000000 url(bg2.jpg) no-repeat;
}
body > div{
	margin:5px; padding:0px;
}
div.detail{
	display:none;
	margin:3px 0px 2px 15px;
}
div#totalPrice{
	padding:10px 0px 0px 280px;
	margin-top:15px;
	width:85px;
	border-top:1px solid #FFFFFF;
}
input{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
input.quantity{
	border:1px solid #CCCCCC;
	background:#3f1415; color:#FFFFFF;
	width:15px; text-align:center;
	margin:0px 0px 0px 210px
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function addTotal(){
	//计算总价格的函数
	var fTotal = 0;
	//对于选中了的复选项进行遍历
	$(":checkbox:checked").each(function(){
		//获取每一个的数量
		var iNum = parseInt($(this).parent().find("input[type=text]").val());
		//获取每一个的单价
		var fPrice = parseFloat($(this).parent().find("span[price]").attr("price"));
		fTotal += iNum * fPrice;
	});
	$("#totalPrice").html("合计￥"+fTotal+"元");
}
$(function(){
	$(":checkbox").click(function(){
		var bChecked = this.checked;
		//如果选中则显示子菜单
		$(this).parent().find(".detail").css("display",bChecked?"block":"none");
		$(this).parent().find("input[type=text]")
			//每次改变选中状态，都将值重置为1，触发change事件，重新计算价格
			.attr("disabled",!bChecked).val(1).change()
            .each(function(){
				//需要聚焦判断，因此采用each来插入语句
				if(bChecked) this.focus();
			});
	});
	$("span[price] input[type=text]").change(function(){
		//根据单价和数量计算价格
		$(this).parent().find("span").text( $(this).val() * $(this).parent().attr("price") );
		addTotal();	//计算总价格
	});
	//加载页面完全后，统一设置输入文本框
	$("span[price] input[type=text]")
		.attr({	"disabled":true,//文本框为disable
				"value":"1",	//表示份数的value值为1
				"maxlength":"2"	//最都只能输入2位数（不提供100份以上）
		}).change();			//触发change事件，让span都显示出价格
});
</script>
</head>

<body>
<div>
1. <input type="checkbox" id="LiangCaiCheck"><label for="LiangCaiCheck">凉菜</label>
<span price="0.5"><input type="text" class="quantity"> ￥<span></span>元</span>
	<div class="detail">
		<label><input type="radio" name="LiangCai" checked="checked">拍黄瓜</label>
		<label><input type="radio" name="LiangCai">香油豆角</label>
		<label><input type="radio" name="LiangCai">特色水豆腐</label>
		<label><input type="radio" name="LiangCai">香芹醋花生</label>
	</div>
</div>
    
<div>
2. <input type="checkbox" id="SuCaiCheck"><label for="SuCaiCheck">素菜</label>
<span price="1"><input type="text" class="quantity"> ￥<span></span>元</span>
	<div class="detail">
		<label><input type="radio" name="SuCai" checked="checked">虎皮青椒</label>
		<label><input type="radio" name="SuCai">醋溜土豆丝</label>
		<label><input type="radio" name="SuCai">金勾豆芽</label>
	</div>
</div>
    
<div>
3. <input type="checkbox" id="HunCaiCheck"><label for="HunCaiCheck">荤菜</label>
<span price="2.5"><input type="text" class="quantity"> ￥<span></span>元</span>
	<div class="detail">
		<label><input type="radio" name="HunCai" checked="checked"/>麻辣肉片</label>
		<label><input type="radio" name="HunCai">红烧牛柳</label>
		<label><input type="radio" name="HunCai">糖醋里脊</label>
	</div>
</div>
    
<div>
4. <input type="checkbox" id="SoupCheck"><label for="SoupCheck">热汤</label>
<span price="1.5"><input type="text" class="quantity"> ￥<span></span>元</span>
	<div class="detail">
		<label><input type="radio" name="Soup" checked="checked"/>西红柿鸡蛋汤</label>
		<label><input type="radio" name="Soup">南瓜汤</label>
	</div>
</div>

<div id="totalPrice"></div>
</body>
</html>
分享到：
| jquery基础
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics