<!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>2-5</title>
<!-- 引入jQuery -->
<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(){
//选择 body内的所有div元素.
$('#btn1').click(function(){
$('body div').css("background","#bbffaa");
})
//在body内的选择 元素名是div 的子元素.
$('#btn2').click(function(){
$('body > div').css("background","#bbffaa");
})
//选择 所有class为one 的下一个div元素.
$('#btn3').click(function(){
$('.one + div').css("background","#bbffaa");
})
//选择 id为two的元素后面的所有div兄弟元素.
$('#btn4').click(function(){
$('#two ~ div').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="选择 body内的所有div元素." id="btn1"/>
<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
<input type="button" value="选择 所有class为one 的下一个div元素." id="btn3"/>
<input type="button" value="选择 id为two的元素后面的所有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>
效果图：
相关推荐
选择器分为基本选择器、层次选择器、属性选择器、类选择器和ID选择器等多种类型。在表单对象中，我们经常需要根据特定属性来筛选元素，这时属性过滤选择器就显得尤为重要。 二、属性过滤选择器 属性过滤选择器是...
在jQuery中，选择器分为多种类型，包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**： - `#id`：通过ID选择器选取具有特定ID的元素...
3. **层次选择器** - `child`：`>` 选择子元素，如`$("ul > li")`。 - `descendant`：空格选择后代元素，如`$("div p")`。 - `adjacentSibling`：`+` 选择紧邻的同级元素，如`$("div + p")`。 - `generalSibling...
层次选择器基于DOM元素之间的层次关系选取特定元素，包括后代、子、相邻和兄弟元素。 - **后代选择器**：通过空格来选取后代元素，例如`$('div span')`选取所有`<div>`元素内的`<span>`元素。 - **子选择器**：通过...
级联选择器，通常被称为级联下拉框或树形下拉菜单，是一种常见的用户界面元素，尤其在数据层次结构复杂的情况下，它允许用户逐级浏览和选择数据。在JavaScript开发中，这种组件能够为用户提供清晰、直观的导航体验，...
7） $('div>p') 与上一个层次选择器差不多,但是div下面有子元素,子元素下还有孙元素,该选择器只能选子元素 8） $('div+p') 该选择器用得很少表示div相邻下一个选择器,(必须是相同层次元素并且紧挨的） ...
层次选择器基于DOM树结构进行更复杂的选择，包括祖先、后代、直接子元素等。 - **ancestordescendant**：使用祖先和后代的形式，如`$(".bgRed div")`选取所有CSS类为`bgRed`的元素下的所有`<div>`元素。 - **parent...
### 层次选择器 1. **ancestor descendant**：选取祖先元素内的后代元素。如，`$("div span")`选取所有在`<div>`元素内的`<span>`元素。 2. **parent > child**：选取父元素下的子元素。`$("div > span")`选取所有...
在“JQ地区选择（单选/多选）”这个项目中，我们关注的是如何利用jQuery实现一个功能丰富的地区选择器，用户可以选择单一或多个城市和地区，获取相应的ID和名称。 首先，我们要理解这个组件的核心功能。单选模式...
jquery层次选择器 jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈...
三级联动选择器则扩展到了三个层次，如省-市-区的地址选择。它更复杂，但能提供更为精确的筛选。资源包中应该包含了一个完整的示例，演示如何通过JavaScript事件监听和数据同步，实现从省级到市级再到区级的逐级联动...
除了这些基本和层次选择器，jQuery还提供了许多其他高级选择器，如`:contains(text)`（选择包含特定文本的元素）、`:header`（选择所有标题元素，如`<h1>`到`<h6>`）、`:has(selector)`（选择含有特定子元素的元素）...
1. **选择器**：jQuery的选择器功能强大，可以方便地选取DOM元素，如`$("#id")`选取ID为`id`的元素，`$(".class")`选取所有class为`class`的元素。 2. **事件绑定**：`$(element).on("event", function())`用于绑定...
一、Jquery常用的过滤选择器如下所示： 1、:first，选取第一个元素，比如$(“div:first”)选取第一个div元素 2、:last，选取最后一个元素，比如$(“div:last”)选取最后一个div元素 3、:not(选择器)，选取不满足...
层次选择器允许我们根据元素之间的关系来选取特定的元素。在提供的代码示例中，`$('h2').click(function () { $('#menu span').css('background-color','#09F');});`，当`h2`元素被点击时，所有属于`#menu` ID下的`...
这通常涉及到`createElement`、`appendChild`、`removeChild`等DOM API，以及jQuery的`$()`选择器、`.html()`、`.append()`等方法。 2. **数据结构**：为了存储和操作树的数据，可能需要设计一个树节点类，包含节点...
它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择...
例如，在选择器 $('parent childchild') 中，空格表示选取所有parent元素下的所有childchild元素，不论这些childchild元素是直接子元素还是更深层次的后代元素。 接着，大于号（>）是子代选择器，它只能选择指定...
总结来说，jQuery手风琴效果的实现主要涉及HTML结构布局、CSS样式设置以及jQuery的选择器、事件监听和动画方法。理解这些基础，再结合实际的源码分析，可以更好地理解和创建出符合需求的手风琴效果。在网页设计和...