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 相关文章推荐
理解Javascript_02_理解undefined和null
Oct 11 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
JS使用H5实现图片预览功能
Sep 30 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
php阻止页面后退的方法分享
2014/02/17 PHP
yii用户注册表单验证实例
2015/12/26 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
echarts整合多个类似option的方法实例
2018/07/10 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
python的re模块使用方法详解
2019/07/26 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
医学毕业生自荐信
2013/10/11 职场文书
行政人员岗位职责
2013/12/08 职场文书
出纳会计岗位职责
2014/03/12 职场文书
入股协议书范本
2014/11/01 职场文书
销售会议开幕词
2015/01/28 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android