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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
jquery实现显示已选用户
Jul 21 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php url路由入门实例
2014/04/23 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
select组合框option的捕捉实例代码
2008/09/30 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
Vue异步加载about组件
2017/10/31 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
python障碍式期权定价公式
2019/07/19 Python
django Admin文档生成器使用详解
2019/07/22 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
就业推荐表自我评价范文
2015/03/02 职场文书
被告代理词范文
2015/05/25 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书