jQuery中prevAll()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中prevAll()方法用法。分享给大家供大家参考。具体分析如下:

此方法查找匹配元素集合之前所有的同辈元素。
同辈元素集合可以通过选择器进行筛选。

语法结构:

$("selector").prevAll(expr)

参数列表:

参数 描述
expr 可选。用于过滤的表达式。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

.father{

  height:200px;

  width:200px;

  border:1px solid blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $(".father div").prevAll().css("color","blue") 

}) 

</script>

</head>

<body>

<div class="father">

  <p>我是p元素</p>

  <span>我是span元素</span>

  <p>我是p元素</p>

  <div>我是div元素</div>

</div>

</body>

</html>

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

.father{

  height:200px;

  width:200px;

  border:1px solid blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $(".father div").prevAll("span").css("color","blue") 

}) 

</script>

</head>

<body>

<div class="father">

  <p>我是p元素</p>

  <span>我是span元素</span>

  <p>我是p元素</p>

  <div>我是div元素</div>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 Javascript
jQuery中prev()方法用法实例
Jan 08 #Javascript
深入探密Javascript数组方法
Jan 08 #Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 #Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 #Javascript
jQuery中parents()方法用法实例
Jan 07 #Javascript
jQuery中parent()方法用法实例
Jan 07 #Javascript
jQuery中nextUntil()方法用法实例
Jan 07 #Javascript
You might like
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
react-native之ART绘图方法详解
2017/08/08 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Python ORM编程基础示例
2020/02/02 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
生物学学生自我评价
2014/01/17 职场文书
小加工厂管理制度
2014/01/21 职场文书
《雾凇》教学反思
2014/02/17 职场文书
竞争上岗实施方案
2014/03/21 职场文书
关于安全演讲稿
2014/05/09 职场文书
植树节标语
2014/06/27 职场文书
小学优秀教师材料
2014/12/15 职场文书
公司放假通知范文
2015/04/14 职场文书