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 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
layui 给数据表格加序号的方法
Aug 20 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
什么是短波收听SWL
2021/03/01 无线电
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
详解python中requirements.txt的一切
2017/03/03 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python实现弹球小游戏
2020/08/01 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
美工的岗位职责
2013/11/14 职场文书
美食节策划方案
2014/05/26 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
MySQL 计算连续登录天数
2022/05/11 MySQL