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 相关文章推荐
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
js选项卡的制作方法
Jan 23 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
ES6新增的数组知识实例小结
May 23 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
一个ftp类(ini.php)
2006/10/09 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python实现批量图片格式转换
2020/06/16 Python
python生成ppt的方法
2018/06/07 Python
logging level级别介绍
2020/02/21 Python
python的pip有什么用
2020/06/17 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
python实现经纬度采样的示例代码
2020/12/10 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
《雨霖铃》听课反思
2014/02/13 职场文书
广播体操口号
2014/06/18 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
法人身份证明书
2015/06/18 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers