<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>toggle第几第一次执行第一个函数,点击第二次执行第二个函数</title>
<style type="text/css">
.even{
background-color:#CCC;}
.odd{
background-color:#FFff99;}
.selected{
background-color:#03F;}
.checks{
background-color:#C39;}
.huadong{
background-color:#3C3;}
</style>
<script type="text/javascript" src="../include/jquery.js"></script>
<script type="text/javascript">
var color;
//使用jquery加载事件
$(document).ready(function (){
//toggleClass()相当于在匹配元素上加上了class属性
//style比class优先 所以style>class id>class
//偶数
$("tr:even").addClass("even");
//奇数
$("tr:odd").addClass("odd");
//设置滑动
$("tr").mouseover(function (){
$(this).addClass("huadong");
});
$("tr").mouseout(function (){
$(this).removeClass("huadong");
});
//设置点击换色
/*$("tr").click(function (){
$(this).toggleClass("selected");
});*/
//用上边的可以代替,上边的简单,效果一样
$("input").each(function (){
$(this.parentNode.parentNode).click(function (){
$(this).toggleClass("selected");
});
});
/*$("tr").toggle(function(){
$(this).toggleClass("selected");
},function(){
$(this).removeClass("selected");
});*/
//选中checkbox换色
//$("tr").mouseover(function (){
//alert("aa");
$("input[type=checkbox]").each(function (index,domEle){
$("input[type=checkbox]").click(function (){
if(this.checked==true){
$(this).parents("tr").addClass("checks")}
if(this.checked==false) {
$(this).parents("tr").removeClass("checks");
}
});
});
//设置radio选中变色
$("input[type=radio]").click(function (){
$("input[type=radio]").each(function (i){
$(this).parents("tr").removeClass("selected");
if(this.checked==true){
$(this).parents("tr").toggleClass("checks");
}else{
$(this).parents("tr").removeClass("checks");
}
});
});
});
</script>
</head>
<body>
<form method="post">
<table width="397" border="1">
<tr>
<td width="56"><input type="checkbox" id="checkbox"></td>
<td width="160"> </td>
<td width="159"> </td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="radio" name="radio"></td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
事件处理
① bind:为每个匹配元素的特定事件绑定事件处理函数。
例1:
$("p").bind("click", function(){
alert( $(this).text() );
});
例2:调用dom函数
$("input[type=button]").bind("dblclick",aa);
function aa(){
alert("aa");
}
②one:绑定一个一次性的事件处理函数。
例:给段落表记绑定一个一次性的事件,只能调用一次
$("p").one("click",function(){
alert($(this).text());
});
查找
①children():每一个元素的所有子元素的元素集合。
例:查找DIV中的每个子元素。
$("#d2").children().each(function (index,domEle){
alert(domEle.value);
});
②find():
搜索所有与指定表达式匹配的元素。
$("p").find("span").css("background-color","green");
③next():案例折叠
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈
元素的元素集合。
$("span").click(function (){
$(this).next().toggle("slow");
});
④parent():
取得一个包含着所有匹配元素的唯一父元素的元素集合。
$("a").mouseover(function (){
$(this).parent().css("background","green");
});
⑤parents():重要
用于筛选祖先元素的表达式
$("span").parents(".d2").css("background","green");
val():
例1:选中单选框radio中val值等于3号
$("input[name=rad]").each(function (index,domEle){
if(domEle.value=='3号'){domEle.checked=true;}
});
例2:默认选中下拉菜单select为2号
$("#sel2").val("2号");
例3:默认下拉菜单同时选中2号和5号"
$("select").eq(1).val(["2号","5号"]);
例4:默认复选框选中2号和5号
$("input[name=box]").val(["2号","5号"]);