`

jquery学习之siblings解析

阅读更多
siblings(".selected")查找所有类名为"selected"的同胞元素
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>
  

<script>
$("p").siblings(".selected").css("background", "yellow");
</script>

</body>
</html>
result:
<p class="selected">的背景色被设置为黄色。



<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li class="selected">list item 4</li>
   <li>list item 5</li>
</ul>
<div class="selected"></div>

<script>
$('li.third-item').siblings(".selected").css('background-color', 'red');
</script>

</body>
</html>
result:只有第四个li被选中。

要想同时选中第三个li,则要使用andSelf().




分享到:
评论

相关推荐

    jQuery加载并解析XML

    `$.ajax()`是jQuery的核心功能之一,支持多种类型的请求,包括XML。下面是一个使用`$.ajax()`加载XML的基本示例: ```javascript $.ajax({ type: "GET", url: "data.xml", // XML文件路径 dataType: "xml", ...

    Jquery学习资源

    自2006年发布以来,jQuery已经成为了前端开发的标准工具之一,因其简洁的语法和丰富的功能而备受青睐。 ### 一、jQuery核心概念 1. **选择器**: jQuery的选择器基于CSS,可以方便地选取DOM元素。例如,`$("#myID")...

    jquery学习材料(附大量完整实例)

    《jQuery学习资源与实战解析》 jQuery,作为一款强大的JavaScript库,自2006年发布以来,就因其简洁易用的API和丰富的功能而深受开发者喜爱。它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互,使得前端开发...

    jQuery操作DOM解析

    **jQuery操作DOM解析** 在Web开发中,DOM(Document Object Model)是HTML或XML文档的结构化表示,它允许程序和脚本动态更新、添加、删除和改变元素。jQuery库简化了JavaScript对DOM的操作,提供了丰富的API来处理...

    jquery学习资料

    动画和过渡效果是jQuery吸引人的特点之一,`.fadeIn()`,`.slideUp()`,`.animate()`等方法使得复杂的动画效果变得简单。同时,jQuery UI库提供了更丰富的交互和视觉效果。 除此之外,jQuery还支持AJAX操作,如`....

    jQuery中siblings()方法用法实例

    下面我们将详细解析`siblings()`方法的用法、功能、参数以及实例。 **方法定义与用法** `siblings()`方法的基本语法如下: ```javascript $(selector).siblings([expr]) ``` 这里,`selector`是一个jQuery选择器...

    jQuery siblings()用法实例详解

    通过上述的实例和详细解析,我们了解到jQuery中的siblings()方法如何与click事件和类选择器结合,实现对同级元素的选择和操作。这不仅增强了页面的交互性,还使得代码更加简洁和高效。在实际开发中,掌握并熟练运用...

    jquery学习笔记附带例子

    以下是对jQuery核心功能及应用场景的深入解析。 #### 1. 获取与修改页面元素 jQuery强大的选择器引擎使得开发者能够快速定位页面中的元素,无论是通过标签名、ID还是类名,都可以轻易实现。例如,`$('p')`会选取...

    jqery源码逐步解析视频(高清)

    ### jQuery源码逐步解析知识点概览 #### 一、jQuery简介 ...通过以上对jQuery源码逐步解析的知识点概览,我们可以深入了解jQuery的工作原理和内部机制,这对于深入学习前端技术、提高编程效率具有重要意义。

    jquery1.4.2库 jquery1.4.2中文参考手册

    本文将通过《jQuery 1.4.2 API帮助文档简体中文版.chm》和实际代码文件(jquery-1.4.2.js和jquery-1.4.2.min.js)来解析其主要功能和用法。 一、jQuery选择器 jQuery的核心是其选择器机制,它简化了DOM元素的选取。...

    jQuery经典例子大全

    这个“jQuery经典例子大全”集合了多种实用示例,涵盖了jQuery的核心功能和常见应用场景,以下将对其中的关键知识点进行详细解析。 1. **选择器(Selectors)** jQuery的选择器允许我们高效地选取DOM元素。例如,`...

    15天学会jQuery.rar

    - 学习如何在jQuery中解析和生成JSON数据 - 探讨serialize()和serializeArray()方法用于表单数据序列化 第九天:插件开发与使用 - 理解jQuery插件开发的基本原理和结构 - 学习如何创建自定义插件 - 探索和使用常见...

    分类解析jQuery选择器

    本篇文章将深入解析jQuery选择器的分类和使用,帮助读者理解和掌握这一关键技能。 1. **基本选择器**: - `#id`:通过ID匹配唯一的一个元素,如`$("#myID")`。 - `.class`:根据类名匹配元素,如`$(".myClass")`...

    jquery1.3.2 中文api

    《jQuery 1.3.2 中文 API:深入解析与应用》 jQuery 是一个高效、简洁的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 1.3.2 版本是其发展历史上的一个重要里程碑...

    jQuery实现的动态伸缩导航菜单实例

    鼠标事件是用户与页面交互的主要方式之一,而jQuery提供了click、mouseover、mouseout等多种鼠标事件方法来响应用户的操作。在这个实例中,点击事件(.click)被用来触发导航菜单项的展开与折叠。 动画方法是jQuery中...

    jqueryapi文档

    本篇将深入解析jQuery API,帮助你更好地理解和运用这一经典工具。 一、jQuery选择器 jQuery选择器是其强大的核心之一,它基于CSS选择器,如ID选择器("#id")、类选择器(".class")和元素选择器("tagname")。同时,...

    jquery+asp.net综合实例

    《jQuery与ASP.NET综合应用深度解析》 在Web开发领域,jQuery和ASP.NET是两种非常重要的技术。jQuery作为一款轻量级的JavaScript库,极大地简化了DOM操作、事件处理、动画效果以及Ajax交互,而ASP.NET则是Microsoft...

    Jquery 1.11.0 API

    《jQuery 1.11.0 API 深度解析》 jQuery,作为一款轻量级、功能强大的JavaScript库,自发布以来就深受开发者喜爱。本文将深入探讨jQuery 1.11.0版本的API,帮助开发者更好地理解和运用这个版本中的各种功能。 一、...

    锋利的jQuery源代码

    《锋利的jQuery源代码》是一本专门为jQuery初学者设计的学习资源,旨在帮助读者深入理解jQuery的核心机制,通过解析和解读jQuery的源代码,提升JavaScript编程能力。jQuery是一款广泛使用的JavaScript库,它简化了...

    JQuery.js 源码(1.1 和2.x)

    1. **选择器引擎Sizzle**:JQuery的强大力量之一就是其高效的选择器引擎,能够解析CSS1至CSS3的选择器,并快速找到匹配的DOM元素。Sizzle使用正则表达式和数组操作来实现高性能的查询。 2. **DOM操作**:包括`$...

Global site tag (gtag.js) - Google Analytics