JQuery中的siblings()是什么意思
jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索。
实例演示:点击某个li标签后将其设置为红色,而其所有同胞元素去除红色样式。
1.创建Html元素
<div class="box"> <span>点击li元素设置红色并去除其余所有同胞元素的红色样式:</span> <div class="content"> <li>栗子</li> <li>李子</li> <li>梨子</li> <li>荔枝</li> </div> </div>
2.设置css样式:
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
li{padding:10px;}
.red{color:red;}
3.编写jquery代码
$(function(){
$("li").click(function() {
$(this).addClass('red'); // 设置被点击元素为红色
$(this).siblings('li').removeClass('red'); // 去除所有同胞元素的红色样式
})
})
4.观察效果:点击李子,李子呈红色,其余li元素正常

JQuery中的siblings()是什么意思的更多相关文章
- jQuery中的siblings
所谓siblings,英文翻译就是兄弟节点.那么故名思意,就是拿到某元素的兄弟节点(不包括自己). <html> <head> <script type="te ...
- jQuery中的siblings()的用法
siblings 英文翻译 兄; 弟; 姐; 妹; 的意思 siblings()用于查找当前元素的同胞元素,就是拿到当前元素的兄弟节点(不包括自己). 给当前元素设置新的样式,并删除当前元 ...
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery学习笔记(四)jQuery中的动画
目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- [置顶] Jquery中DOM操作(详细)
Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...
- jquery中链式操作的this指向
jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...
- jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...
随机推荐
- Winserver下的Hyper-v “未在远程桌面会话中捕获到鼠标”
异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 服务器相关的知识点:http://www.cnblogs.com/dunitia ...
- X86和X86_64和X64有什么区别?
x86是指intel的开发的一种32位指令集,从386开始时代开始的,一直沿用至今,是一种cisc指令集,所有intel早期的cpu,amd早期的cpu都支持这种指令集,ntel官方文档里面称为&qu ...
- CRL快速开发框架系列教程九(导入/导出数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- 我这么玩Web Api(二):数据验证,全局数据验证与单元测试
目录 一.模型状态 - ModelState 二.数据注解 - Data Annotations 三.自定义数据注解 四.全局数据验证 五.单元测试 一.模型状态 - ModelState 我理解 ...
- 【云知道】LoadRunner 录制问题集锦
关键词:各路录制小白汇集于此 虽然知道君对录制不感冒,但总是看到扎堆的人说这些问题,忍不住要站出来了. 百度虽好,帮助了很多小白,但关键是百度并没有排除错误内容,经过历史的几年传播,错的都快变对的了, ...
- iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果
具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...
- 【从零开始学BPM,Day1】工作流管理平台架构学习
[课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第一天课程] Step 1 软件下载:H3 BPM10.0全开 ...
- Android之解析XML
1.XML:可扩展标记语言. 可扩展标记语言是一种很像超文本标记语言的标记语言. 它的设计宗旨是传输数据,而不是显示数据. 它的标记没有被预定义.需要自行定义标签. 它被设计为具有自我描述性. 是W3 ...
- Linux基础介绍【第五篇】
linux权限位 Linux文件或目录的权限位是由9个权限位来控制,每三位为一组,它们分别是文件属主权限.属组权限.其他用户权限. r:read可读权限,对应数字4: w:write可写权限,对应数字 ...
- kvm 使用入门详解
kvm 是虚拟化技术的一个典型实现,功能非常强大,使用很方便.kvm 本身主要实现对 CPU 的虚拟化,内存和IO的虚拟化使用了开源软件 qemu,qemu 是纯软件层面的虚拟化,其实就是个模拟器.k ...