[color=red][size=x-large]内容选择器[/size][/color]
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#button1").click(function()
{
//匹配包含给定文本的元素.
//查找所有包含 "test" 的 div 元素
$("div:contains('test')").css("background","red");
});
$("#button2").click(function()
{
//匹配所有不包含子元素或者文本的空元素
//查找所有不包含子元素或者文本的空元素
$("div:empty").css("background","blue");
});
$("#button3").click(function()
{
//匹配含有选择器所匹配的元素的元素
//给所有包含class="mini" 元素的 div 元素添加background
$("div:has('.mini')").css("background","red");
});
$("#button4").click(function()
{
//匹配含有子元素或者文本的元素
//查找所有含有子元素或者文本的 td 元素
$("div:parent").css("background","yellow");
});
$("#button5").click(function()
{
//查找隐藏的 tr
//alert($("div:hidden").length);
$("div:hidden").show(3000).css("background","orange");
});
$("#button6").click(function()
{
//查找所有可见的 tr 元素
//alert($("div:hidden").length);
$("div:visible").show(3000).css("background","orange");
});
});
</script>
分享到:
相关推荐
选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景,熟悉并...
jQuery中的内容选择器如`:has()`和`:empty`允许我们根据元素包含的内容进行选择,而属性选择器如`$("[attribute=value]")`则让我们能根据HTML属性选取元素。 最后,表单选择器如`:$(":input")`选取所有输入元素,`:...
6. **内容选择器** - `:contains(text)`:选择包含特定文本的元素,如`$("p:contains('Hello')")`。 - `:empty`:选择没有子节点的元素。 - `:has(selector)`:选择包含匹配指定选择器的子元素的元素。 7. **...
3. **文本内容选择器**:选择包含特定文本的元素。 - 示例:`$('table td:contains("Henry")')`会选择包含文本“Henry”的表格单元格,并为其添加`highlight`类。 以上内容涵盖了JQuery 1.3.2版本中的基础选择器和...
本文将重点介绍jQuery的内容选择器和表单选择器,并通过实例来分析其功能和用法,同时也会提到在使用过程中需要留意的注意事项。 ### 内容选择器 内容选择器是基于DOM元素的文本内容或者子元素来筛选元素的选择器...
首先,jQuery选择器可以分为基本选择器、层级选择器、属性选择器、内容选择器以及伪类选择器。基本选择器包括ID选择器(`#id`),类选择器(`.class`),元素选择器(`element`)和通配符选择器(`*`)。这些选择器...
内容选择器基于元素的内容进行选择。 - `:contains(text)`: 选取包含指定文本的元素,例如`$("p:contains('Hello')")`。 - `:empty`: 选取没有子节点(包括文本节点)的元素。 - `:parent`: 选取有子节点的元素。 ...
此外,jQuery还提供了其他复杂的选择器,如属性选择器、内容选择器等,它们可以根据元素的属性值、文本内容或后代元素来选取元素。例如,`jQuery("[title]")`会选择所有有`title`属性的元素,而`jQuery(":contains('...
本文将深入探讨"JQ内容过滤选择器"这一关键知识点,它是jQuery选择器体系中的一个重要组成部分,用于从DOM树中筛选出符合特定条件的元素。 一、JQ内容过滤选择器概述 内容过滤选择器允许我们根据元素内部的文本或...
9. 内容选择器: `:contains(text)`选择器会选取包含特定文本的元素,`:empty`选择器会选取没有子元素(包括文本节点)的元素。 10. 表单选择器: 对于表单元素,jQuery提供`:input`,`:text`,`:password`,`:...
内容选择器是基于元素的内容来选取元素的,例如检查一个元素是否为空或是否包含其他元素。 - **`$(":empty")`**:选择所有不含有子元素或者文本的元素。 - **`$(":contains('text')")`**:选择包含给定文本的元素。...
4. **内容选择器**: 根据元素内容选取,如 `:contains()`, `:empty` 和 `:has()`: ```javascript $("p:contains('Hello')"); // 包含特定文本的元素 $("div:empty"); // 内容为空的元素 $("div:has(p)"); // ...
本文将深入探讨jQuery中的几个基础但实用的选择器:`:first`、`:last`、`:not`、`:even`、`:odd` 和 `:eq`。 1. **`:first` 选择器** `:first` 选择器用于选取集合中的第一个元素。在给定的示例中,它用于选取表格...
CSS 选择器是用于选取 HTML 或 XML 文档中元素的语法,它们在网页爬虫、页面解析以及动态网页内容的提取中扮演着重要角色。下面将详细介绍 JSoup 支持的各种 CSS 选择器及其用法。 1. **基本选择器**: - `*`: ...
"横向滑动时间选择器"是一个创新的UI组件,它提供了不同于传统下拉菜单或数字滚轮的时间选取方式,用户可以通过在水平方向上滑动来选择所需的时间。这种设计既直观又具有良好的用户体验,尤其适用于空间有限或者需要...
树形选择器是一种常见的用户界面元素,特别是在数据管理和配置应用中。它允许用户在层次结构中进行选择,这种层次结构通常以树的形式呈现,也就是所谓的“树型结构”。树型结构是一种数据组织方式,其中每个节点可以...
本Demo主要关注的是CSS选择器的使用,旨在帮助初学者更好地理解和应用选择器。我们将深入探讨CSS选择器的基本类型,以及如何在实际项目中有效利用它们。 一、CSS选择器概述 CSS(层叠样式表)选择器是用于选取HTML...
在jQuery中,选择器分为多种类型,包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**: - `#id`:通过ID选择器选取具有特定ID的元素...
内容过滤选择器和子元素过滤选择器是jQuery选择器的两个重要类别,它们允许开发者更精确地定位和操作DOM元素。以下是对这两个类别及其相关选择器的详细解释和实例分析。 一、jQuery内容过滤选择器 1. `:contains...