使用JQuery选择器可以定位所需要的元素,同时JQuery还提供了过滤选择器,用以进一步对选择器中的结果进行过滤,常用的过滤选择器可以归为以下几类:
1.基本过滤选择器,常用的有:
(1):first 选取第一个元素,例如$("div:first"),选取第一个div元素;
(2):last 选取最后一个元素,例如$("div:last"),选取最后一个div元素;
(3):not 选取不满足选择器条件的元素,例如$("div:not(.class1)"),选取样式名不是class1的div元素;
(4):even,:odd,选取索引为偶数、奇数的元素,索引与一般编程语言一致,从0开始,例如$("span:even");
(5):eq(index),:lt(index),:gt(index),选取索引号=、<、>制定索引的元素,例如$("div:eq(1)"),选择索引号等于1的div元素;
(6):header,选取所有h1....h6的元素,例如$(":header");
(7):animated,选取正在执行动画的元素,如$("div:animated"),获取正在执行动画的div动画。
2.属性过滤选择器,格式为$("tagName[属性名或者表达式]"),两种格式的含义如下:
(1)若为$("tagName[属性名]"),表示拥有该属性的元素,如$("input[id]"),选取有id属性的input元素;
(2)若为$("tagName[表达式]"),表示属性满足该表达式的元素,如$("input[id=username]"),选取id=username的input元素;
3.表单对象过滤器,格式为$(":属性值"),如$("#form1:enabled"),选取id为form1的表单下的所有启用元素,$("input:checked"),选取所有选中(radiobutton、checkbox中)的项,$("select:selected")选取所欲选中的下拉列表项。
4.表单选择器,常用的有以下三种:
(1)$(":input"),选取所有可提交给服务器的元素,如<input>、<textarea>、<select>和<button>;
(2)$(":text/password/checkbox..."),获取type=text、password、checkbox...的元素。
示例一:实现全选、全不选和反选
<!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>
<title>JQuery test</title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#selectAll").click(function () {
$("input[type=checkbox]").attr("checked", true);
});
$("#notSelectAll").click(function () {
$("input[type=checkbox]").attr("checked", false);
});
$("#reverse").click(function () {
$("input[type=checkbox]").each(function () {
$(this).attr("checked",!$(this).attr("checked"));
});
})
});
</script>
</head>
<body>
<input type="checkbox" value="football" />music1<br />
<input type="checkbox" value="basketball" />music2<br />
<input type="checkbox" value="badminton" />music3<br />
<input type="button" value="全选" id="selectAll" />
<input type="button" value="全不选" id="notSelectAll" />
<input type="button" value="反选" id="reverse" />
</body>
</html>
示例二:QQ显示面板
<!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>
<title>QQ显示面板示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
ul{list-style-type:none;width:15%;}
.header{cursor:pointer;}
.body{border-style:solid;border-width:1px;}
.hMouseOver{background-color:yellow;}
.hMouseOut{background-color:white;}
.bMouseOver{background-color:green;}
.bMouseOut{background-color:white;}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("ul li:odd").addClass("body");
$("ul li:even").click(function () {
$(this).next("li.body").toggle(); //单击时切换显示状态
}).mouseover(function () { $(this).attr("class", "header hMouseOver"); })
.mouseout(function () { $(this).attr("class", "header hMouseOut"); });
$("ul li.body div").mouseover(function () { $(this).attr("class","bMouseOver") })
.mouseout(function () { $(this).attr("class", "bMouseOut") });
$("ul li.body").hide();
});
</script>
</head>
<body>
<ul>
<li>好友列表1</li>
<li><div>person1</div>
<div>person2</div>
<div>person3<div />
</li>
<li>好友列表2</li>
<li><div>person4</div >
<div>person5</div >
<div>person6</div >
</li>
<li>好友列表3</li>
<li><div>person7</div >
<div>person8</div >
<div>person9</div >
</li>
</ul>
</body>
</html>
这只是一个简单的示例,在实际项目中,可以利用后台返回的数据,并结合一定的图片及样式对显示界面作进一步美化。