当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery中:lt选择器用法实例

实例分析jQuery中:lt选择器的使用

  • 发布时间:
  • 作者:码农之家
  • 点击:88

这篇文章主要知识点是关于jQuery、lt、选择器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战案例精粹
  • 类型:jQuery大小:272 MB格式:PDF作者:吴绍兴//李勇//明廷
立即下载

jQuery中:lt选择器用法实例

本文实例讲述了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="//www.jb51.net/" />
<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="//www.jb51.net/" />
<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程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.756863

jQuery动态添加<input type="file">

有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能。 先给大家展示下效果图: !DOCTYPE htmlhtmlheadtitletest.html/titlemeta http-equiv="content-type" content="text/html; charset=UTF-8"script type="text/javascript" src="jquery-1.6.4.min.js"/scriptscript type="text/javascript"//添加一行trfunction add() {var content = "trtd";content += "input type='file' name='file'input type='button' value='Remove' onclick='remove(this)'";content +="/td/tr"$("#fileTable").append(content);}//删除当前行trfunction remove(obj) {$(obj).parent().parent().remove();}/script/headbodyform id="fileForm" action="" method="post" enctype="multipart/form-data"table id="fileTable"trtdinput type="file" name="file"input type="button" id="addButon" value="Add" onclick="add()"/td/tr/table/form/body/html 介绍JQuery获取input type="text"中的值的各种方式 !DOCTYPE html PUBLIC "-//W3……

网友NO.174407

jquery插件tooltipv顶部淡入淡出效果使用示例

内部使用 head title/title link href="base.css" rel="stylesheet" type="text/css" / link href="jquery.tooltip.less" rel="stylesheet/less" type="text/css" script src="less-1.4.2.min.js" type="text/javascript"/script script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"/script script src="jquery.tooltip.js" type="text/javascript"/script /head body div id="tooltipContainer" /div button onclick="javascript:tg1();"info/button button onclick="javascript:tg2();"alert/button button onclick="javascript:tg3();"hide/button script language="javascript" $("#tooltipContainer").tooltip(); //初始化 function tg1() { $("#tooltipContainer").tooltip("info", "据你的使用和需求的不同..."); } function tg2() { $("#tooltipContainer").tooltip("alert", "据你的使用和需求的不同..."); } function tg3() { $("#tooltipContainer").tooltip("hide"); } /script /body css .tooltip_info { background:green; font-size:20px; border-radius: 10px; } .tooltip_alert……

网友NO.706400

jQuery带箭头提示框tooltips插件集锦

摘要: 之前给大家介绍过用CSS来实现带箭头的提示框,今天我们来点不太一样的,本文将分享几款带箭头提示框。 qtip qTip是一种先进的提示插件,基于jQuery框架。以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语音气泡提示,并且最重要的是免费。支持ie6+以及其他主流浏览器 grumble.js grumble.js提供了特殊的提示,北/东/南/西定位的一般限制。可以围绕一个给定的元素以任意角度旋转,任何距离可以被指定,任何CSS样式可以应用。自动尺寸调整为本地化的文本使用。 cluetip clueTip插件可以让你轻松展现出奇特的工具提示,当用户的鼠标悬停在(或可选点击)你的脚本中指定的任何元素。如果该元素包含一个title属性,它的文本成为clueTip的标题。 qtip2 qtip2是第二代先进的qTip插件,基于jQuery框架。支持ie6+以及其他主流浏览器。 jtooltip jQu……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com