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 相关文章推荐
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
js下弹出窗口的变通
2007/04/18 Javascript
JS input 数字验证代码
2009/07/30 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
Python基于动态规划算法计算单词距离
2015/07/25 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python使用folium excel绘制point
2019/01/03 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
生物制药专业自我鉴定
2014/02/19 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
安全生产演讲稿
2014/05/09 职场文书
关于环保的演讲稿
2014/05/10 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
单位工作证明
2014/10/07 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
工作表现证明
2015/06/15 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server