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 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
php全角字符转换为半角函数
2014/02/07 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
jQuery知识点整理
2015/01/30 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
pyramid配置session的方法教程
2013/11/27 Python
Python实现提取文章摘要的方法
2015/04/21 Python
Python中类的初始化特殊方法
2017/12/01 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
建筑专业毕业生推荐信
2013/11/21 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
师德师风整改措施
2014/10/24 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python