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