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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
在浏览器中实现图片粘贴的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学习笔记之三 数据库基本操作
2011/01/17 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
javascript折半查找详解
2015/01/26 Javascript
js中日期的加减法
2015/05/06 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
Python新手们容易犯的几个错误总结
2017/04/01 Python
python生成二维码的实例详解
2017/10/29 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
高中数学教师求职信
2013/10/30 职场文书
会计工作决心书
2014/03/11 职场文书
开除通知书范本
2015/04/25 职场文书
教师节感想
2015/08/11 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫