jQuery+css last-child实现选择最后一个子元素操作示例


Posted in jQuery onDecember 10, 2018

本文实例讲述了jQuery+css last-child实现选择最后一个子元素操作。分享给大家供大家参考,具体如下:

<!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>3water.com jQuery选择器</title>
<style>
.red{color:#FF0000;}
</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:last').addClass("red"); //$('div p:last') 选择 最后一个P元素 并高亮显示得出结果如下:
$('div p:last-child').addClass("red");//$('div p:last-child') 将选择所有位于div最后一个p子元素,并高亮:
});
</script>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph<span>sssssssssss</span></p>
</div>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可得到如下运行效果:

jQuery+css last-child实现选择最后一个子元素操作示例

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

jQuery 相关文章推荐
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 #jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 #jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 #jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 #jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
You might like
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
[原创]图片分页查看
2006/08/28 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python中的各种装饰器详解
2015/04/11 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
Python判断telnet通不通的实例
2019/01/26 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
设计师珠宝:Ylang 23
2018/05/11 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
中英双版中文教师求职信
2013/10/27 职场文书
教导处工作制度
2014/01/18 职场文书
幼教简历自我评价
2014/01/28 职场文书
大型会议策划方案
2014/05/17 职场文书
公司外出活动方案
2014/08/14 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
庆七一活动简报
2015/07/20 职场文书