快捷導(dǎo)航

jQuery+css last-child實(shí)現(xiàn)選擇最后一個(gè)子元素操作示例

更新時(shí)間：2018年12月10日 10:21:01 作者：北方的刀郎

這篇文章主要介紹了jQuery+css last-child實(shí)現(xiàn)選擇最后一個(gè)子元素操作,結(jié)合實(shí)例形式分析了jQuery結(jié)合css進(jìn)行頁面元素選擇與樣式修改相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery+css last-child實(shí)現(xiàn)選擇最后一個(gè)子元素操作。分享給大家供大家參考，具體如下：

<!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" />
<title>www.fzitv.net jQuery選擇器</title>
<style>
.red{color:#FF0000;}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$('div p:last').addClass("red"); //$('div p:last') 選擇 最后一個(gè)P元素 并高亮顯示得出結(jié)果如下:
$('div p:last-child').addClass("red");//$('div p:last-child') 將選擇所有位于div最后一個(gè)p子元素，并高亮:
});
</script>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph<span>sssssssssss</span></p>
</div>
</body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試，可得到如下運(yùn)行效果：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果）
本文主要介紹了jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果），文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
jQuery中next()方法用法實(shí)例
這篇文章主要介紹了jQuery中next()方法用法,實(shí)例分析了next()方法的功能、定義及獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素使用技巧,需要的朋友可以參考下
2015-01-01
jQuery實(shí)現(xiàn)電梯導(dǎo)航模塊
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)電梯導(dǎo)航模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
Jquery cookie插件實(shí)現(xiàn)原理代碼解析
這篇文章主要介紹了Jquery cookie插件實(shí)現(xiàn)原理代碼解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
a標(biāo)簽指向錨點(diǎn)top，可以在頂部防止一個(gè)a name=top的錨點(diǎn)，這樣在瀏覽器不支持js時(shí)也可以實(shí)現(xiàn)返回頂部的效果了
2014-08-08
jQuery控制DIV層實(shí)現(xiàn)由大到小，由遠(yuǎn)及近動(dòng)畫變化效果
這篇文章主要介紹了jQuery控制DIV層實(shí)現(xiàn)由大到小，由遠(yuǎn)及近動(dòng)畫變化效果,涉及jQuery基于animate方法操作頁面元素實(shí)現(xiàn)動(dòng)畫漸變效果的相關(guān)技巧,需要的朋友可以參考下
2015-10-10
基于jquery的圖片懶加載js
在京東商城瀏覽時(shí), 會(huì)發(fā)現(xiàn)產(chǎn)品圖片只顯示了一屏, 當(dāng)頁面向下滾動(dòng)時(shí)下面的產(chǎn)品圖片才逐漸加載.
2010-06-06
jquery插件之信息彈出框showInfoDialog(成功/錯(cuò)誤/警告/通知/背景遮罩)
某某同學(xué)最近寫了個(gè)基于jquery的信息彈出插件showInfoDialog，該插件對(duì)背景進(jìn)行遮罩，然后彈出信息顯示框，信息顯示種類包括(操作成功/錯(cuò)誤信息/警告信息/通知信息)感興趣的朋友可以了解下
2013-01-01
jQuery實(shí)現(xiàn)復(fù)制到粘貼板功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)復(fù)制到粘貼板功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jquery選擇器之層級(jí)過濾選擇器詳解
本篇文章主要是對(duì)jquery選擇器之層級(jí)過濾選擇器進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-01-01