jQuery中closest()函數(shù)用法實例
更新時間：2015年01月07日 10:36:52 投稿：shichen2014
這篇文章主要介紹了jQuery中closest()函數(shù)用法,實例分析了closest()函數(shù)的功能、定義及匹配元素的各種技巧,需要的朋友可以參考下
本文實例講述了jQuery中closest()函數(shù)用法。分享給大家供大家參考。具體分析如下：
此函數(shù)從元素本身開始，逐級向上級元素匹配，并返回最先匹配的元素。
closest()函數(shù)會首先檢查當(dāng)前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素，一層一層往上，直到找到匹配選擇器的元素。如果什么都沒找到則返回一個空的jQuery對象。
語法結(jié)構(gòu)一:
復(fù)制代碼 代碼如下:
$(selector).closest(expr, context)
參數(shù)列表:
實例代碼:
實例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>closest()函數(shù)-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".father p").closest("div").css("color","green");
})
</script>
</head>
<body>
<div class="father">
<div class="children"> 我是div
<p>我是孫子p</p>
</div>
<p>我是兒子p</p>
</div>
<p>我是兄弟p</p>
</body>
</html>
實例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>closest()函數(shù)-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#children p").closest("#father",document.getElementById("children")).
css("border","1px solid red");
})
</script>
</head>
<body>
<div id="father">
<div id="children">
<p>我是孫子p</p>
</div>
<p>我是兒子p</p>
</div>
<p>我是兄弟p</p>
</body>
</html>
由于id為father的div并沒有在id為children的div之內(nèi)，所以并不能將其邊框設(shè)置為紅色。
語法結(jié)構(gòu)二:
復(fù)制代碼 代碼如下:
$(selector).closest(element)
參數(shù)列表:
實例代碼:
實例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>closest()函數(shù)-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#children p").closest(document.getElementById("children")).
css("border","1px solid red");
})
</script>
</head>
<body>
<div id="father">
<div id="children">
<p>我是孫子p</p>
</div>
<p>我是兒子p</p>
</div>
<p>我是兄弟p</p>
</body>
</html>
實例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>closest()函數(shù)-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#children p").closest($("#children")).css("border","1px solid red");
})
</script>
</head>
<body>
<div id="father">
<div id="children">
<p>我是孫子p</p>
</div>
<p>我是兒子p</p>
</div>
<p>我是兄弟p</p>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
基于jQuery UI CSS Framework開發(fā)Widget的經(jīng)驗
jQuery UI CSS Framework是jQuery UI中的一個樣式框架，可以利用jQuery Theme roller 來生成自己想要的css樣式效果。我們可以利用jQuery UI的一些框架來開發(fā)出基于jQuery UI CSS Framework效果的插件來。2010-08-08
這篇文章主要介紹了jQuery實現(xiàn)凍結(jié)表頭的方法,實例分析了jQuery擴展方法的實現(xiàn)技巧及固定表格樣式的方法,需要的朋友可以參考下2015-03-03
ztree實現(xiàn)左邊動態(tài)生成樹右邊為內(nèi)容詳情功能
zTree 是利用 JQuery 的核心代碼，實現(xiàn)一套能完成大部分常用功能的 Tree 插件。接下來通過本文給大家分享ztree實現(xiàn)左邊動態(tài)生成樹右邊為內(nèi)容詳情功能，需要的朋友參考下吧
2017-11-11 
這篇文章主要為大家詳細介紹了jquery實現(xiàn)動態(tài)添加附件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10 
一般對外發(fā)布的插件都應(yīng)該進行封裝，封裝的插件還應(yīng)該符合規(guī)范，只有這樣寫的插件才具有推廣價值，并得到其他用戶的喜愛
2012-08-08 
fix bug:溢出之后不能回來的,添加在范圍內(nèi)移動，需要的朋友可以參考下。
2011-02-02 
由于項目原因，需要實現(xiàn) 點擊按鈕后，顯示友好的 loading 信息，并且為模態(tài)的。
2010-08-08 
jQuery實現(xiàn)動態(tài)添加和刪除input框?qū)嵗a
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加和刪除input框，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03 
jquery submit ie6下失效的原因分析及解決方法
jquery submit ie6下失效的原因分析及解決方法。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11