jQuery选择器选中最后一个元素，倒数第二个元素操作示例

2024-12-12 05:30:01

本文实例讲述了jQuery选择器选中最后一个元素，倒数第二个元素操作。分享给大家供大家参考，具体如下：

HTML部分：

<div>
  <p>元素1</p>
  <p>元素2</p>
  <p>元素3</p>
  <p>元素4</p>
  <p>元素5</p>
</div>

取倒数第二个p元素

$("div p").eq(-2)

取最后一个p元素

$("div p").last()

完整测试示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net jQuery选择器</title>
<style>
.red{color:#FF0000;}
.blue{color:#0000FF;}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div p").eq(-2).addClass('red');//倒数第二个p元素
$("div p").last().addClass('blue');//最后一个p元素
});
</script>
<div>
  <p>元素1</p>
  <p>元素2</p>
  <p>元素3</p>
  <p>元素4</p>
  <p>元素5</p>
</div>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，可得到如下运行效果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery中的类名选择器（.class）用法简单示例

本文实例讲述了jQuery中的类名选择器(.class)用法.分享给大家供大家参考,具体如下: 一.介绍类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素. 在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配的类的名称就可以被类名选择器选取到. 类名选择器很好理解,在大学的时候大部分人一定都选过课,可以把CSS类名理解为课程名称,元素理解成学生,学生可以选择多门课程,而一门课程又可以被多名学生所选择. CSS类与元素的关系既可以是多对多的
jQuery选择器之表单元素选择器详解

本文实例为大家分享了表单元素选择器,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc
jQuery选择器之属性筛选选择器用法详解

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <
JQuery 选择器、DOM节点操作练习实例

一.练习一 1.需求效果分析: 2.代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s
jQuery选择器特殊字符与属性空格问题

一.选择器中含有特殊符号的注意事项 1．选择器中含有"."."#"."("或"]"等特殊字符根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符,如果按照普通的方式去处理出来的话就会出错.解决此类错误的方法是使用转义符转义. <div id="id#b">bb</div> <
jquery层次选择器的介绍

jquery层次选择器 jquery层次选择器,包括空格.>.next.+.nextAll.~.siblings.prev().prevAll()等函数或表达式. 1.空格表示获取所有子孙后代元素 2. >表示获取一级子元素 3.next函数获取紧接在之后的同辈元素列表 4.nextAll函数表示获取之后的所有同辈元素列表 5.siblings函数表示获取所有同辈元素列表,无论前后 6.+表示紧接在之后的同辈列表 7.~表示匹配之后所有的同辈元素 8.prev()获取之前的同辈元素列表 9.p
jQuery选择器之属性过滤选择器详解

本文实例为大家分享了jQuery属性过滤选择器的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="t
jQuery中元素选择器（element）简单用法示例

本文实例讲述了jQuery中元素选择器(element)简单用法.分享给大家供大家参考,具体如下: 一.介绍元素选择器是根据元素名称匹配相应的元素. 通俗的讲元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的. 可以把元素的标记名理解成学生的姓名,在一个学校中可能有多个姓名为"刘伟"的学生,但是姓名为"吴语"的学生也许只有一个,所以通过元素选择器匹配到的元素可能有多个,也可能是一个. 多数情况下,元素选择器匹配的是一组元素. 元素选择
jQuery选择器中的特殊符号处理方法

一般情况下,在jQuery选择器中,我们很少会用到诸如"."."#"."("."["等特殊字符,因为根据W3C规定,HTML文档中属性的值是不能包含有这些个特殊字符的,但是在实际应用中,偶尔也会遇到表达式中含有"#"和"."等特殊字符那么是如何处理这些个特殊字符的呢? HTML代码: <div id="id.a">aa</div> <d
jQuery中复合选择器简单用法示例

本文实例讲述了jQuery中复合选择器简单用法.分享给大家供大家参考,具体如下: 一介绍复合选择器将多个选择器(可以是ID选择器.元素选择或是类名选择器)组合在一起,两个选择器之间以逗号","分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象. 多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个选择器匹配的元素合并后一起返回. 复合选择器的使用方法如下: $(&

jQuery选择器选中最后一个元素，倒数第二个元素操作示例

相关推荐

随机推荐