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 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
iScroll.js 使用方法参考
May 16 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 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/04 星际争霸
解析php file_exists无效的解决办法
2013/06/26 PHP
CentOS安装php v8js教程
2015/02/26 PHP
php无序树实现方法
2015/07/28 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
python使用cPickle模块序列化实例
2014/09/25 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Python Flask基础教程示例代码
2018/02/07 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
python代码区分大小写吗
2020/06/17 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
学生周末长期请假条
2014/02/15 职场文书
2014年国培研修感言
2014/03/09 职场文书
心灵点滴观后感
2015/06/02 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS