jQuery中prevUntil()方法用法实例


Posted in Javascript onJanuary 08, 2015

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

此函数查找匹配元素之前所有的同辈元素,直到遇到expr表达式、DOM元素或者jQuery元素匹配的那个元素为止。
可以使用可选的表达式对同辈元素集合进行筛选。

注意:祖先元素中并不包含expr表达式、DOM元素或者jQuery元素匹配的元素。

语法:

语法 一:

$(selector).prevUntil(expr,filter)

参数列表:
参数 描述
expr 可选。用于筛选祖先元素的表达式。
filter 可选。用于对取得的祖先元素集合进行筛选。

实例:

实例一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; 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").prevUntil(".firstp").css("color","blue")

    })

</script>

</head>

<body>

<div class="father">

  <p class="firstp">我是p元素</p>

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

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

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

</div>

</body>

</html>

实例二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; 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").prevUntil(".firstp","span").css("color","blue")

    })

</script>

</head>

<body>

<div class="father">

  <p class="firstp">我是p元素</p>

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

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

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

</div>

</body>

</html>

语法二:

$(selector).prevUntil(element,filter)

参数列表:
参数 描述
element 可选。用于筛选祖先元素的DOM元素或者jQuery元素。
filter 可选。用于对取得的祖先元素集合进行筛选。

实例:

实例一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; 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").prevUntil(document.getElementById("firstp")).css("color","blue")

    })

</script>

</head>

<body>

<div class="father">

  <p id="firstp">我是p元素</p>

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

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

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

</div>

</body>

</html>

实例二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; 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").prevUntil(document.getElementById("firstp"),"span").css("color","blue")

    })

</script>

</head>

<body>

<div class="father">

  <p id="firstp">我是p元素</p>

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

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

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

</div>

</body>

</html>

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

Javascript 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
js转义字符介绍
Nov 05 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
使用Vue实现一个树组件的示例
Nov 06 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
jQuery中parents()方法用法实例
Jan 07 #Javascript
jQuery中parent()方法用法实例
Jan 07 #Javascript
You might like
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
JS的replace方法详细介绍
2012/11/09 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python 除法小技巧
2008/09/06 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
艺术系应届生的自我评价
2013/10/19 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
新闻编辑求职信
2014/07/13 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
春风化雨观后感
2015/06/11 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android