jQuery中parentsUntil()方法用法實(shí)例
更新時間：2015年01月07日 14:27:54 投稿：shichen2014
這篇文章主要介紹了jQuery中parentsUntil()方法用法,實(shí)例分析了parentsUntil()方法的功能、定義及根據(jù)條件查找匹配元素的所有的祖先元素使用技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery中parentsUntil()方法用法。分享給大家供大家參考。具體分析如下：
此方法查找匹配元素的所有的祖先元素，直到遇到expr表達(dá)式、DOM元素或者jQuery元素匹配的那個元素為止。
取得祖先元素集合可以通過篩選表達(dá)式進(jìn)行篩選。
注意:祖先元素中并不包含expr表達(dá)式、DOM元素或者jQuery元素匹配的元素。
語法:
語法一:
復(fù)制代碼 代碼如下:
$(selector).parentsUntil(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://www.fzitv.net/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").parentsUntil(".inner").css("border","1px solid blue");
})
</script>
</head>
<body>
<div class="outer">
<div>腳本之家歡迎您</div>
<div class="inner">
<ul class="first">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Div+CSS專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
<ul class="second">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Div+CSS專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
</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://www.fzitv.net/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").parentsUntil(".inner",".second").css("border","1px solid blue");
})
</script>
</head>
<body>
<div class="outer">
<div>腳本之家歡迎您</div>
<div class="inner">
<ul class="first">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Div+CSS專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
<ul class="second">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Div+CSS專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
</div>
</div>
</body>
</html>
語法二:
復(fù)制代碼 代碼如下:
$(selector).parentsUntil(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://www.fzitv.net/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").parentsUntil(document.getElementById("inner")).css("border","1px solid blue");
})
</script>
</head>
<body>
<div class="outer">
<div>腳本之家歡迎您</div>
<div id="inner">
<ul class="first">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Div+CSS專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
<ul class="second">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Div+CSS專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
</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://www.fzitv.net/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").parentsUntil(document.getElementById("inner"),".second").css("border","1px solid blue");
})
</script>
</head>
<body>
<div class="outer">
<div>腳本之家歡迎您</div>
<div id="inner">
<ul class="first">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Div+CSS專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
<ul class="second">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li>Div+CSS專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
</div>
</div>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jquery動態(tài)更換網(wǎng)頁背景圖的方法,需要的朋友可以參考下2014-03-03
這是一個基于jquery的文字向上跑動，其效果類似跑馬燈，在某些情況下還是比較實(shí)用的，下面與大家分享下實(shí)現(xiàn)代碼2014-09-09
jquery異步請求實(shí)例代碼，需要的朋友可以參考下。2011-06-06
jquery簡單實(shí)現(xiàn)外部鏈接用新窗口打開的方法
這篇文章主要介紹了jquery簡單實(shí)現(xiàn)外部鏈接用新窗口打開的方法,涉及jQuery正則匹配http://開頭外部鏈接網(wǎng)址的相關(guān)技巧,需要的朋友可以參考下2015-05-05
jquery操作HTML5 的data-*的用法實(shí)例分享
從jQuery 1.4.3起， HTML 5 data- 屬性 將自動被引用到j(luò)Query的數(shù)據(jù)對象中。也就是說雖然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3庫以上的.還是可以 在非HTML5的頁面或?yàn)g覽器里, 仍然可以使用.data(obj)方法來操作"data-*" 數(shù)據(jù).2014-08-08
jQuery實(shí)現(xiàn)手機(jī)上輸入后隱藏鍵盤功能
最近做了這樣一個功能，讓用戶輸入手機(jī)發(fā)送驗(yàn)證碼，輸完11位手機(jī)號后，自動隱藏鍵盤。下面通過本文給大家分享實(shí)現(xiàn)方法，一起看看吧2017-01-01
基于Jquery的仿照flash放大圖片效果代碼，需要的朋友可以參考下。2011-03-03
jQuery增加和刪除表格項目及實(shí)現(xiàn)表格項目排序的方法
jQuery對表格的操作是老生常談的問題了,各種插件也到處都是,這里我們還是來從技術(shù)著手jQuery增加和刪除表格項目及實(shí)現(xiàn)表格項目排序的方法:2016-05-05
本章節(jié)介紹一下在谷歌瀏覽器下利用jquery無法獲取圖片尺寸的現(xiàn)象，而在IE和火狐瀏覽器下能夠正常獲得，當(dāng)然也不是任何時候都無法獲取圖片尺寸，下面給大家介紹遇到此問題該如何解決2015-09-09
這篇文章主要介紹了JQuery動態(tài)添加和刪除表格行的方法,實(shí)例分析了jQuery中動態(tài)操作表格行的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03