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框架myJSFrame附API使用帮助
Jun 28 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
详谈js模块化规范
Jul 07 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
vue视图不更新情况详解
May 16 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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
模仿OSO的论坛(五)
2006/10/09 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python tkinter模版代码实例
2020/02/05 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
社团活动总结书
2014/06/27 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2014司机年终工作总结
2014/12/05 职场文书
小学校园广播稿
2015/08/18 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python