`

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基础
评论
发表评论

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

相关推荐

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，...

    第二章-JQUERY-控制页面

    通过学习和实践这些示例，你可以更好地掌握jQuery控制页面的方法和技巧，提升网页开发效率。 总结，jQuery作为前端开发的重要工具，以其简洁的语法和强大的功能，让开发者能够更轻松地控制和美化网页。了解并熟练...

    jquery控制页面部分刷新的方法

    本文实例讲述了jquery控制页面部分刷新的方法。分享给大家供大家参考。具体分析如下： 这段代码设计非常巧妙，通过jQuery的load方法加载页面的指定标签的内容 $('#button1').click(function() { var url = ...

    jquery控制页面的展开和隐藏实现方法(推荐)

    知识点：jQuery控制页面元素的展开和隐藏方法 jQuery是一种轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互的过程，是目前Web开发中最常用的库之一。在页面布局中，有时候需要对某些部分...

    JQuery权威指南 源代码

    jquery开发入门/1 1.1　jquery概述/2 1.1.1　认识jquery /2 1.1.2　jquery基本功能/2 1.1.3　搭建jquery开发环境/3 1.1.4　编写第一个简单的...控制dom对象/7 1.2.3　jquery控制页面css /9 1.3　本章小结/11 第2章...

    精通javascript+jQuery

    《精通JavaScript+jQuery》从JavaScript的基础知识开始...在此基础之上又通过精彩的实例详细讲解了jQuery的相关技术：主要包括jQuery的基础、如何使用jQuery控制页面、制作动画与特效、简化Ajax以及jQuery插件等内容。

    jQuery动画特效---精通JavaScript+jQuery

    第11课 - jQuery控制页面 - [精通JavaScript+jQuery] 第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery]...

    jquery 实现的等待加载页面

    "jQuery 实现的等待加载页面"就是一种为了优化用户交互而设计的技术方案。jQuery，一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果，使得创建这种功能变得更加简单。 首先，我们来看`jquery....

    jquery页面加载效果

    "jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画，它能够以吸引人的视觉方式展示网页内容正在加载的过程，使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用，尤其在内容分块...

    jquery控制滚动条下拉后DIV容器在页面中的位置

    标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能，即在用户滚动网页时，使指定的DIV元素始终保持在屏幕的某个固定位置，这种效果通常被称为“粘性导航”或“固定定位”。...

    jQuery模拟页面加载进度条

    本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...

    jquery应用子页面在父页面打开

    5. **样式控制**：通过jQuery，我们可以方便地改变子页面中的元素样式。例如，`$("#iframeID").contents().find(".className").css("property", "value")`将修改子页面中所有`.className`类元素的`property`属性为`...

    jQuery权威指南-源代码

    1.2.3　jQuery控制页面CSS /9 1.3　本章小结/11 第2章　jQuery 选择器/12 2.1　jQuery选择器概述/13 2.1.1　什么是选择器/13 2.1.2　选择器的优势/13 2.2　jQuery选择器详解/17 2.2.1　基本选择器/18 2.2.2　层次...

    第 7 章 jQuery 基础.pptx

    jQuery 可以控制页面元素的样式、大小、位置、内容等属性，例如：`css()`、`width()`、`height()`、`text()` 等。 ### jQuery 任务实施 jQuery 任务实施包括：实现文字和图片提示效果、实现登录表单简单验证、...

    jquery页面屏蔽器插件

    3. **JavaScript**：插件的核心逻辑由JavaScript编写，通过jQuery库与HTML元素进行交互，实现页面元素的可见性控制。 ### 文件结构 - **block_demo.html**：这是一个示例文件，演示了插件的使用方法，包括如何引入...

    jquery前台logo页面

    在jQuery中，我们可以使用`.fadeIn()`和`.fadeOut()`方法实现logo的动态显示效果，配合`.delay()`和`.queue()`可以控制动画的时间间隔和执行顺序。同时，`.on('click', function() {...})`可以绑定点击事件，当用户...

    jQuery实现网页打开页面即弹窗

    **jQuery实现网页打开页面即弹窗** 在网页设计中，弹窗是一种常见的交互方式，用于显示重要的信息或者引导用户操作。jQuery，一个广泛使用的JavaScript库，提供了简洁的API来简化DOM操作，使得创建动态和交互性的...

    jQuery页面上下滚动触发区块动画特效

    在这款特效中，jQuery被用来监听页面滚动事件，以及控制元素的动画展示。通过使用jQuery，开发者可以更方便地实现复杂的页面交互功能，而无需编写大量原生JavaScript代码。 ### 2. 页面滚动事件 页面滚动事件是...

    精通JavaScript.jQuery.rar

    在此基础之上，《精通JavaScript+jQuery(1CD)》通过精彩的实例详细讲解了jQuery的相关技术，主要包括jQuery的基础、如何使用jQuery控制页面、制作动画与特效、简化Ajax以及jQuery插件等内容。讲解的重点在于简化...

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