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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
vue实现文件上传读取及下载功能
Nov 17 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
前端JavaScript大管家 package.json
Nov 02 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
详解Python做一个名片管理系统
2019/03/14 Python
详解python中递归函数
2019/04/16 Python
python如何保证输入键入数字的方法
2019/08/23 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
财务主管的岗位职责
2013/12/30 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
店长职务说明书
2014/02/04 职场文书
公务员转正考察材料
2014/02/07 职场文书
主要负责人任命书
2014/06/06 职场文书
学校食品安全责任书
2015/01/29 职场文书
python实现自动化群控的步骤
2021/04/11 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server