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 相关文章推荐
jQuery级联操作绑定事件实例
Sep 02 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
node实现的爬虫功能示例
May 04 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
PHP 彩色文字实现代码
2009/06/29 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现的批量下载RFC文档
2015/03/10 Python
Django权限机制实现代码详解
2018/02/05 Python
python 实现登录网页的操作方法
2018/05/11 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
车辆安全检查制度
2014/01/12 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
安全施工责任书
2014/08/25 职场文书
2015年质检工作总结
2015/05/04 职场文书
车辆挂靠协议书
2016/03/23 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers