jQuery中:gt選擇器用法實例
更新時間：2014年12月29日 11:27:38 投稿：shichen2014
這篇文章主要介紹了jQuery中:gt選擇器用法,實例分析了:gt選擇器的功能、定義及匹配大于給定索引值元素的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中:gt選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器匹配所有索引值大于給定索引值的元素。
索引值最小是從0開始的。
語法結構:
復制代碼 代碼如下:
$(":gt(index)")
此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:
復制代碼 代碼如下:
$("li:gt(0)").css("color","blue")
以上代碼能夠將索引大于0的li元素中的字體顏色設置為綠色。
如果不和其他選擇器配合使用，則默認狀態(tài)是和*選擇器配合使用，例如$(":gt")等同于$("*:gt")。
參數(shù)列表:
實例代碼:
復制代碼 代碼如下:
<!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(){
$("#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">點擊查看效果</button>
</body>
</html>
以上代碼能夠將li元素集合中索引值大于0的li元素中的字體顏色設置為藍色。
實例二:
復制代碼 代碼如下:
<!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(){
$("#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">點擊查看效果</button>
</body>
</html>
由于以上代碼并沒有指定與:gt選擇器相配合使用的選擇器，所以就默認和*選擇器配合使用，于是以上代碼可以將當前文檔中所有元素中索引值大于1的元素中的字體顏色設置為藍色。
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)jQuery多選框功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
實例解析jQuery中如何取消后續(xù)執(zhí)行內容
本文主要介紹了jQuery中取消后續(xù)執(zhí)行內容的實例，代碼通俗易懂。需要的朋友來看下吧2016-12-12
這篇文章主要為大家詳細介紹了jquery簡易手風琴插件的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下2014-06-06
jQuery EasyUI 對話框(Dialog)用法與EasyUI的窗口用法極為相似，最終的效果圖也只與窗口的效果圖差幾個按鈕2010-10-10
JQuery中根據(jù)屬性或屬性值獲得元素(6種情況獲取方法)
根據(jù)屬性或屬性值獲得元素本文介紹六種不同的情況獲取方法,有需要的朋友可以參考下2013-01-01
這篇文章主要介紹了jQuery中slice()方法用法,實例分析了slice()方法的功能、定義及選取匹配元素集子集的使用技巧,需要的朋友可以參考下2015-01-01
jQuery 行背景顏色的交替顯示(隔行變色)實現(xiàn)代碼
主要是利用了jquery的attr為行添加樣式來實現(xiàn)的，具體的代碼如下。2009-12-12
flexigrid是類似ext grid的JS表格，不過基于jQuery，目前只是beta版，例子不十分完整。2010-07-07
前不久做項目，要用到大量的頁面圓角的框塊，以前實現(xiàn)的時候都是用圖片做背景之類的方法，那種方法對于少數(shù)的還是比較可行的，但是當涉及到整個項目都要用 到這樣的效果時就顯得不夠優(yōu)化和簡練了。2009-12-12