<%@ page language="java" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery单元测试</title>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function selTest()
{
//可以取到form中所有的input标记
//form是祖先级的元素
//结果是1、5、2、3
$("form input").each(function(){alert($(this).val());});
//只可以取到form中的input标记
//取不到fieldset中的input标记
//也就是说只能取到儿子辈的，取不到孙子辈的
//form是父级元素
//结果是1、5、3
$("form > input").each(function(){alert($(this).val());});
//取紧跟着label标记的input标记,并且label标记后不能有换行标记，否则也是取不到的
//结果是1和2,取不到5
$("label + input").each(function(){alert($(this).val());});
//取与form同级的input标记
//结果是4
$("form ~ input").each(function(){alert($(this).val());});
}
</script>
</head>
<body>
<input type="button" name="btn" value="层级选择器" onclick="selTest();">
<form action="#">
<label>label1</label>
<input type="text" value="1" name="text1" />
<input type="text" value="5" name="text5" /><br/>
<fieldset>
<label>label2</label>
<input type="text" name="text2" value="2" /><br/>
</fieldset>
<input type="text" value="3" name="text3"/><br/>
</form>
<input type="text" value="4" name="text4"/>
</body>
</html>
分享到：
相关推荐
jQuery层级选择器是前端开发中用于操作HTML文档结构的强大工具，其通过CSS选择器的语法，允许开发者快速选取页面中的元素。在文档对象模型（DOM）中，元素之间存在着层级关系，层级选择器正是用于这些关系的定位。...
jQuery层级选择器是其选择器中的重要组成部分，用于选取特定的DOM元素，它包括了子选择器、后代选择器、相邻兄弟选择器和一般兄弟选择器等。 首先，子选择器“>”用于选取指定元素的直接子元素。例如，代码“$('div...
在本篇内容中，我们主要关注的是如何使用jQuery层级选择器来匹配父元素下的子元素，并通过实现代码展示了具体的操作方法。 首先，jQuery提供了多种层级选择器，用来选取特定层级关系的元素。在文章中提到的有： 1. ...
JQuery选择器，xpath类型等的选择器
jQuery层级选择器是jQuery库中用于选取具有特定层级关系元素的重要工具。它们允许开发者根据HTML文档对象模型（DOM）的结构来精准定位所需元素。在本文中，我们将深入探讨jQuery的层级选择器，包括Descendant ...
在jQuery中，层级选择器是用于选取文档结构中具有特定关系的元素的关键工具。这些选择器使得能够根据元素之间的相对位置来定位DOM中的特定元素，从而实现更精确的DOM操作。本文将详细介绍jQuery中的层级选择器，特别...
#### 二、Jquery层级选择器 层级选择器用于根据元素之间的关系来选取元素，这对于处理复杂的DOM结构非常有用。 - **`$("parent > child")`**：选择所有作为指定父元素直接子元素的元素。 - **`$("ancestor ...
接下来，我们讨论jQuery的层级选择器，这些选择器允许我们根据元素的位置关系进行选取： 1. **后代选择器**: 使用空格分隔两个选择器，如`$("div p")`选取`<div>`内的所有`<p>`元素。 2. **子元素选择器**: 使用`>`...
层次选择器用于处理DOM树中元素间的层级关系，包括祖先、后代、父级、子级等，增强了选择器的表达能力。 1. **ancestor descendant**：选取特定祖先元素下的所有后代元素，如`$(".bgRed div")`选取CSS类为`bgRed`的...
【基于jQuery实现的地址选择器】是一种常用的前端交互组件，常用于用户在填写表单时选择他们的居住地或发货地址。这种组件通过级联下拉菜单的形式，展示省、市、区、乡镇、社区等多级行政区域，使得用户能够方便快捷...
jQuery 3.1 标准课程第二章 选择器层级选择器
1. **直系子元素选择器**：`parent > child`，仅选取指定父元素的直接子元素，例如`$('div > span')`将选取所有直接位于`<div>`标签内的`<span>`元素，排除嵌套层级更深的匹配项。 2. **相邻兄弟选择器**：`prev + ...
- **一般兄弟选择器**：`$("#prev ~ div")`选取与ID为`prev`的元素处于同一层级的所有`<div>`元素。 - **后代选择器**：`$("tr:first")`选取所有`<tr>`元素中的第一个元素。 - **子代选择器**：`$("div span:first-...
优先使用ID选择器，其次类选择器，再是属性选择器，尽量减少层级选择器的使用。 ### 实验室实践 在“jQuery实验室”的环境中，你可以实际操作这些选择器，观察它们在不同场景下的应用效果，加深理解并提升实战技能...
首先，jQuery选择器可以分为基本选择器、层级选择器、属性选择器、内容选择器以及伪类选择器。基本选择器包括ID选择器（`#id`），类选择器（`.class`），元素选择器（`element`）和通配符选择器（`*`）。这些选择器...
五、层级选择器 1. `$("ancestor descendant")`：选取所有祖先元素下的后代元素。 2. `$("parent > child")`：直系子元素选择器，选取父元素的所有直接子元素。 3. `$("prev + next")`：相邻兄弟选择器，选取紧接在...