<html>
<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(){
//选取每个父元素下的第2个子元素
$('#btn1').click(function(){
$('div.one :nth-child(2)').css("background","#bbffaa");
})
//选取每个父元素下的第一个子元素
$('#btn2').click(function(){
$('div.one :first-child').css("background","#bbffaa");
})
//选取每个父元素下的最后一个子元素
$('#btn3').click(function(){
$('div.one :last-child').css("background","#bbffaa");
})
//如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$('#btn4').click(function(){
$('div.one :only-child').css("background","#bbffaa");
})
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<h3>子元素过滤选择器.</h3>
<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
<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>
效果图：
相关推荐
内容过滤选择器允许我们根据元素内部的文本或子元素来选取DOM节点。这些选择器主要基于元素的内容进行匹配，使我们能够更精确地定位到需要操作的元素。例如，我们可以选取包含特定文本的元素、选取空元素或者选取...
本篇文章将深入探讨jQuery中的一个关键功能——可见性过滤选择器，它允许我们根据元素的可见状态来选择和操作DOM元素。通过了解这个功能，我们可以更高效地控制页面上的元素显示和隐藏。 首先，`:visible`和`:...
**JQ基本过滤选择器详解** 在Web开发中，jQuery（简称JQ）是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。其中，选择器是jQuery的核心功能之一，它允许我们高效地选取DOM...
这在你需要在已选元素的子元素中进一步筛选时很有用。 ### 10. `.closest(selector)` `.closest(selector)`方法则用于找到最近的祖先元素，这个祖先元素必须匹配给定的选择器。这个方法在你需要向上遍历DOM树时非常...
代码如下: :nth-child(‘索引值’)//获取指定元素下的某个子元素的位置，索引从1开始； //偶数行 //$(‘li:nth-child(even)’).addClass(‘class1’); //奇数行 //$(‘li:nth-child(odd)’).addClass(‘class1’); /...
- **内容过滤选择器**：例如`:contains(text)`选取含有指定文本的元素，`:empty`选取不包含子节点的空元素，`:has(selector)`选取包含特定子元素的元素，`:parent`选取包含子节点的元素。 过滤选择器为DOM操作提供...
- `parent > child`：子元素选择器，如`$("div > p")`选取所有直接作为div子元素的段落。 - `prev + next`：相邻兄弟选择器，如`$("div + p")`选取紧跟在div后面的第一个段落。 - `prev ~ siblings`：同级元素...
过滤选择器则帮助我们进一步细化选取结果，例如： 1. **`:first`和`:last`**: 选取第一个或最后一个元素。 2. **`:even`和`:odd`**: 选取索引偶数或奇数的元素。 3. **`:not(selector)`**: 排除匹配指定选择器的...
9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. 重写 JS 实验之员工管理 17. 克隆和替换节点 18. 包裹节点 19....
过滤选择器 jQuery 提供了一系列过滤方法，如 `:visible`、`:hidden`、`:checked`、`:selected` 等，可以进一步筛选元素集合。例如： ```javascript $("input:checked"); // 选择所有被选中的 input 元素 $("div:...
#id') id选择器 2) $('.class') css选择器,class类名 3) $('element') 标签选择器，例如p,h1,div ... 5) $('sele1,sele2') 用‘,'逗号隔开可以...10） $('div:first') 过滤选择器,:first用:与父级元
### 基本过滤选择器 1. **:first**：选取集合中的第一个元素。`$("div:first")`选取所有`<div>`元素中的第一个。 2. **:last**：选取集合中的最后一个元素。`$("div:last")`选取所有`<div>`元素中的最后一个。 3. *...
其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 –> <title></title> <!–使用jQ
- 过滤选择器：`$:first` 选取第一个元素，`:last` 选取最后一个元素，`:eq(index)` 选取索引为index的元素，`:lt(index)` 选取索引小于index的元素，`:gt(index)` 选取索引大于index的元素，`:not(selector)` 选取...
此外，还有属性选择器、过滤器（如基本过滤器、子元素过滤器和内容过滤器）等，这些过滤器允许更精确地选取元素集合。 **JQuery 网页特效** JQuery 提供了一套完整的动画效果API，包括淡入淡出、滑动效果以及...
3. **基本过滤选择器**： - `:first`：选取集合中的第一个元素。例如，`$('div:first')`会选择所有`<div>`元素中的第一个。 - `:last`：选取集合中的最后一个元素。例如，`$('div:last')`会选择所有`<div>`元素中...
- `children()` 返回所有直接子元素。 - `parent()` 返回父元素。 - `siblings()` 返回同级元素。 - `next()` 和 `prev()` 分别返回下一个和上一个兄弟元素。 - `find()` 查找后代元素。 4. **过滤（Filtering...
- `find()`方法用于查找所有后代元素，不仅仅是直接子元素，可以使用选择器来过滤结果。例如，`$("#dom").find("div")`会获取ID为`dom`的元素下所有后代中的`div`元素。 - `contents()`方法返回所有子节点，包括...