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 相关文章推荐
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript中string对象
Jun 12 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
深入学习JavaScript 高阶函数
2019/06/11 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
学校三八妇女节活动情况总结
2014/03/09 职场文书
餐饮投资计划书
2014/04/25 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
个人自荐书范文
2015/03/09 职场文书
会议主持词结束语
2015/07/03 职场文书
推广普通话主题班会
2015/08/17 职场文书
导游词之无锡唐城
2019/12/12 职场文书
Promise静态四兄弟实现示例详解
2022/07/07 Javascript