jQuery中:gt選擇器用法實(shí)例
更新時(shí)間：2014年12月29日 11:27:38 投稿：shichen2014
這篇文章主要介紹了jQuery中:gt選擇器用法,實(shí)例分析了:gt選擇器的功能、定義及匹配大于給定索引值元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery中:gt選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器匹配所有索引值大于給定索引值的元素。
索引值最小是從0開始的。
語(yǔ)法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(":gt(index)")
此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:
復(fù)制代碼 代碼如下:
$("li:gt(0)").css("color","blue")
以上代碼能夠?qū)⑺饕笥?的li元素中的字體顏色設(shè)置為綠色。
如果不和其他選擇器配合使用，則默認(rèn)狀態(tài)是和*選擇器配合使用，例如$(":gt")等同于$("*:gt")。
參數(shù)列表:
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("li:gt(0)").css("color","blue");
})
})
</script>
</head>
<body>
<ul>
<li>html專區(qū)</li>
<li>div+css專區(qū)</li>
<li>jQuery專區(qū)</li>
<li>Javascript專區(qū)</li>
</ul>
<button id="btn">點(diǎn)擊查看效果</button>
</body>
</html>
以上代碼能夠?qū)i元素集合中索引值大于0的li元素中的字體顏色設(shè)置為藍(lán)色。
實(shí)例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(":gt(1)").css("color","blue");
});
});
</script>
</head>
<body>
<ul>
<li>html專區(qū)</li>
<li>div+css專區(qū)</li>
<li>jQuery專區(qū)</li>
<li>Javascript專區(qū)</li>
</ul>
<button id="btn">點(diǎn)擊查看效果</button>
</body>
</html>
由于以上代碼并沒有指定與:gt選擇器相配合使用的選擇器，所以就默認(rèn)和*選擇器配合使用，于是以上代碼可以將當(dāng)前文檔中所有元素中索引值大于1的元素中的字體顏色設(shè)置為藍(lán)色。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery+PHP實(shí)現(xiàn)可編輯表格字段內(nèi)容并實(shí)時(shí)保存
在本例中，我們會(huì)通過jQuery實(shí)現(xiàn)單擊將一個(gè)文本信息變?yōu)榭删庉嫷谋韱?，你可以?duì)文本內(nèi)容進(jìn)行編輯，然后點(diǎn)擊“確定”按鈕，新的內(nèi)容將發(fā)送到后臺(tái)PHP程序處理，并保存到數(shù)據(jù)庫(kù)；當(dāng)點(diǎn)擊“取消”按鈕，則頁(yè)面恢復(fù)到初始狀態(tài)，需要的朋友可以參考下2015-10-10
有時(shí)候我們?cè)谇岸碎_發(fā)工作中為了獲取圖片的信息，需要在圖片加載完成后才可以正確的獲取到圖片的大小尺寸，并且執(zhí)行相應(yīng)的回調(diào)函數(shù)使圖片產(chǎn)生某種顯示效果。本文主要整理了幾種常見的jquery判斷圖片加載完成時(shí)的方法2015-08-08
jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊(cè)
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊(cè)的方法和示例，基于jQuery插件jQuery.album.js來(lái)實(shí)現(xiàn)的，效果非常不錯(cuò)，這里推薦給大家，希望大家能夠喜歡。2015-03-03
jQuery控制的不同方向的滑動(dòng)(向左、向右滑動(dòng)等)
這篇文章主要介紹了jQuery控制的不同方向的滑動(dòng)(向左、向右滑動(dòng)等),需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jQuery限制輸入字符串長(zhǎng)度的方法，實(shí)例講解，非常實(shí)用,需要的朋友可以參考下。2016-06-06
有時(shí),要實(shí)現(xiàn)對(duì)于一篇文章的關(guān)鍵詞部分的提示,想實(shí)現(xiàn)的效果比如是,當(dāng)鼠標(biāo)移動(dòng)到這個(gè)關(guān)鍵詞時(shí),彈出相關(guān)的一段文字或圖片的介紹。2010-01-01
本篇文章主要是對(duì)jQuery選擇器進(jìn)行了全面的總結(jié)介紹，需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要介紹了JQuery顯示隱藏DIV的方法及代碼實(shí)例,本文講解了載入時(shí)隱藏、動(dòng)態(tài)隱藏和顯示兩部分內(nèi)容,需要的朋友可以參考下2015-04-04
基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗(yàn)組件思路詳解
這篇文章主要介紹了基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗(yàn)組件的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-07-07
使用Jquery獲取帶特殊符號(hào)的ID 標(biāo)簽的方法
這篇文章主要介紹了使用Jquery如何獲取帶特殊符號(hào)的ID 標(biāo)簽，該怎么寫,需要的朋友可以參考下2014-04-04