jQuery中:gt选择器用法实例


Posted in Javascript onDecember 29, 2014

本文实例讲述了jQuery中:gt选择器用法。分享给大家供大家参考。具体分析如下:

此选择器匹配所有索引值大于给定索引值的元素。
索引值最小是从0开始的。

语法结构:

$(":gt(index)")

此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:

$("li:gt(0)").css("color","blue")

以上代码能够将索引大于0的li元素中的字体颜色设置为绿色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":gt")等同于$("*:gt")。

参数列表:

参数 描述
index 给定的索引值

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.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专区</li>

  <li>div+css专区</li>

  <li>jQuery专区</li>

  <li>Javascript专区</li>

</ul>

<button id="btn">点击查看效果</button>

</body>

</html>

以上代码能够将li元素集合中索引值大于0的li元素中的字体颜色设置为蓝色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.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专区</li>

  <li>div+css专区</li>

  <li>jQuery专区</li>

  <li>Javascript专区</li>

</ul>

<button id="btn">点击查看效果</button>

</body>

</html>

由于以上代码并没有指定与:gt选择器相配合使用的选择器,所以就默认和*选择器配合使用,于是以上代码可以将当前文档中所有元素中索引值大于1的元素中的字体颜色设置为蓝色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
Vue实现手机计算器
Aug 17 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 #Javascript
JavaScript中的值类型详细介绍
Dec 29 #Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 #Javascript
JavaScript中的console.assert()函数介绍
Dec 29 #Javascript
jQuery中:eq()选择器用法实例
Dec 29 #Javascript
根据配置文件加载js依赖模块
Dec 29 #Javascript
JavaScript中的console.dir()函数介绍
Dec 29 #Javascript
You might like
模仿OSO的论坛(五)
2006/10/09 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python实现AI换脸功能
2020/04/10 Python
python matplotlib库的基本使用
2020/09/23 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
获奖的大学生创业计划书
2014/01/05 职场文书
职工运动会感言
2014/02/07 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
redis lua限流算法实现示例
2022/07/15 Redis