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 相关文章推荐
javascript window对象属性整理
Oct 24 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
常规表格多表头查询示例
Feb 21 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 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
PHP的5个安全措施小结
2012/07/17 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python实现停车管理系统
2018/11/30 Python
django的ORM模型的实现原理
2019/03/04 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
地球一小时倡议书
2014/04/15 职场文书
质量承诺书怎么写
2014/05/24 职场文书
合作经营协议书范本
2014/09/16 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
新教师教学工作总结
2015/08/14 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
python基础之错误和异常处理
2021/10/24 Python
python playwright 自动等待和断言详解
2021/11/27 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android