jQuery中:only-child選擇器用法實(shí)例
更新時(shí)間：2015年01月03日 10:32:58 投稿：shichen2014
這篇文章主要介紹了jQuery中:only-child選擇器用法,實(shí)例分析了:only-child選擇器的功能、定義及匹配父元素的唯一子元素使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery中:only-child選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器將匹配父元素的唯一子元素。如果其父元素中含有其他元素，那將不會(huì)被匹配。
語(yǔ)法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(":only-child")
此選擇器一般也要和其他選擇器配合使用，比如類(lèi)選擇器、元素選擇器等等。例如：
復(fù)制代碼 代碼如下:
$("li:only-child").css("color","blue")
以上代碼能夠?qū)⒅挥幸粋€(gè)li元素的ul元素下的li元素中的字體顏色設(shè)置為藍(lán)色。
注意:這里有必要結(jié)合上面的代碼再對(duì)概念進(jìn)行一下說(shuō)明。這里所說(shuō)的父元素并不是li，而是li的父元素。很多人往往誤以為是匹配li元素的子元素中的最后一個(gè)元素。
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.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:only-child").css("color","blue")
})
})
</script>
</head>
<body>
<div>
<ul>
<li class="houtai" title="asp">ASP教程</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選擇器-根據(jù)多個(gè)屬性選擇示例代碼
根據(jù)多個(gè)屬性選擇在某些對(duì)選擇比較精確的情況下，還是比較實(shí)用的，其實(shí)很簡(jiǎn)單，不會(huì)的朋友看下本文2013-10-10
下面小編就為大家?guī)?lái)一篇基于JQuery的Ajax方法使用詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Jquery幻燈片特效代碼分享 打開(kāi)頁(yè)面隨機(jī)選擇切換方式（3）
jQuery是一個(gè)非常優(yōu)秀的 JavaScript 框架，使用簡(jiǎn)單靈活，一個(gè)漂亮的幻燈片更能吸引訪客的注意力。本文實(shí)例講述了jQuery實(shí)現(xiàn)時(shí)尚漂亮的幻燈片特效，基本能滿(mǎn)足你在網(wǎng)頁(yè)上使用幻燈片(焦點(diǎn)圖)效果。分享給大家供大家參考。具體如下：2015-08-08
jquery插件方式實(shí)現(xiàn)table查詢(xún)功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery插件方式實(shí)現(xiàn)table查詢(xún)功能的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jQuery學(xué)習(xí)基礎(chǔ)知識(shí)小結(jié)
jQuery學(xué)習(xí)基礎(chǔ)知識(shí)小結(jié)，剛開(kāi)始學(xué)習(xí)jquery的朋友可以參考下。2010-11-11
很簡(jiǎn)單有趣的效果，邏輯很清楚，代碼也簡(jiǎn)單，是練手的好東東。2010-04-04
jquery實(shí)現(xiàn)textarea 高度自適應(yīng)
用jquery實(shí)現(xiàn)的textarea 高度自適應(yīng)代碼。這個(gè)動(dòng)畫(huà)效果比較流暢。適合新手學(xué)習(xí)。非常簡(jiǎn)單實(shí)用，這里推薦給小伙伴們。2015-03-03
jQuery 淡出一個(gè)圖像到另一個(gè)圖像的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實(shí)現(xiàn)兩個(gè)圖片的淡出切換效果，需要的朋友可以參考下2013-06-06
這篇文章主要介紹了jQuery子窗體取得父窗體元素的方法,涉及jQuery窗體元素操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
使用jquery獲取url以及jquery獲取url參數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇使用jquery獲取url以及jquery獲取url參數(shù)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05