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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
Javascript继承机制详解
May 30 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
vue实现简单瀑布流布局
May 28 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 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
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python+os根据文件名自动生成文本
2019/03/21 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
python语言中有算法吗
2020/06/16 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
专科生就业求职信
2014/06/22 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
正规借条模板
2015/05/26 职场文书
python程序的组织结构详解
2021/12/06 Python
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android