jQuery中siblings()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中siblings()方法用法。分享给大家供大家参考。具体分析如下:

此方法能够获取匹配元素集合中每一个元素的同辈元素。
同辈元素集合可以使用表达式进行筛选。

语法结构:

$(selector).siblings(expr)

参数列表:
参数 描述
expr 可选。用于筛选同辈元素的表达式。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>siblings()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("p").siblings().css("color","red") 

}) 

</script> 

</head> 

<body> 

<div class="first"> 

  <p>我是first下的p</p> 

  <span>我是div下的span</span> 

</div> 

<div class="second"> 

  <ul> 

    <li>我是li</li> 

  </ul> 

  <p>我是second下的p</p> 

</div> 

</body> 

</html>

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>siblings()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("p").siblings("span").css("color","red") 

}) 

</script> 

</head> 

<body> 

<div class="first"> 

  <p>我是first下的p</p> 

  <span>我是div下的span</span>  

</div> 

<div class="second"> 

  <ul> 

    <li>我是li</li> 

  </ul> 

  <p>我是second下的p</p> 

</div> 

</body> 

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js判断变量是否未定义的代码
Mar 28 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
jquery实现轮播图效果
Feb 13 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 #Javascript
jQuery中prevUntil()方法用法实例
Jan 08 #Javascript
jQuery中prevAll()方法用法实例
Jan 08 #Javascript
jQuery中prev()方法用法实例
Jan 08 #Javascript
深入探密Javascript数组方法
Jan 08 #Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 #Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 #Javascript
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
分页栏的web标准实现
2011/11/01 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
vue中activated的用法
2021/01/03 Vue.js
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
执行力心得体会
2013/12/31 职场文书
小学生元旦感言
2014/02/26 职场文书
社区工作者感言
2014/03/02 职场文书
出差报告怎么写
2014/11/06 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
高中物理教学反思
2016/02/19 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
解决Redis启动警告问题
2022/02/24 Redis