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 相关文章推荐
Javascript对象属性方法汇总
Nov 21 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
koa-router源码学习小结
Sep 07 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
小程序实现密码输入框
Nov 16 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
输出控制类
2006/10/09 PHP
php学习之 数组声明
2011/06/09 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php操作xml
2013/10/27 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
Firefox div高度自适应
2009/04/28 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
快速入手Python字符编码
2016/08/03 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
年度考核自我鉴定
2014/02/02 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL