jQuery中的siblings()是什么意思(推荐)


Posted in Javascript onDecember 29, 2016

定义和用法

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()是什么意思(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 #Javascript
jQuery实现遮罩层登录对话框
Dec 29 #Javascript
JS实现的简易拖放效果示例
Dec 29 #Javascript
使用DeviceOne实现微信小程序功能
Dec 29 #Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 #Javascript
浅谈js算法和流程控制
Dec 29 #Javascript
canvas学习之API整理笔记(二)
Dec 29 #Javascript
You might like
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
房屋登记授权委托书范本
2014/10/09 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL