jQuery中prevUntil()方法用法實例
更新時間：2015年01月08日 09:51:03 投稿：shichen2014
這篇文章主要介紹了jQuery中prevUntil()方法用法,實例分析了按條件查找匹配元素之前所有的同輩元素的使用技巧,需要的朋友可以參考下
本文實例講述了jQuery中prevUntil()方法用法。分享給大家供大家參考。具體分析如下：
此函數(shù)查找匹配元素之前所有的同輩元素，直到遇到expr表達式、DOM元素或者jQuery元素匹配的那個元素為止。
可以使用可選的表達式對同輩元素集合進行篩選。
注意:祖先元素中并不包含expr表達式、DOM元素或者jQuery元素匹配的元素。
語法:
語法 一:
復(fù)制代碼 代碼如下:
$(selector).prevUntil(expr,filter)
參數(shù)列表:
實例:
實例一:
復(fù)制代碼 代碼如下:
<!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="http://www.dbjr.com.cn/" />
<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>
實例二:
復(fù)制代碼 代碼如下:
<!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="http://www.dbjr.com.cn/" />
<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>
語法二:
復(fù)制代碼 代碼如下:
$(selector).prevUntil(element,filter)
參數(shù)列表:
實例:
實例一:
復(fù)制代碼 代碼如下:
<!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="http://www.dbjr.com.cn/" />
<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>
實例二:
復(fù)制代碼 代碼如下:
<!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="http://www.dbjr.com.cn/" />
<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程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jquery移除、綁定、觸發(fā)元素事件使用示例詳解,需要的朋友可以參考下2014-04-04
jQuery的animate函數(shù)學(xué)習(xí)記錄
jQuery.animate的每種動畫過渡效果都是通過easing函數(shù)實現(xiàn)的，下面是自己研究之后對其的基本認識2014-08-08
這篇文章主要介紹了jquery實現(xiàn)刪除一個元素后面的所有元素功能，操作簡單方便，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JQuery 動態(tài)生成Table表格實例代碼的相關(guān)資料,這里附有實現(xiàn)實例代碼，具有一定的參考價值，需要的朋友可以參考下2016-12-12
Jquery實現(xiàn)視頻播放頁面的關(guān)燈開燈效果
使用Jquery實現(xiàn)視頻播放頁面的關(guān)燈開燈效果。其中視頻顯示使用embed 元素，該元素是html5的元素，所以使用支持html5的瀏覽器效果會更好，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下2013-05-05
$.fn是指jquery的命名空間，加上fn上的方法及屬性，會對jquery實例每一個有效，下面簡單為大家介紹下jquery $.fn $.fx到底是怎么一回事2013-11-11
jQuery實現(xiàn)購物車表單自動結(jié)算效果實例
這篇文章主要介紹了jQuery實現(xiàn)購物車表單自動結(jié)算效果,涉及jquery動態(tài)獲取頁面元素及實時改變頁面元素值的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery實現(xiàn)個性翻牌效果導(dǎo)航菜單的方法
這篇文章主要介紹了jQuery實現(xiàn)個性翻牌效果導(dǎo)航菜單的方法,實例分析了jQuery操作animate、css及鼠標事件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過本文學(xué)習(xí)下吧2017-02-02