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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 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
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
Spy++的使用方法及下载教程
2021/01/29 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
求职信的要素有哪些呢
2013/12/26 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
优秀党员事迹材料
2014/12/18 职场文书
预备党员自我评价范文
2015/03/04 职场文书
病危通知单
2015/04/17 职场文书
学校推普周活动总结
2015/05/07 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL