`

jquery示例

 
阅读更多 
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
	<head>
		<title>jQuery.jsp</title>
		<style type="text/css">
			.eventr{
				background-color:#555666
			}
			.oddtr{
				background-color:#111222
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
		<script type="text/javascript" src="../js/jquery-hello.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#p1").mouseover(function(){
					//alert($(this).text());
				});
			});
		</script>
		<script type="text/javascript">
			$(function(){
				$("#biggerBtn").click(function(){
					var fontSize = $("#data").css("font-size");
					$("#data").css("font-size", parseInt(fontSize) + 5 + "px");
				});
				$("#smallerBtn").click(function(){
					var fontSize = $("#data").css("font-size");
					$("#data").css("font-size", parseInt(fontSize) - 5 + "px");
				});
			});
			$(function(){
				//通过css函数控制样式
				$("#tb1 tr:even").css("background", "#FFF999");
				$("#tb1 tr:odd").css("background", "#999FFF");
				//通过样式表控制样式
				$("#tb2 tr:even").addClass("eventr");
				$("#tb2 tr:odd").addClass("oddtr");
			});
			$(function(){
				$("#hiddenBtn").click(function(){
					$("#p2").fadeOut(300);
				});
				$("#showBtn").click(function(){
					$("#p2").fadeIn(300);
				});
			});
		</script>
		<script type="text/javascript">
			$(function(){
				$("#span1").myHello();
			});
		</script>
		<script type="text/javascript">
			$(function(){
				var pAry = $("p");
				var p = pAry[1];
				alert(p.innerHTML);
			});
		</script>
		<style type="text/css">
			.normalStyle{
				background:#C3D9FF;
			}
			.alterStyle{
				background:#DDF8CC;
			}
			.h{
				background:#FCCEBA;
				border:solid 1px #DDD000;
			}
			.button{
				background:#FAFAA0;
				border:solid 1px #000DDD;
				padding:4px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$("li").addClass("normalStyle");//标签选择器
				$(".alter").addClass("alterStyle");//类选择器
				$("h1,h2,h3").addClass("h");//群组选择器
				$("#btn").addClass("button");//id选择器
			});
		</script>
		<script type="text/javascript">
			$(function(){
				//层次选择器
				$("ul li").css("color","#FFDDEE");//选择<ul>里的所有<li>元素
				$("div>span").css("color","#AABBCC");//选择<div>元素下的<span>元素
				$("div+span").css("color","#CCDDEE");//选择紧接在div元素后的span元素
				$("div~span").css("background","#FFCCDD");//选择div元素之后的所有span元素
			});
		</script>
		<script type="text/javascript">
			$(function(){
				var btns = $("input[type='button']:first");
				alert(btns[0].value);
			});
			$(function(){
				var ps = $("p:parent");
				alert(ps[0].value);
			});
		</script>
		
	</head>
	<body>
		<p/>
		<p id="p1">Hello jQuery</p>
		<p id="data">实力决定尊严</p>
		<input type="button" id="biggerBtn" value="放大"/>
		<input type="button" id="smallerBtn" value="缩小"/>
		<br/>
		<table id="tb1">
			<tr>
				<td>忘掉过去的事</td>
			</tr>
			<tr>
				<td>尽量去想开心的事</td>
			</tr>
			<tr>
				<td>忘掉过去的事</td>
			</tr>
			<tr>
				<td>尽量去想开心的事</td>
			</tr>
		</table>
		<hr/>
		<table id="tb2">
			<tr>
				<td>我会很快成为一个内心强大的人</td>
			</tr>
			<tr>
				<td>我会很快成为一个思维缜密的人</td>
			</tr>
		</table>
		<hr/>
		<p id="p2">极度关心自己的每一点利益，不允许它受到任何侵害！</p>
		<input type="button" id="hiddenBtn" value="隐藏"/>
		<input type="button" id="showBtn" value="显示"/>
		<br/>
		<span id="span1">你好！</span>
		<hr/>
		<ul>
			<li>选项一</li>
			<li class="alter">选项二</li>
			<li>选项三</li>
			<li class="alter">选项四</li>
		</ul>
		<h1>标题一</h1>
		<h1>标题二</h1>
		<h1>标题三</h1>
		<input type="button" id="btn" value="按钮"/>
		<hr/>
		<div>
			<span>span1</span>
		</div>
		<span>span2</span>
		<span>span3</span>
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
		</ul>
	</body>
</html>

 

分享到：
| 生活心得
评论
发表评论

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

相关推荐

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