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函数的延迟加载实现代码
Oct 11 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
javascript中this关键字详解
2016/12/12 Javascript
如何使用angularJs
2017/05/08 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
python实现linux下使用xcopy的方法
2015/06/28 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python如何查看网页代码
2020/06/07 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
法律系毕业生求职信
2014/05/28 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
校园运动会广播稿
2014/10/06 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
《灰雀》教学反思
2016/02/19 职场文书
小学语文教学反思范文
2016/03/03 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
深入理解go slice结构
2021/09/15 Golang
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers