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 toggle使用分析
Nov 16 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
JS实现图片切换效果
Nov 17 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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 将excel导入mysql
2009/11/09 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
vue-router 中 meta的用法详解
2019/11/01 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python与Redis的连接教程
2015/04/22 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
spyder常用快捷键(分享)
2017/07/19 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
基于python实现模拟数据结构模型
2020/06/12 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
QA工程师岗位职责
2013/11/20 职场文书
年度考核评语
2014/01/19 职场文书
企业管理培训感言
2014/01/27 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
应届生找工作求职信
2014/06/24 职场文书
小学语文教研活动总结
2014/07/01 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
干部年终考核评语
2015/01/04 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python