`
1140566087
  • 浏览: 559428 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
博客专栏
2c4ae07c-10c2-3bb0-a106-d91fe0a10f37
c/c++ 入门笔记
浏览量:18542
3161ba8d-c410-3ef9-871c-3e48524c5263
Android 学习笔记
浏览量:314212
Group-logo
J2ME 基础学习课程集
浏览量:18762
A98a97d4-eb03-3faf-af96-c7c28f709feb
Spring 学习过程记录...
浏览量:17584
社区版块
存档分类
最新评论

jQuery 之层次选择器

阅读更多
1.2:层次选择器:
说明:层次选择器通过DOM元素的层次关系获得元素,其主要的层次
关系包括后代、父子、相邻、兄弟关系,通过其中的关系可以快速定
位元素:
ancetor descendant 根据祖先元素匹配所有的后代元素,返回集合元素;
parent>child 根据付元素匹配所有的子元素,返回元素集合;
prev+next 匹配第一个的紧接在prev元素后的相邻元素,返回元素集合;
prev~siblings 匹配元素之后所有的兄弟元素,返回元素集合;

注意:其中prve+next 可以使用.next()替代,而prve~siblings可以使用nextAll()替代;

		<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
			<head>
			
			<style type="text/css">
			*{
				text-align: center;
			}
				.y{
					font-size: 14px;
					background-color: purple;
				}
			</style>
				<!-- ************************** 导入 *********************************** -->
				<script type="text/javascript" src="js/jquery-1.8.3.js">
		</script>
				<!-- ************************************************************* -->
				
		
				<script type="text/javascript">
		
		//程序入口
		$(document).ready(function() {
			test();
		});
		
		//提示:JQuery中的调用关系和java中方法调用类似
		function test(){
			//$("#xx").css("background","yellow");	//匹配id=xx 后代所有元素
			//$("#xx #xx2").css("background","red");	//匹配id==xx 后代 id==xx2的所有元素,包含关系
			//$("#xx p").addClass("y");				//匹配id=xx 后代所有的<p>元素,包含关系
			//$("#xx,#yy").addClass("y");				//匹配id=xx id=yy 后代所有元素
			//$("#xx>#xx2").addClass("y");			//匹配id=xx 后代id=xx2的所有元素
			//$("#xx>p").addClass("y");				//匹配当前ID 下的所有p元素
			//$("#xx+div").addClass("y");				//匹配id=xx 紧相邻的div元素,注意:是紧挨着的
			//$("#xx").next().addClass("y");			//匹配当前id元素的下一元素
			//$("#xx+div").next().addClass("y");		//匹配id=xx 紧挨着的div紧挨着的div; (紧挨着)  加号后面指定紧挨着的元素类型
			//$("#xx+div").nextAll().addClass("y");		//匹配id=xx 紧挨着的为div,以及该div后的所有元素
			//$("#xx").next().next().nextAll().addClass("y");
			//$("#xx").nextAll().addClass("y");			//匹配id=xx 之后的所有元素,并列的;
			//$("#xx~div").addClass("y");				//匹配当前ID 后面的所有div
			//$("#xx~").addClass("y");					//匹配当前ID后的所有元素
			//$("#xx1").parent().next().addClass("y");	//匹配当前id的父元素的下一元素
		}
		</script>
			</head>
			<body>
				<h3>层次选择器测试</h3>
				<div id="xx">
					<div id="xx1">xx的子元素xx1</div>
					<div id="xx2">xx的子元素xx2</div>
					<div id="xx3">xx的子元素xx3</div>	
					<p>我是p元素</p>		
				</div>	
				<p>我是p元素</p>	
				<div id="yy">
					<div id="yy1">yy的子元素yy1</div>
					<div id="yy2">yy的子元素yy2</div>
				</div>
				<div id="bb">我的ID 为 :bb</div>
				<p>插一脚</p>
				<div id="aa">我的ID 为 :aa</div>
				
			</body>
		</html>
分享到:
评论

相关推荐

    jQuery选择器全解.

    选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景,熟悉并...

    jQuery选择器大全

    层次选择器专注于元素间的父子关系和兄弟关系,增强选择的精确度。 1. **直系子元素选择器**:`parent &gt; child`,仅选取指定父元素的直接子元素,例如`$('div &gt; span')`将选取所有直接位于`&lt;div&gt;`标签内的`&lt;span&gt;`...

    jQuery选择器基础知识

    层次选择器允许我们根据元素在文档结构中的位置来选取元素。主要有子元素选择器(&gt;`),后代选择器(`&gt;`),相邻兄弟选择器(+)和后续兄弟选择器(~)。 - `$("div &gt; p")` 选择所有直接位于`&lt;div&gt;`内的`&lt;p&gt;`元素。...

    jQuery层次选择器选择元素使用介绍

    其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择...

    jQuery选择器速查表

    层次选择器基于DOM元素之间的层次关系选取特定元素,包括后代、子、相邻和兄弟元素。 - **后代选择器**:通过空格来选取后代元素,例如`$('div span')`选取所有`&lt;div&gt;`元素内的`&lt;span&gt;`元素。 - **子选择器**:通过...

    jQuery选择器大全(48个代码片段 21幅图演示)

    3. **层次选择器** - `child`:`&gt;` 选择子元素,如`$("ul &gt; li")`。 - `descendant`:空格选择后代元素,如`$("div p")`。 - `adjacentSibling`:`+` 选择紧邻的同级元素,如`$("div + p")`。 - `generalSibling...

    Jquery实验室的选择器工具

    层次选择器允许我们根据元素之间的关系来选取元素。这些包括子选择器(`&gt;`),后代选择器(` `),相邻兄弟选择器(`+`)和后续兄弟选择器(`~`)。例如,`$("div &gt; p")`选取所有直接位于`&lt;div&gt;`元素内的`&lt;p&gt;`元素,...

    PPT和案例\jQuery选择器

    层次选择器用于根据元素之间的关系进行选择,包括子选择器(`&gt;`)、后代选择器(` `)、相邻兄弟选择器(`+`)和后续兄弟选择器(`~`)。例如: - `$("#parent &gt; #child")` 选择ID为`parent`的元素内的直接子元素`...

    jQuery学习资料之万能的选择器

    - **层次选择器**:`&gt;`(子元素选择器)、`+`(紧邻兄弟选择器)、`~`(后续兄弟选择器)和` `(后代选择器)。 - **属性选择器**:`[attr]`(具有指定属性的元素)、`[attr=value]`(属性值等于指定值的元素)、`...

    Jquery 选择器整理

    层次选择器允许开发者基于元素之间的关系来选择元素,这包括兄弟元素、后代元素等。这些选择器可以帮助我们更精确地定位到页面中的特定元素。 **实例:** 1. **选择紧接在另一个元素后的兄弟元素(相邻兄弟)** -...

    jquery选择器入门详解小案例

    jQuery支持多种CSS选择器,包括基本选择器、层次选择器、属性选择器和类选择器等。这些选择器可以帮助我们更精确地定位到我们需要操作的DOM元素。 1. **基本选择器**: - `$("#id")`:通过ID选择元素,例如`$("#...

    jquery选择器及jquery表单操作

    #### 层次选择器 - **子元素选择器**:`$("#main &gt; *")`选取ID为`main`的元素的所有直接子元素。 - **相邻兄弟选择器**:`$("label + input")`选取紧接在`&lt;label&gt;`元素后的`&lt;input&gt;`元素。 - **一般兄弟选择器**:`...

    jQuery树形选择器代码.zip

    《jQuery树形选择器代码详解》 在网页开发中,数据的展示方式多种多样,其中树形结构是一种常见的数据组织形式,尤其适用于层次关系复杂的场景。jQuery作为一个强大的JavaScript库,提供了丰富的选择器来操作DOM...

    jQuery基本选择器和层次选择器学习使用

    本文将详细介绍jQuery中的基本选择器和层次选择器的使用方法,为那些希望使用jQuery来增强网页功能的开发者提供参考。 首先,基本选择器是最为常用的,它包括ID选择器、类选择器、标签选择器以及通配符选择器。ID...

    详解强大的jQuery选择器之基本选择器、层次选择器

    本文将详细介绍jQuery的基本选择器和层次选择器。 首先,我们来看基本选择器,这是jQuery中最基础也最常见的选择器。它们主要包括: 1. **ID选择器 (#id)**: 通过指定的ID来选取页面上唯一的一个元素。ID在HTML中...

    jquery选择器学习文档

    2. **层次选择器** - `祖先 后代`:匹配所有祖先元素的后代,如`$("div p")`会选择所有在`&lt;div&gt;`内的`&lt;p&gt;`元素。 - `父 &gt; 子`:匹配所有父元素的直接子元素,如`$("ul &gt; li")`选取`&lt;ul&gt;`下的直接`&lt;li&gt;`子元素。 -...

    jquery 选择器 大全

    在jQuery中,选择器分为多种类型,包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**: - `#id`:通过ID选择器选取具有特定ID的元素...

    JQ 层次选择器

    层次选择器是jQuery的核心功能之一,它允许我们根据元素在HTML文档结构中的位置来选取元素。下面我们将详细讲解几种主要的层次选择器,并通过实例演示它们的用法。 1. **后代选择器(Descendant Selector)** - ...

    JQuery中层次选择器用法实例详解

    接下来将详细介绍JQuery层次选择器的用法,并通过实例进一步阐释。 1. 后代选择器(后代元素) 后代选择器通过空格分隔,能够选择所有指定祖先元素下的后代元素,包括直接子元素以及更深层次的元素。其语法如下: `...

Global site tag (gtag.js) - Google Analytics