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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
jQuery 创建Dom元素
May 07 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
JS实现放大镜效果
Sep 21 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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/06/13 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
js实现扫雷源代码
2020/11/27 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python @property装饰器原理解析
2020/01/22 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
小学生植树节活动总结
2014/07/04 职场文书
普通党员整改措施
2014/10/24 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
毕业实习计划书
2015/01/16 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python