<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.my {
width:400px;
height:300px;
border:solid 1px red;
}
.m {
background-color:pink;
}
</style>
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
//===========================1===========================================
//找第一个input
$("input:first").css("background-color", "pink");
//找最后一个input
$("input:last").css("background-color", "gray");
//找没应用样式myclass和id不等于t1的input（注：样式名区分大小写，并且"."不能去掉）
$("input:not(.myClass):not(#t1)").css("background-color","pink");
//通过索引找第三项
$("input:eq(2)").css("background-color","pink");
//通过索引找前三项
$("input:lt(3)").css("background-color","pink");
//找后三项的两种方法
var num = $("input").length - 4;
$("input:gt(" + num + ")").css("background-color","pink");
$("input:eq(" + num + ")").nextAll().css("background-color","pink");
//================================2===============================
//表头
$("#salary tr:eq(0)").css({ "font-size": "30px", "text-align": "center" });
//表尾
$("#salary tr:last").css("color", "red");
//排除表头前三项
$("#salary tr:not(:first):lt(3)").css("font-size", "22px");
//去掉表头表尾 奇数行变黄
//even偶数 odd奇数 由于索引是从零开始，所以效果上even是奇数,odd是偶数
$("#salary tr:not(:first):not(:last):even").css("background-color","yellow");
//将表头表尾去掉提取出来
var str = "#salary tr:not(:first):not(:last)";
$(str + ":even").css("background-color", "yellow");
//光棒效果
var bgColor;
$(str).mouseover(function () {
bgColor = $(this).css("background-color");
$(this).css("background-color","blue");
}).mouseout(function () {
$(this).css("background-color",bgColor);
});
//变小手形状
$(str).css("cursor", "pointer");
//获取所有的工资
$arr = $(str);
var num = $arr.length;
var sum = 0;
for (var i = 0; i < num; i++) {
//相对定位 ★ 再第二个参数中找td中的第三个
var t = $("td", $($arr[i])).eq(2).text();
sum += parseFloat(t);
}
//alert("sum:"+sum);
$("#salary tr:last td:eq(1)").text(sum);
//=====================================3=======================================
$(":button[value=click]").click(function () {
//根据类样式找到div 给class属性赋值，会覆盖掉原来的样式
$(".my").attr("class", "m");
//避免覆盖两种方法
//1.先取到原来样式 再添加
var c = $(".my").attr("class");
$(".my").attr("class", c + " m");
//2.直接追加样式
$(".my").addClass("m");
});
//如果有样式去掉，如果没有样式 加上（不会影响原有样式）
$(":button[value=开关灯]").click(function () {
$(".my").toggleClass("m");
});
});
</script>
</head>
<body>
<%-- 1--%>
<input id="t1" type="text" /><br />
<input type="text" /><br />
<input class="myClass" type="text" /><br />
<input class="myClass" type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<%--2--%>
<table id="salary" width="400px" border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>工资</td>
</tr>
<tr>
<td>马化腾</td>
<td>30</td>
<td>80000</td>
</tr>
<tr>
<td>柳传志</td>
<td>50</td>
<td>50000</td>
</tr>
<tr>
<td>王志东</td>
<td>40</td>
<td>40000</td>
</tr>
<tr>
<td>李彦宏</td>
<td>35</td>
<td>20000</td>
</tr>
<tr>
<td>干露露</td>
<td>20</td>
<td>10000</td>
</tr>
<tr>
<td>合计</td>
<td colspan="2">180000</td>
</tr>
</table>
<%--3--%>
<div class="my">
111
</div>
<input type="button" value="click" />
<input type="button" value="开关灯" />
</body>
</html>