<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(){
//选取含有文本"di"的div元素.
$('#btn1').click(function(){
$('div:contains(di)').css("background","#bbffaa");
})
//选取不包含子元素(或者文本元素)的div空元素.
$('#btn2').click(function(){
$('div:empty').css("background","#bbffaa");
})
//选取含有class为mini元素 的div元素.
$('#btn3').click(function(){
$('div:has(.mini)').css("background","#bbffaa");
})
//选取含有子元素(或者文本元素)的div元素.
$('#btn4').click(function(){
$('div:parent').css("background","#bbffaa");
})
});
</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="选取含有文本“di”的div元素." id="btn1"/>
<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
<input type="button" value="选取含有子元素(或者文本元素)的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>
效果图：
相关推荐
本文将深入探讨“JQ子元素过滤选择器”，这是一个强大的功能，可以帮助开发者精确地定位到DOM树中的特定子元素，进而进行进一步的操作。通过学习和掌握这些选择器，可以提高开发效率，使代码更加简洁易读。 首先，...
本文将深入探讨“JQ表单对象属性过滤选择器”的概念，以及如何在实际开发中有效地利用它们。 一、jQuery选择器概述 jQuery选择器是其强大功能的核心之一，它允许开发者通过简洁的语法来选取DOM元素。选择器分为基本...
**JQ基本过滤选择器详解** 在Web开发中，jQuery（简称JQ）是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。其中，选择器是jQuery的核心功能之一，它允许我们高效地选取DOM...
在实际应用中，可见性过滤选择器非常实用，特别是在处理表单验证、动态内容加载或用户交互时。例如，你可以监听某个按钮的点击事件，然后根据选择器改变特定元素的可见性： ```javascript $("#toggleButton").click...
`.filter(selector)`则根据指定的选择器对当前元素集合进行过滤，返回匹配选择器的元素。此外，它还可以接收一个函数作为参数，函数会为每个元素执行，并根据返回值决定是否保留该元素。 ### 9. `.find(selector)` ...
4. **支付方式选择**：允许用户选择不同的支付方式，如信用卡、支付宝、微信支付等，过滤器可以在此环节检查支付的有效性。 5. **验证用户信息**：在结算前，过滤器还可以检查用户是否已登录、收货地址是否完整等，...
在jQuery中，选择器分为多种类型，包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**： - `#id`：通过ID选择器选取具有特定ID的元素...
- **内容过滤选择器**：例如`:contains(text)`选取含有指定文本的元素，`:empty`选取不包含子节点的空元素，`:has(selector)`选取包含特定子元素的元素，`:parent`选取包含子节点的元素。 过滤选择器为DOM操作提供...
过滤选择器则帮助我们进一步细化选取结果，例如： 1. **`:first`和`:last`**: 选取第一个或最后一个元素。 2. **`:even`和`:odd`**: 选取索引偶数或奇数的元素。 3. **`:not(selector)`**: 排除匹配指定选择器的...
过滤选择器 jQuery 提供了一系列过滤方法，如 `:visible`、`:hidden`、`:checked`、`:selected` 等，可以进一步筛选元素集合。例如： ```javascript $("input:checked"); // 选择所有被选中的 input 元素 $("div:...
在jQuery中，可见性过滤选择器是用于根据元素的可见状态来选取元素的重要工具。这些选择器分为两类：`:hidden` 和 `:visible`。它们允许开发者高效地操作页面上那些用户当前可以看到或无法看到的元素。 `:hidden` ...
### 内容过滤选择器 1. **:contains(text)**：选取包含指定文本的元素。`$("div:contains('我')")`选取包含文本"我"的`<div>`元素。 2. **:empty**：选取没有子元素或文本的空元素。`$("div:empty")`选取没有子元素...
1. **选择器字符串过滤**： 当`filterSelector`是一个CSS选择器时，`filter()`会保留与该选择器匹配的元素。例如，如果你有一个包含多个`<div>`的集合，你可以通过`filter('.class')`来只保留具有指定类名的`<div>`...
代码如下:$(“ancestor descendant”)：选取parent元素后所有的child元素$(...注:siblings是过滤器后两个用的比较少，一般会有其他选择器替代 代码如下:$(“prev + next”)等价于next()$(“prev ~ siblings”)等价
6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. ...
#id') id选择器 2) $('.class') css选择器,class类名 3) $('element') 标签选择器，例如p,h1,div ... 5) $('sele1,sele2') 用‘,'逗号隔开可以...10） $('div:first') 过滤选择器,:first用:与父级元
《jQuery.Datepair日期时分秒选择器详解及应用实践》 在Web开发中，日期和时间的选择是一个常见的功能，尤其在处理预约、日程安排或时间表等场景中。jQuery.Datepair是一个强大的JavaScript插件，它允许用户在两个...
2. **查询与过滤**：通过使用类似jQuery的选择器语法，用户可以轻松地选择JSON对象中的特定部分。例如，`jq '.key'`可以提取所有包含名为'key'的属性的对象。 3. **转换与操作**：jq支持丰富的函数库，可以对数据...