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数组使用调用方法汇总
Dec 08 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
JavaScript基础心法 数据类型
Mar 05 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 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
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
在Python下尝试多线程编程
2015/04/28 Python
使用Python实现简单的服务器功能
2017/08/25 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python SVD压缩图像的实现代码
2019/11/05 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
教师自我剖析材料(群众路线)
2014/09/29 职场文书
兵马俑导游词
2015/02/02 职场文书
求职自我推荐信
2015/03/24 职场文书