jQuery中:first-child選擇器用法實例
更新時間：2014年12月31日 11:54:54 投稿：shichen2014
這篇文章主要介紹了jQuery中:first-child選擇器用法,實例分析了:first-child選擇器的功能、定義及匹配父元素的第一個子元素的用法技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中:first-child選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器能夠匹配父元素的第一個子元素。
語法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(":first-child")
此選擇器一般也要和其他選擇器配合使用，比如類選擇器、元素選擇器等等。例如:
復(fù)制代碼 代碼如下:
$("ul li:first-child").css("color","blue")
以上代碼能夠?qū)⒏冈叵碌牡谝粋€li元素中的字體顏色設(shè)置為藍(lán)色。
注意:這里有必要結(jié)合上面的代碼再對概念進(jìn)行一下說明。這里所說的父元素并不是li，而是li的父元素。很多人往往誤以為是匹配li元素的子元素中的最后一個元素。
實例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>:first-child選擇器-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("ul li:first-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>
以上代碼中，點擊按鈕可以將每一個ul下的第一個li元素的文字顏色設(shè)置為藍(lán)色。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
JavaScript/jQuery、HTML、CSS 構(gòu)建 Web IM 遠(yuǎn)程及時聊天通信程序
這篇文章主要介紹用JavaScript和jQuery、HTML、CSS以及用第三方聊天JavaScript（jsjac）框架構(gòu)建一個BS Web的聊天應(yīng)用程序。此程序可以和所有連接到Openfire服務(wù)器的應(yīng)用進(jìn)行通信、發(fā)送消息。如果要運行本程序還需要一個聊天服務(wù)器Openfire2012-08-08
2012-10-10
jquery miniui 教程 表格控件 合并單元格應(yīng)用
本文將詳細(xì)介紹jquery miniui 教程 表格控件 合并單元格的應(yīng)用，需要的朋友可以參考下2012-11-11
jQuery實現(xiàn)可拖拽的許愿墻效果【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)可拖拽的許愿墻效果,可實現(xiàn)拖拽圖片與層疊顯示功能,涉及jQuery插件的簡單使用,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
使用jQuery和Bootstrap實現(xiàn)多層、自適應(yīng)模態(tài)窗口
這篇文章主要介紹了使用jQuery和Bootstrap實現(xiàn)多層、自適應(yīng)模態(tài)窗口,需要的朋友可以參考下
2014-12-12 
這篇文章主要介紹了jQuery中$.each使用詳解,需要的朋友可以參考下
2015-01-01 
這篇文章主要介紹了jquery如何根據(jù)屬性和index來查找屬性值并操作,需要的朋友可以參考下
2014-07-07 
這篇文章介紹了jQuery操作CSS樣式的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-03-03 
jQuery DataTables插件自定義Ajax分頁實例解析
這篇文章主要為大家詳細(xì)介紹了jQuery DataTables插件自定義Ajax分頁的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05