简单选择器
1、:firstè选出匹配的元素中的第一个
2、:lastè选出匹配的元素中的最后一个
3、:eq(index)è选出匹配的元素中的指定索引位置的jquery对象（注：index从0开始）
4、:lt(index)è选出匹配元素中索引小于指定索引的对象
5、:gt(index) è选出匹配元素中的索引大于指定索引的对象
6、:evenè选出匹配元素中的索引为偶数的对象，即第奇数个
7、:oddè选出匹配元素中的索引为奇数的对象，即第偶数个
表单选择器
1、:inputè匹配所有input、textare、select和button元素
2、:textè匹配所有的单行文本框
3、:passwordè匹配所有的密码框
4、:submitè匹配所有的提交按钮
5、:checkboxè匹配所有的复选框
6、:radioè匹配所有的单选按钮
7、:resetè匹配所有的重置按钮
8、:hiddenè匹配所有不可见元素
9、:fileè匹配所有文本域（文本标签）
10、:buttonè匹配所有的button按钮
表单属性选择器
1、:checkedè选取选中的复选框或单选按钮
2、:selectedè匹配选中的option元素
代码演示：一.简单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<table border="1px" bordercolor="blue" cellspacing="0">
<tr><td>编号</td><td>姓名</td></tr>
<tr><td>1</td><td>张三</td></tr>
<tr><td>2</td><td>李四</td></tr>
<tr><td>3</td><td>王五</td></tr>
<tr><td>4</td><td>赵六</td></tr>
</table>
<div style="height: 50px;"></div>
<input type="button" value="简单选择器:first" οnclick="testfirst();"/>
<input type="button" value="简单选择器:last" οnclick="testlast();"/>
<input type="button" value="简单选择器:eq" οnclick="testeq();"/>
<input type="button" value="简单选择器:lt" οnclick="testlt();"/>
<input type="button" value="简单选择器:gt" οnclick="testgt();"/>
<input type="button" value="简单选择器:even" οnclick="testeven();"/>
<input type="button" value="简单选择器:odd" οnclick="testodd();"/>
</body>
<script src="js/jquery.1.9.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//简单选择器:first
function testfirst(){
var fir_li = $("li:first");
alert(fir_li.text());
}
//简单选择器:last
function testlast(){
var last_li = $("li:last");
alert(last_li.text());
}
//简单选择器:eq
function testeq(){
var eq_li = $("li:eq(2)");
alert(eq_li.text());
}
//简单选择器:lt
function testlt(){
var lt_li = $("li:lt(3)");
alert(lt_li.length);
}
//简单选择器:gt
function testgt(){
var gt_li = $("li:gt(3)");
alert(gt_li.length);
}
//简单选择器:even
function testeven(){
var eventd = $("tr:even");
eventd.each(function(){
$(this).css("color","red");
});
}
//简单选择器:odd
function testodd(){
var eventd = $("tr:odd");
eventd.each(function(){
$(this).css("color","yellow");
});
}
</script>
</html>
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="hobbies" value="踢足球" />踢足球
<input type="checkbox" name="hobbies" value="打篮球" />打篮球
<input type="checkbox" name="hobbies" value="羽毛球" />羽毛球
<br></br>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<br></br>
<select id="city">
<option value=" ">请选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
<div style="height: 50px;"></div>
<input type="button" value="获取选中复选框" οnclick="testcheck();"/>
<input type="button" value="获取选中单选框" οnclick="testradio();"/>
<input type="button" value="获取选中下拉框" οnclick="testselect();"/>
</body>
<script src="js/jquery.1.9.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//获取选中复选框
function testcheck(){
var checks = $(":checkbox:checked");
checks.each(function (){
alert($(this).val());
});
}
//获取选中单选框
function testradio(){
var sex = $(":radio:checked");
alert(sex.val());
}
//获取选中下拉框
function testselect(){
var city = $("#city option:selected");
alert(city.val());
}
</script>
</html>