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 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
浅谈React中组件间抽象
Jan 27 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
推荐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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
js异步加载的三种解决方案
2013/03/04 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Python求导数的方法
2015/05/09 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python优先队列实现方法示例
2017/09/21 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
高校辅导员推荐信范文
2013/12/25 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
节约用水演讲稿
2014/05/21 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
工作试用期自我评价
2015/03/10 职场文书
医院合作意向书范本
2015/05/08 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python