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插入节点appendChild insertBefore使用方法
Jul 04 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
js格式化时间小结
Nov 03 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php中adodbzip类实例
2014/12/08 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
JavaScript WeakMap使用详解
2021/02/05 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
超简单使用Python换脸实例
2019/03/27 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
九年级科学教学反思
2014/01/29 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书