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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
javascript 节点排序 2
Jan 31 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
JS中递归函数
2016/06/17 Javascript
js选择器全面解析
2016/06/27 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
美国智能家居专家:tink
2019/06/04 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
建设工地安全标语
2014/06/07 职场文书
寒山寺导游词
2015/02/03 职场文书
房贷工资证明范本
2015/06/12 职场文书
道士塔读书笔记
2015/06/30 职场文书
Python绘制分类图的方法
2021/04/20 Python
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL