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的试卷自动排版系统实现代码
Jan 06 Javascript
extjs render 用法介绍
Sep 11 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 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页面消耗内存过大的处理办法
2013/03/18 PHP
php实现递归的三种基本方式
2020/07/04 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python常用知识梳理(必看篇)
2017/03/23 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
python db类用法说明
2020/07/07 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
求职简历的自我评价
2014/01/31 职场文书
公安学专业求职信
2014/07/27 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
英文升职感谢信
2015/01/23 职场文书
企业介绍信范文
2015/01/30 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
初中政治教学工作总结
2015/08/13 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android