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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
document.forms用法示例介绍
Jun 26 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
js实现漫天星星效果
Jan 19 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 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缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python赋值操作方法分享
2013/03/23 Python
Python 多线程实例详解
2017/03/25 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
《和我们一样享受春天》教学反思
2014/02/07 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
作文评语大全
2014/04/23 职场文书
关于读书的活动方案
2014/08/14 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
学校重阳节活动总结
2015/03/24 职场文书
教师理论学习心得体会
2016/01/21 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL