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 相关文章推荐
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
javascript常用的设计模式
Feb 09 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 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 防注入函数(格式化数据)
2011/08/08 PHP
php curl选项列表(超详细)
2013/07/01 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python命名空间详解
2014/08/18 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python封装shell命令实例分析
2015/05/05 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
python实现rsa加密实例详解
2017/07/19 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
EJB的几种类型
2012/08/15 面试题
药剂专业学生求职信范文
2013/12/28 职场文书
文明村镇申报材料
2014/05/06 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
基层工作经验证明样本
2014/11/16 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
社团招新宣传语
2015/07/13 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS