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 DOM操作小结与实例
Jan 07 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
原生js实现购物车功能
Sep 23 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基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
简单介绍django提供的加密算法
2019/12/18 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Python如何实现远程方法调用
2020/08/07 Python
python中的时区问题
2021/01/14 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
银行见习期自我鉴定
2014/01/29 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
初中生期末评语大全
2014/04/24 职场文书
党支部审查意见
2015/06/02 职场文书
走进毛泽东观后感
2015/06/04 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
vue中div禁止点击事件的实现
2022/04/02 Vue.js
全新239军机修复记
2022/04/05 无线电