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 三种创建对象的方法
Oct 16 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
selenium+java中用js来完成日期的修改
Oct 31 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
phpize的深入理解
2013/06/03 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Pandas中resample方法详解
2019/07/02 Python
python实现代码统计程序
2019/09/19 Python
jupyter notebook清除输出方式
2020/04/10 Python
大学教师年终总结的自我评价
2013/10/29 职场文书
研究生毕业鉴定
2014/01/29 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
消防安全责任书范本
2014/04/15 职场文书
小学师德师风整改措施
2014/10/27 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js