jQuery中:lt选择器用法实例


Posted in Javascript onDecember 29, 2014

本文实例讲述了jQuery中:lt选择器用法。分享给大家供大家参考。具体分析如下:

此选择器匹配所有小于给定索引值的元素。
索引值最小是从0开始的。

语法结构:

$(":lt(index)")

此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。
例如:

$("li:lt(3)").css("color","blue")

以上代码能够将索引小于3的li元素中的字体颜色设置为蓝色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":lt")等同于$("*:lt")。

参数列表:

参数 描述
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:lt(3)").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元素集合中,索引值小于3的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(){ 

    $("*").each(function(){ 

      alert(this.tagName); 

    })         

  }) 

  $("#show").click(function(){ 

    $(":lt(11)").css("border","1px solid red"); 

  }) 

}); 

</script>

</head>

<body>

<ul>

  <li>html专区</li>

  <li>div+css专区</li>

  <li>jQuery专区</li>

  <li>Javascript专区</li>

</ul>

<button id="btn">遍历所有元素</button>

<button id="show">点击查看选择器效果</button>

</body>

</html>

由于以上代码并没有指定与:lt选择器相配合使用的选择器,所以就默认和*选择器配合使用,于是以上代码可以将当前文档中所有元素中索引值小于11的的元素的边框颜色设置为红色。

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
js控制input框只读实现示例
Jan 20 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
JavaScript中的数值范围介绍
Dec 29 #Javascript
JavaScript常用小技巧小结
Dec 29 #Javascript
jQuery中:gt选择器用法实例
Dec 29 #Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 #Javascript
JavaScript中的值类型详细介绍
Dec 29 #Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 #Javascript
JavaScript中的console.assert()函数介绍
Dec 29 #Javascript
You might like
PHP获取网站域名和地址的代码
2008/08/17 PHP
javascript some()函数用法详解
2014/11/13 PHP
php实现简单的上传进度条
2015/11/17 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
js实现拖拽效果
2015/02/12 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python 爬虫图片简单实现
2017/06/01 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python双向链表原理与实现方法详解
2019/12/03 Python
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
音乐节策划方案
2014/06/09 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
同意落户证明
2015/06/19 职场文书
2015年国培研修感言
2015/08/01 职场文书
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL