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 Date对象使用总结
May 14 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
浅析javascript中的DOM
Mar 01 Javascript
js实现简单计算器
Nov 22 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
Angular简单验证功能示例
Dec 22 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
python合并文本文件示例
2014/02/07 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
使用Python对MySQL数据操作
2017/04/06 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
贷款担保书范文
2014/05/13 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
60句有关成长的名言
2019/09/04 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python