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 相关文章推荐
js读取本地excel文档数据的代码
Nov 11 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
Javascript Objects详解
2014/09/04 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python模块的制作方法实例分析
2019/12/21 Python
python模块内置属性概念及实例
2021/02/18 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
《金色的脚印》教后反思
2014/04/23 职场文书
红头文件任命书范本
2014/06/05 职场文书
党员四风剖析材料
2014/08/27 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
高二化学教学反思
2016/02/22 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
浅析Django接口版本控制
2021/06/26 Python
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js