基本过滤选择器
2011-06-06 00:33
155 查看
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>基本过滤选择器</title>
<script src="js/jquery-1.5.2.js" type="text/javascript"></script>
<script type="text/javascript">
//:first选取第一个元素
//$("div:frist")选取第一个div
//:last选取最后一个元素
//$("div:last")选取最后一个div
//:not(选择器)选取不满足"选择器"条件的元素
//$("input:not(.myclass)")选取样式名不是myclass的input
//:even、:odd选取奇数、偶数的元素
//$("input:even")选取索引是奇数的input
//:eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引等于、大于、小于索引序号的元素。
//$("input:lt(1)")选取索引小于1的input
//$(":header")选取所有的h1.....h6元素
//$("div:animated")选取正在执行动画的div元素
//例子1：表格奇数行是***背景
$(function () {
$("#UserInfo tr:first").css("fontSize", "30");
$("#UserInfo tr:last").css("fontSize", "30");
$("#UserInfo tr:first").css("color", "red");
$("#UserInfo tr:last").css("color", "red");
$("#UserInfo tr:even").css("background", "yellow");
$("#UserInfo tr:odd").css("background", "blue");
$("#UserInfo tr:gt(1):lt(4)").css("color", "white");
//$("#UserInfo tr:eq(5)").css("background-image","url('images/13.jpg');
$("#UserInfo tr td img").click(function () {
$("#image").show();
});
$("#image").hide();
//第二选择器
$("#ul1").click(function () {
$("li", $(this)).css("background", "red");// $("li", $(this)).siblings().css("background", "white");
});
});
</script>
<style type="text/css">
.aa
{
background: url("images/red.gif");
color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="image"><img id="img" src="images/sdf.jpg" width="500px" height="280px" alt="我和菲" /></div>
<div id="div1">
<ul id="ul1">
<li>美女</li>
<li>米女</li>
<li>张燕</li>
<li>可爱</li>
</ul>
</div>
<div id="div2">
<ul>
<li>美女</li>
<li>米女</li>
<li>张燕</li>
<li>可爱</li>
</ul>
</div>
<table border="0" id="UserInfo" cellpadding="1" cellspacing="1">
<tr><td>姓名</td><td>性别</td><td>年龄</td><td>美丽指数</td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td colspan="4" align="center">汇总</td></tr>
</table>
<p class="aa">a</p>
<div>第1个p下第1个div</div>
<div>第1个p下第2个div</div>
<p>b</p>
<div>第2个p下第1个div</div>
<div>第2个p下第2个div</div>
<p>c</p>
<div>第3个p下第1个div</div>
<div>第3个p下第2个div</div>
<p>d</p>
<div>第4个p下第1个div</div>
<div>第4个p下第2个div</div>
<p>e</p>
<div>第5个p下第1个div</div>
<div>第5个p下第2个div</div>
<p>f</p>
<div>第6个p下第1个div</div>
<div>第6个p下第2个div</div>
</div>
</form>
</body>
</html>
<head runat="server">
<title>基本过滤选择器</title>
<script src="js/jquery-1.5.2.js" type="text/javascript"></script>
<script type="text/javascript">
//:first选取第一个元素
//$("div:frist")选取第一个div
//:last选取最后一个元素
//$("div:last")选取最后一个div
//:not(选择器)选取不满足"选择器"条件的元素
//$("input:not(.myclass)")选取样式名不是myclass的input
//:even、:odd选取奇数、偶数的元素
//$("input:even")选取索引是奇数的input
//:eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引等于、大于、小于索引序号的元素。
//$("input:lt(1)")选取索引小于1的input
//$(":header")选取所有的h1.....h6元素
//$("div:animated")选取正在执行动画的div元素
//例子1：表格奇数行是***背景
$(function () {
$("#UserInfo tr:first").css("fontSize", "30");
$("#UserInfo tr:last").css("fontSize", "30");
$("#UserInfo tr:first").css("color", "red");
$("#UserInfo tr:last").css("color", "red");
$("#UserInfo tr:even").css("background", "yellow");
$("#UserInfo tr:odd").css("background", "blue");
$("#UserInfo tr:gt(1):lt(4)").css("color", "white");
//$("#UserInfo tr:eq(5)").css("background-image","url('images/13.jpg');
$("#UserInfo tr td img").click(function () {
$("#image").show();
});
$("#image").hide();
//第二选择器
$("#ul1").click(function () {
$("li", $(this)).css("background", "red");// $("li", $(this)).siblings().css("background", "white");
});
});
</script>
<style type="text/css">
.aa
{
background: url("images/red.gif");
color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="image"><img id="img" src="images/sdf.jpg" width="500px" height="280px" alt="我和菲" /></div>
<div id="div1">
<ul id="ul1">
<li>美女</li>
<li>米女</li>
<li>张燕</li>
<li>可爱</li>
</ul>
</div>
<div id="div2">
<ul>
<li>美女</li>
<li>米女</li>
<li>张燕</li>
<li>可爱</li>
</ul>
</div>
<table border="0" id="UserInfo" cellpadding="1" cellspacing="1">
<tr><td>姓名</td><td>性别</td><td>年龄</td><td>美丽指数</td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>张燕</td><td>女</td><td>21</td><td><img src="images/red.gif" /></td></tr>
<tr><td>洁</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td>杜</td><td>女</td><td>22</td><td><img src="images/red.gif" /></td></tr>
<tr><td colspan="4" align="center">汇总</td></tr>
</table>
<p class="aa">a</p>
<div>第1个p下第1个div</div>
<div>第1个p下第2个div</div>
<p>b</p>
<div>第2个p下第1个div</div>
<div>第2个p下第2个div</div>
<p>c</p>
<div>第3个p下第1个div</div>
<div>第3个p下第2个div</div>
<p>d</p>
<div>第4个p下第1个div</div>
<div>第4个p下第2个div</div>
<p>e</p>
<div>第5个p下第1个div</div>
<div>第5个p下第2个div</div>
<p>f</p>
<div>第6个p下第1个div</div>
<div>第6个p下第2个div</div>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery选择器 基本选择器 层次选择器 表单选择器 过滤选择器 练习 事例
- jQuery_基本过滤选择器
- 前端学习笔记-jquery-9-（过滤选择器）过滤器：基本过滤器
- 使用Jquery基本过滤选择器
- 一步一步学习 JQuery (三) 过滤选择器:基本过滤选择器 && 内容过滤选择器 && 可见性过滤选择器
- jQuery 的基本过滤选择器
- jQuery基础教程之强大的选择器（过滤选择器-基本过滤选择器）
- 基本过滤选择器
- jQuery选择器——基本过滤选择器
- 2.3.3.1：基本过滤选择器
- jQuery基本过滤选择器
- jquery过滤器，过滤器它是在基本选择器与层次选择器获取到一批元素后，再进行过滤操作
- jQuery基本过滤选择器用法示例
- 使用jQuery基本过滤选择器
- jQuery的基本过滤选择器
- JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器
- jQuery基本过滤选择器使用介绍
- Jquery(五)过滤选择器之基本过滤
- JQuery的基本选择器使用总结以及过滤，文本，可见度的选择代码
- JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器