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+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
JavaScript网页定位详解
Jan 13 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 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中批量修改文件后缀名的函数代码
2011/10/23 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
js word表格动态添加代码
2010/06/07 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
Python实现的简单算术游戏实例
2015/05/26 Python
python实现识别相似图片小结
2016/02/22 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python多进程并发demo实例解析
2019/12/13 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
python实现简单的学生管理系统
2021/02/22 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
11月升旗仪式讲话稿
2014/02/15 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
初中政治教师教学反思
2016/02/23 职场文书
初一语文教学反思
2016/03/03 职场文书