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 相关文章推荐
jquery动画1.加载指示器
Aug 24 Javascript
jquery remove方法应用详解
Nov 22 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
详解python之简单主机批量管理工具
2017/01/27 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
python2和python3哪个使用率高
2020/06/23 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
师范学院教师自荐书
2014/01/31 职场文书
青年文明号创建承诺
2014/03/31 职场文书
开学寄语大全
2014/04/08 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
七年级语文教学反思
2016/03/03 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python