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 方法大全方便学习参考
Feb 25 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
农民C键的运用技巧
2020/03/04 星际争霸
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
python迭代器常见用法实例分析
2019/11/22 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
水务局局长岗位职责
2013/11/28 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js