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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
javascript基本算法汇总
Mar 09 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
JS实现打字游戏
Dec 17 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 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
C# Assembly类访问程序集信息
2009/06/13 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP学习笔记之session
2018/05/06 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
写给保洁员表扬信
2014/01/08 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
社团文化节策划书
2014/02/01 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
调查研究项目计划书
2014/04/29 职场文书
信息技术研修心得体会
2016/01/08 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
python学习之panda数据分析核心支持库
2021/05/07 Python