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