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选择器的工作原理和优化分析
Jul 25 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
JS ES6异步解决方案
Apr 29 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实现的用户查询类实例
2015/06/18 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
详解Python多线程
2016/11/14 Python
Python实现调度算法代码详解
2017/12/01 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python生成随机红包的实例写法
2019/09/02 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
入学申请自荐信范文
2014/02/26 职场文书
经典禁毒标语
2014/06/16 职场文书
效能风暴心得体会
2014/09/04 职场文书
民事二审代理词
2015/05/25 职场文书
军训决心书范文
2015/09/22 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang