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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
vue实现前端列表多条件筛选
Oct 26 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
mysql时区问题
2008/03/26 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
python设置检查点简单实现代码
2014/07/01 Python
使用python turtle画高达
2020/01/19 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
Python的logging模块基本用法
2020/12/24 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
园林技术个人的自我评价
2014/01/08 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
质量承诺书怎么写
2014/05/24 职场文书
素质教育标语
2014/06/27 职场文书
九九重阳节标语
2014/10/07 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
人生遥控器观后感
2015/06/11 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript