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 相关文章推荐
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
JS轮播图的实现方法
Aug 24 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
pdo中使用参数化查询sql
2011/08/11 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
layui实现table加载的示例代码
2018/08/14 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
python安装教程
2018/02/28 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
外贸业务员求职信范文
2013/12/12 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
黑白记忆观后感
2015/06/18 职场文书
运动会运动员赞词
2015/07/22 职场文书
消防宣传标语大全
2015/08/03 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
JS数组去重详情
2021/11/07 Javascript