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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
javascript 触发事件列表 比较不错
Sep 03 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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中使用Oracle数据库(2)
2006/10/09 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
python 域名分析工具实现代码
2009/07/15 Python
Python决策树分类算法学习
2017/12/22 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python字典的常用方法总结
2019/07/31 Python
python利用线程实现多任务
2020/09/18 Python
蛋白质世界:Protein World
2017/11/23 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
商业门面租房协议书
2014/11/25 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
永不妥协观后感
2015/06/10 职场文书