<!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></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//选择第一个div元素.
$('#btn1').click(function(){
$('div:first').css("background","#bfa");
})
//选择最后一个div元素.
$('#btn2').click(function(){
$('div:last').css("background","#bfa");
})
//选择class不为one的 所有div元素.
$('#btn3').click(function(){
$('div:not(.one)').css("background","#bfa");
})
//选择 索引值为偶数 的div元素。
$('#btn4').click(function(){
$('div:even').css("background","#bfa");
})
//选择 索引值为奇数 的div元素。
$('#btn5').click(function(){
$('div:odd').css("background","#bfa");
})
//选择 索引等于 3 的元素
$('#btn6').click(function(){
$('div:eq(3)').css("background","#bfa");
})
//选择 索引大于 3 的元素
$('#btn7').click(function(){
$('div:gt(3)').css("background","#bfa");
})
//选择 索引小于 3 的元素
$('#btn8').click(function(){
$('div:lt(3)').css("background","#bfa");
})
//选择 所有的标题元素.比如h1, h2, h3等等...
$('#btn9').click(function(){
$(':header').css("background","#bfa");
})
//选择 当前正在执行动画的所有元素.
$('#btn10').click(function(){
$(':animated').css("background","#bfa");
});
});
</script>
</head>
<body>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<br />
<br />
<input type="button" value="选择第一个div元素." id="btn1"/>
<input type="button" value="选择最后一个div元素." id="btn2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
<input type="button" value="选择索引值等于3的元素." id="btn6"/>
<input type="button" value="选择索引值大于3的元素." id="btn7"/>
<input type="button" value="选择索引值小于3的元素." id="btn8"/>
<input type="button" value="选择所有的标题元素." id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" > id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" > id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div
<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
效果图：
相关推荐
本文将深入探讨"JQ内容过滤选择器"这一关键知识点，它是jQuery选择器体系中的一个重要组成部分，用于从DOM树中筛选出符合特定条件的元素。 一、JQ内容过滤选择器概述 内容过滤选择器允许我们根据元素内部的文本或...
本文将深入探讨“JQ子元素过滤选择器”，这是一个强大的功能，可以帮助开发者精确地定位到DOM树中的特定子元素，进而进行进一步的操作。通过学习和掌握这些选择器，可以提高开发效率，使代码更加简洁易读。 首先，...
本文将深入探讨“JQ表单对象属性过滤选择器”的概念，以及如何在实际开发中有效地利用它们。 一、jQuery选择器概述 jQuery选择器是其强大功能的核心之一，它允许开发者通过简洁的语法来选取DOM元素。选择器分为基本...
本篇文章将深入探讨jQuery中的一个关键功能——可见性过滤选择器，它允许我们根据元素的可见状态来选择和操作DOM元素。通过了解这个功能，我们可以更高效地控制页面上的元素显示和隐藏。 首先，`:visible`和`:...
`.filter(selector)`则根据指定的选择器对当前元素集合进行过滤，返回匹配选择器的元素。此外，它还可以接收一个函数作为参数，函数会为每个元素执行，并根据返回值决定是否保留该元素。 ### 9. `.find(selector)` ...
- **基本过滤选择器**：例如`:first`选取第一个元素，`:last`选取最后一个元素，`:not(selector)`排除匹配的元素，`:even`选取偶数索引的元素，`:odd`选取奇数索引的元素，`:eq(index)`选取指定索引的元素，`:gt...
4. **支付方式选择**：允许用户选择不同的支付方式，如信用卡、支付宝、微信支付等，过滤器可以在此环节检查支付的有效性。 5. **验证用户信息**：在结算前，过滤器还可以检查用户是否已登录、收货地址是否完整等，...
在jQuery中，选择器分为多种类型，包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**： - `#id`：通过ID选择器选取具有特定ID的元素...
过滤选择器则帮助我们进一步细化选取结果，例如： 1. **`:first`和`:last`**: 选取第一个或最后一个元素。 2. **`:even`和`:odd`**: 选取索引偶数或奇数的元素。 3. **`:not(selector)`**: 排除匹配指定选择器的...
代码如下:<style type=”text/css”> /*高亮显示*/ .highlight{ background-color: gray } </style> 代码如下:<body> 各省市行政区划 ”1″ width=”50%”> 北京 上海 商丘 ...
过滤选择器 jQuery 提供了一系列过滤方法，如 `:visible`、`:hidden`、`:checked`、`:selected` 等，可以进一步筛选元素集合。例如： ```javascript $("input:checked"); // 选择所有被选中的 input 元素 $("div:...
### 基本过滤选择器 1. **:first**：选取集合中的第一个元素。`$("div:first")`选取所有`<div>`元素中的第一个。 2. **:last**：选取集合中的最后一个元素。`$("div:last")`选取所有`<div>`元素中的最后一个。 3. *...
在jQuery中，可见性过滤选择器是用于根据元素的可见状态来选取元素的重要工具。这些选择器分为两类：`:hidden` 和 `:visible`。它们允许开发者高效地操作页面上那些用户当前可以看到或无法看到的元素。 `:hidden` ...
1. **选择器字符串过滤**： 当`filterSelector`是一个CSS选择器时，`filter()`会保留与该选择器匹配的元素。例如，如果你有一个包含多个`<div>`的集合，你可以通过`filter('.class')`来只保留具有指定类名的`<div>`...
5. 基本过滤选择器 6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. ...
它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择...
基本过滤器用于进一步细化选择器的结果集，通过条件过滤元素。 - **:first**：选取第一个元素，如`$("tr:first")`选取表格的第一行。 - **:last**：选取最后一个元素，如`$("tr:last")`选取表格的最后一行。 - **:...
《jQuery.Datepair日期时分秒选择器详解及应用实践》 在Web开发中，日期和时间的选择是一个常见的功能，尤其在处理预约、日程安排或时间表等场景中。jQuery.Datepair是一个强大的JavaScript插件，它允许用户在两个...
#id') id选择器 2) $('.class') css选择器,class类名 3) $('element') 标签选择器，例如p,h1,div ... 5) $('sele1,sele2') 用‘,'逗号隔开可以...10） $('div:first') 过滤选择器,:first用:与父级元