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操作referer详细解析
Mar 10 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
论JavaScript模块化编程
Mar 07 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
详解Vue之父子组件传值
Apr 01 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
phpstorm编辑器乱码问题解决
2014/12/01 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
详解Python迭代和迭代器
2016/03/28 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Django添加feeds功能的示例
2018/08/07 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
flex弹性布局详解
2022/03/20 HTML / CSS
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技