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中Get和Set访问器的实现代码
Sep 19 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
js实现登录与注册界面
Nov 01 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP中list方法用法示例
2016/12/01 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
用python写的一个wordpress的采集程序
2016/02/27 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
python单例模式的多种实现方法
2019/07/26 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
超市促销活动方案
2014/03/05 职场文书
搞笑车尾标语
2014/06/23 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
Python进程间的通信之语法学习
2022/04/11 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis