`

选择器——层次选择器

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>层次选择器</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		//$(".one div").css("background","red");//选择class=one下的子元素及孙子div。
		//$(".two > div").css("background","#fffaab");//只选择class=two下的直接子元素div
		//$(".two>.two_child").css("background","#fffaab");//只选择class=two下的直接子元素div,不选孙子辈
		//$(".two+div").css("background","#fdfacb");//只选择class=two元素下面的下一个元素(只能选择紧挨的,不能选相间的,如果要选不紧挨的,就next("select")方法)。只选择兄弟,不选孙子
		//$(".two~div").css("background","red");//只选择class=two的元素后面的所以div兄弟,不包括兄弟的子元素和孙子元素
		//$(".two + span").css("background","red");//这种写法是错误的。获取不到span
		/*
		*.nextAll("span:first")获取class=two下面的所有span,但是不包括其他元素下面的span子元素
		 :frist基本过滤选择器,在这里表示多个span中选择第一个span。
		*/
		$(".two").nextAll("span:first").css("background","red");
	});
</script>
</head>
<style type="text/css">
	.two 
</style>
<body>
<div class="one">
	<ul>
		<li>计算机</li>
		<li>软件开发</li>
		<li>硬件维护</li>
		<li>桌面维护</li>
		<li>运维</li>
	</ul>
	<div>JQUERY</div>
</div>
<div class="two">
	<div>Java WEB开发</div>
	<div class="two">
		<div>java SE</div>
		<span>javascript4</span>
	</div>
</div>
<div class="three">前端工程师</div>
<div class="four">网页制作</div>
<span>javascript</span>
<span>javascript1</span>
<span>javascript2</span>
</body>
</html>

 

分享到:
评论

相关推荐

    js学习笔记——(15)jQuery选择器、样式操作、效果

    #### 1.2 层次选择器 - `$(‘ancestor descendant’)`:选取所有祖先元素下的后代元素。 - `$(‘parent &gt; child’)`:选取父元素下的直接子元素。 - `$(‘prev + next’)`:选取紧接在前一个元素后的下一个同级元素...

    锋利的jQuery_高清_书签.part2

    2.3.2 层次选择器 2.3.3 过滤选择器 2.3.4 表单选择器 2.4 应用jQuery改写示例 2.5 选择器中的一些注意事项 2.5.1 选择器中含有特殊符号的注意事项 2.5.2 选择器中含有空格的注意事项 2.6 案例研究——某网站品牌...

    jquery插件——多级菜单

    在多级菜单中,我们可能会使用`&gt;`(子元素选择器)、`+`(相邻兄弟选择器)或`~`(后续兄弟选择器)来选取特定的菜单项。 3. **事件绑定**:使用`.on()`方法可以绑定点击或鼠标悬停事件到菜单项上。例如,当用户...

    【练习向】jQuery基础教程第四版章节源码——Book02_jQuery_选择元素

    jQuery还引入了层次选择器,如`$("parent &gt; child")`用于选取父元素下直接的子元素,`$("ancestor descendant")`选取所有祖先元素下的后代元素。这对于在复杂的DOM结构中定位元素非常有用。 除此之外,jQuery提供了...

    机械设计——课程设计——减速器爆炸图模拟

    在“机械设计——课程设计——减速器爆炸图模拟”这个主题中,我们将探讨如何通过爆炸图来清晰地展示减速器的内部结构和组件关系。 爆炸图,也称为拆解图或展开图,是一种将复杂设备或系统按照其组装顺序或功能关系...

    网页模板——jQuery实现多层次的手风琴效果源码.zip

    2. **选择器**: jQuery的选择器用于选取HTML元素。例如,`$("#id")`选择ID为`id`的元素,`$(".class")`选择所有class为`class`的元素,`$("tag")`选择所有`tag`类型的元素。在手风琴效果中,我们需要选择特定的元素...

    swift-Magnetic可定制地类似AppleMusic磁力吸引式泡泡选择器组件

    本篇文章将深入探讨“Magnetic”——一个可定制的、类似于Apple Music磁力吸引式泡泡选择器组件。 首先,我们要理解“磁力吸引式泡泡选择器”的概念。在Apple Music应用中,这种选择器以一种直观且吸引人的形式展示...

    车载电子电器架构 —— 基础技术概念开发.docx

    ### 车载电子电器架构——基础技术概念开发 #### 一、基础技术概念介绍 在车载电子电器架构中,基础技术概念对于整个系统的开发至关重要。这部分内容将详细介绍与基础技术相关的各个概念及其作用。 - **...

    lg三级联动——好东西

    在IT行业中,"三级联动"通常指的是在用户界面设计中的一种交互模式,特别是在下拉菜单或者选择器中,涉及三个层次的关联选择。这种联动机制常见于地区选择、分类筛选等场景,用户在选择一级选项后,二级和三级选项会...

    车载电子电器架构 —— 电气架构开发计划.docx

    ### 车载电子电器架构 —— 电气架构开发计划 #### 一、软件计划概述 车载电子电器架构中的电气架构开发计划是一项复杂的系统工程,它涵盖了从软件需求分析到最终部署维护的整个生命周期。这一过程不仅需要关注...

    雅虎开源的一系列 UI 组件,目前只放出了图片选择器组件,做的相当棒,期待雅虎更多的分析.zip

    《雅虎开源UI组件——阳明山图片选择器组件详解》 在当今的移动应用开发领域,优秀的用户界面(UI)组件是提升用户体验的关键因素之一。雅虎作为全球知名的科技公司,一直以来都在积极推动技术创新和开源文化的发展...

    网络练习和答案——————

    这篇资料主要涵盖了计算机网络的基础知识,包括网络设备、数据编码、网络层次结构、协议、网络连接方式等多个方面。以下是根据提供的内容提炼出的知识点: 1. 调制解调器(MODEM)的功能:调制解调器主要用于模拟...

    JQuery使用笔记

    首先,JQuery 的选择器分为几大类,包括基本选择器、层次选择器、过滤选择器和表单选择器。基本选择器是最基础的,包括通过 ID(#id)、类(.class)、元素(element)以及通配符(*)来选取元素。例如,`$('#test')...

    cs拆弹失败——mp3——音效文件

    1. **导入与预设**:在Unity编辑器中,选择“Assets”&gt;“Import New Asset”将MP3文件导入项目。导入后,Unity会自动创建一个Audio Clip预设,可以在此基础上调整参数。 2. **音频控制器**:创建一个Audio Source...

    jquery快速高效制网页特效7.0版本

    它们分为基础选择器(如ID选择器、类选择器、标签选择器)、层次选择器(如后代选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器)、属性选择器(如根据属性值、属性包含、属性开始、属性结束、属性等于进行...

    fpga———— 入门讲义

    这种层次的集成使得FPGA从单纯的“连接逻辑”转变为嵌入式系统的中心,应用范围从简单的接口连接扩展到复杂的系统级设计。 在SOPC阶段,设计流程也从以HDL为主的硬件设计转变为以系统级设计为主,更多地考虑软件与...

    Android源码——文件管理器.zip

    这些Intent可以在文件选择器中触发,让用户在多个文件管理器间进行选择。 总之,Android源码中的文件管理器涉及到文件系统、ContentProvider、权限管理、UI设计等多个方面,理解和掌握这些知识对于开发高效且用户...

    Android2.2 API 中文文档系列(7) —— ImageButton

    ### Android2.2 API中文文档系列(7)—— ImageButton #### 概述 在本篇文档中,我们将深入了解`ImageButton`这...此外,状态选择器的灵活应用可以让`ImageButton`在不同状态下展现出不同的视觉效果,增强用户体验。

    Android系统级深入开发——移植与调试 pdf

    2. **Linux内核移植**:Android基于Linux内核,移植工作涉及选择合适的内核版本、配置内核模块、驱动程序的编写或修改,以及内核编译和引导加载器的调整。这一步骤对于支持新的硬件平台至关重要。 3. **HAL...

    eda实验报告

    采用层次化设计,将2选1多路选择器作为基本单元,通过两次元件例化来构造3选1多路选择器。输入端口包括A0, a1, a2, a3,控制信号s0, s1,以及输出端口outy。中间添加了一个临时端口tmp,首先通过mux21a确定a1和a2...

Global site tag (gtag.js) - Google Analytics