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 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
推荐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
对盗链说再见...
2006/10/09 PHP
深入php数据采集的详解
2013/06/02 PHP
php实用代码片段整理
2016/11/12 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
python文件和目录操作函数小结
2014/07/11 Python
Python运算符重载用法实例分析
2015/06/01 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python实现AES加密解密
2019/03/28 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
会计专业毕业生求职信分享
2014/01/03 职场文书
岗位职责的构建方法
2014/02/01 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
志愿者宣传口号
2014/06/17 职场文书
付款委托书范本
2014/10/05 职场文书
年会邀请函范文
2015/01/30 职场文书
银行实习推荐信
2015/03/27 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL