<%@ 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>