所用到的Html如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/select.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table id="test_table" width="1100" height="418" border="1" cellpadding="0" cellspacing="0">
<tr bgcolor="#009966">
<td height="62"><div align="center">
<input type="checkbox" name="checkbox" value="checkbox" >
</div></td>
<td><div align="center">UserName</div></td>
<td><div align="center">Password</div></td>
<td><div align="center">Address</div></td>
<td><div align="center">Phone</div></td>
</tr>
<tr>
<td><div align="center">
<input type="checkbox" name="checkbox2" value="checkbox">
<input type="hidden" value="1" />
</div></td>
<td><div align="center">admin1</div></td>
<td><div align="center">admin1</div></td>
<td><div align="center">Address00000001</div></td>
<td><div align="center">000000000000001</div></td>
</tr>
<tr>
<td><div align="center">
<input type="checkbox" name="checkbox3" value="checkbox">
<input type="hidden" value="2" />
</div></td>
<td><div align="center">admin2</div></td>
<td><div align="center">admin2</div></td>
<td><div align="center">Address00000002</div></td>
<td><div align="center">000000000000002</div></td>
</tr>
<tr>
<td><div align="center">
<input type="checkbox" name="checkbox4" value="checkbox">
<input type="hidden" value="3" />
</div></td>
<td><div align="center">admin3</div></td>
<td><div align="center">admin3</div></td>
<td><div align="center">Address00000003</div></td>
<td><div align="center">000000000000003</div></td>
</tr>
<tr>
<td><div align="center">
<input type="checkbox" name="checkbox5" value="checkbox">
<input type="hidden" value="4" />
</div></td>
<td><div align="center">admin4</div></td>
<td><div align="center">admin4</div></td>
<td><div align="center">Address00000004</div></td>
<td><div align="center">000000000000004</div></td>
</tr>
<tr>
<td><div align="center">
<input type="checkbox" name="checkbox6" value="checkbox">
<input type="hidden" value="5" />
</div></td>
<td><div align="center">admin5</div></td>
<td><div align="center">admin5</div></td>
<td><div align="center">Address00000005</div></td>
<td><div align="center">000000000000005</div></td>
</tr>
<tr>
<td><div align="center">
<input type="checkbox" name="checkbox7" value="checkbox">
<input type="hidden" value="6" />
</div></td>
<td><div align="center">admin6</div></td>
<td><div align="center">admin6</div></td>
<td><div align="center">Address00000006</div></td>
<td><div align="center">000000000000006</div></td>
</tr>
<tr>
<td><div align="center">
<input type="checkbox" name="checkbox8" value="checkbox">
<input type="hidden" value="7" />
</div></td>
<td><div align="center">admin7</div></td>
<td><div align="center">admin7</div></td>
<td><div align="center">Address00000007</div></td>
<td><div align="center">000000000000007</div></td>
</tr>
<tr>
<td><div align="center">
<input type="checkbox" name="checkbox9" value="checkbox">
<input type="hidden" value="8" />
</div></td>
<td><div align="center">admin8</div></td>
<td><div align="center">admin8</div></td>
<td><div align="center">Address00000008</div></td>
<td><div align="center">000000000000008</div></td>
</tr>
<tr>
<td><div align="center">
<input type="checkbox" name="checkbox10" value="checkbox">
<input type="hidden" value="9" />
</div></td>
<td><div align="center">admin9</div></td>
<td><div align="center">admin9</div></td>
<td><div align="center">Address00000009</div></td>
<td><div align="center">000000000000009</div></td>
</tr>
</table>
<p>
<input name=" Save " type="button" id="test_btn" value=" Save ">
<input type="button" name="Submit" id="even_btn">
<input type="button" name="Submit2" id="odd_btn">
</p>
<p>
Hidden value: <input type="hidden" value="10000" />
</p>
<h1>Test H1</h1>
<h2>Test H1</h2>
<div id="test_div">
<ul class="ul_1 ul_2">
<li><a href="http://www.baidu.com/test.jpg">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="ul_2">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="ul_2">
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<p><img src="20140123_155604.jpg" width="108" height="80" ></p>
<p><input type="image" src="20140123_155604.jpg" width="108" height="80" /></p>
<p>
<input type="file" name="file">
</p>
</body>
</html>
用法JS
$(function(){
//1.选择当前页面中的所有元素 $("*")
//console.log($("*"));
//2.ID选择器
//console.log($("#test_table"));
//3.单个Class选择器
//console.log($(".ul_1"));
//4.多个class || 选择器 查找class为ul_1或ul_2或ul_3的对象
//console.log($(".ul_1,.ul_2,.ul_3"));
//5.多个class & 选择器 查找class为ul_1并且class为ul_2的对象
//console.log($(".ul_1.ul_2"));
//6.html标签选择器 element
//console.log($("div,ul,li,p,a,input"));
//7.First选择器 查找所有p标签中的第一个
//console.log($("p:first"));
//8.First选择器 查找所有p标签中的最后一个
//console.log($("p:last"));
//9.Even选择器, 查找所下标为偶数行的tr
//console.log($("tr:even"));
//10.Even选择器,在某个对象中查找元素,在指定的表格中查找所有下标为偶数tr
//console.log($("tr:even",$("#test_table")));
//11.Odd选择器, 查找所有下标为奇数行的tr
//console.log($("tr:odd"));
//12.Odd选择器,在某个对象中查找元素,在指定的表格中查找所有下标为奇数tr
//console.log($("tr:odd",$("#test_table")));
//13.Eq选择器(equals) 查找div下的ul下的li,并且index=2的li
//console.log($("div ul li:eq(2)"));
//14.Gt选择器(greater than) 查找div下的ul下的li,并且index>2的li
//console.log($("div ul li:gt(2)"));
//15.Lt选择器(Less than) 查找div下的ul下的li,并且index<2的li
//console.log($("div ul li:lt(2)"));
//16.Not选择器 除了checkbox以外的所有input
//console.log($("input:not(:checkbox)"));
//17.Header选择器,选择html中的h标签, <h1> - <h6> 例如:h1,h2,...h6
//console.log($(":header"));
//18.Contains选择器,查找包含指定字符串的所有元素:contains
//console.log($("td div:contains('Address')"));
//19.Empty选择器,查找无子(元素)节点的所有元素
//console.log($(":empty"));
//20.Hidden选择器,查找所有隐藏的input元素
//console.log($("input:hidden"));
//21.Visible选择器,查找所有的可见的元素
//console.log($(":visible"));
//console.log($("input:visible"));//查找所有的可见的input元素
//22.多选选择器,
//console.log($("div,ul,li"));//查找所有的div,ul和li
//console.log($("div ul li"));//查找div下的ul下的所有li
//console.log($("li",$("#test_div")));//在id为test_div中查找所有的li
//console.log($("li","#test_div"));//在id为test_div中查找所有的li
//23.属性选择器
//console.log($("[href]"));//查找所有带href属性的元素
//console.log($("[href='#']"));//查找所有href='#'的元素
//console.log($("[href!='#']"));//查找所有href!='#'的元素
//console.log($("[href$='.jpg']"));//查找所有href属性的值包含以 ".jpg" 结尾的元素
//console.log($(":input"));//查找所有的input
//console.log($(":text"));//查找所有属性为text的元素
//console.log($(":password"));//查找所有属性为password的元素
//console.log($(":radio"));//查找所有属性为radio的元素
//console.log($(":checkbox"));//查找所有属性为checkbox的元素
//console.log($(":submit"));//查找所有属性为submit的元素
//console.log($(":reset"));//查找所有属性为reset的元素
//console.log($(":button"));//查找所有属性为button的元素
//console.log($(":image"));//查找所有属性为image的元素
//console.log($("img"));//查找所有标签为img的元素
//console.log($(":file"));//查找所有属性为file的元素
//console.log($(":enabled"));//所有激活的 input 元素
//console.log($(":disabled"));//所有禁用的 input 元素
//console.log($(":selected"));//所有被选取的 input 元素
//console.log($("checked"));//所有被选中的 input 元素
//总结,1.标签类的,可以在jquery中直接用标签选择,2.属性类的,在属性名前加:
//给id为test_table的table中的checked加上全选和全不选
var _first = $(":checkbox:first","#test_table");
_first.live("click",function(){
if(_first && _first.attr("checked")=="checked"){
$(":checkbox","#test_table").attr("checked","checked");
}else{
$(":checkbox","#test_table").removeAttr("checked");
}
});
//获取选中后提交的值
$("#test_btn").live("click",function(){
var _select_ids = $("#test_table td").map(function(){
var _value = "";
if($(":checkbox",this).attr("checked") == "checked"){
_value = $(":hidden",this).val();
}
return _value?_value:null;
}).get().join(",");
alert("你所选择的Id为: "+_select_ids);
});
var _even_btn = $("#even_btn").val("偶数行加背景色");
var _odd_btn = $("#odd_btn").val("奇数行加背景色");
//给table所有的偶数行加上背景色#99CCFF
_even_btn.toggle(function(){
var _find_tr = $("tr:even:gt(0)","#test_table").css("background-color","#99CCFF");
$(this).val("偶数行去背景色");
//顺便给选择的行中的checkbox加上选中
$(":checkbox",_find_tr).attr("checked","checked");
},function(){
var _find_tr = $("tr:even","#test_table").css("background-color","");
$(this).val("偶数行加背景色");
$(":checkbox",_find_tr).removeAttr("checked");
});
//给table所有的奇数行加上背景色#FF99CC
_odd_btn.toggle(function(){
var _find_tr = $("tr:odd","#test_table").css("background-color","#FF99CC");
$(this).val("奇数行去背景色");
//顺便给选择的行中的checkbox加上选中
$(":checkbox",_find_tr).attr("checked","checked");
},function(){
var _find_tr = $("tr:odd","#test_table").css("background-color","");
$(this).val("奇数行加背景色");
$(":checkbox",_find_tr).removeAttr("checked");
});
});