jQuery中:last-child選擇器用法實例
更新時間：2014年12月31日 14:21:51 投稿：shichen2014
這篇文章主要介紹了jQuery中:last-child選擇器用法,實例分析了:last-child選擇器功能、定義及匹配父元素的最后一個子元素用法技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中:last-child選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器能夠匹配父元素的最后一個子元素。
注意:last只選取一個元素，而此選擇符將匹配每個父元素的最后一個子元素。
語法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(":last-child")
此選擇器一般也要和其他選擇器配合使用，比如類選擇器、元素選擇器等等。例如:
復(fù)制代碼 代碼如下:
$("li:last-child").css("color","blue")
以上代碼能夠?qū)⒏冈叵伦詈笠粋€li元素中的字體顏色設(shè)置為藍(lán)色。
注意:這里有必要結(jié)合上面的代碼再對概念進(jìn)行一下說明。這里所說的父元素并不是li，而是li的父元素。很多人往往誤以為是匹配li元素的子元素中的最后一個元素。
實例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta 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(){
$("button").click(function(){
$("li:last-child").css("color","blue")
})
})
</script>
</head>
<body>
<div>
<ul>
<li class="houtai" title="asp">ASP教程</li>
<li class="houtai" title="net">ASP.NET教程</li>
<li class="houtai" title="php">PHP教程</li>
</ul>
<ul>
<li class="qiantai" title="html">html教程</li>
<li class="qiantai" title="div">DIV+CSS教程</li>
<li class="qiantai" title="jquery">jQUERY教程</li>
<li class="qiantai" title="js">jAVAScript教程</li>
</ul>
</div>
<button>點擊查看效果</button>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery 研究心得 取得屬性的值...2007-11-11
這篇文章主要為大家詳細(xì)介紹了jQuery帶控制按鈕輪播圖插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
JQuery學(xué)習(xí)筆記 實現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果
為了保證前臺頁面的整潔，我們習(xí)慣性地將CSS放入一個單獨的.CSS文件中以便調(diào)用，而JS也同樣可以放到單獨的JS文件中去，并且頁面上的事件如onclick，onmouseover也可以分離出來，現(xiàn)在網(wǎng)上比較流行JQuery2008-11-11
讓jQuery與其他JavaScript庫并存避免沖突的方法
為了解決jQuery和其他JavaScript庫中$()函數(shù)的沖突，需要取消jQuery的$()函數(shù)，下面有個不錯的方法，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了jquery.qtip提示信息插件用法,結(jié)合簡單實例形式分析了該插件用于顯示提示信息的相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
JQuery與Ajax常用代碼實現(xiàn)對比，大家可以看下，根據(jù)實際情況選用。2009-10-10
jQuery實現(xiàn)只允許輸入數(shù)字和小數(shù)點的方法
這篇文章主要介紹了jQuery實現(xiàn)只允許輸入數(shù)字和小數(shù)點的方法,涉及jQuery針對鍵盤事件的響應(yīng)及字符串操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)百葉窗效果，利用li的定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
proxy()主要用于在同樣的上下文語境中指向另一個對象,下面我們就以實例解析jQuery中proxy()函數(shù)的用法,需要的朋友可以參考下2016-05-05
如何在頁面上同時使用 jQuery 和其他框架？2013-04-04