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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue登录注册及token验证实现代码
Dec 14 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
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
PHP PDO函数库详解
2010/04/27 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
python写程序统计词频的方法
2019/07/29 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
Java的五个基础面试题
2016/02/26 面试题
送餐员岗位职责范本
2014/02/21 职场文书
共产党员公开承诺书
2014/03/25 职场文书
副处级干部考察材料
2014/05/17 职场文书
小学端午节活动总结
2015/02/11 职场文书
费城故事观后感
2015/06/10 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android