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表单设置值的方法
Jun 30 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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输出Excel文件类
2010/02/08 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Python中__call__用法实例
2014/08/29 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
绝对经典成功的大学生推荐信
2013/11/08 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
初一学生期末评语
2014/04/24 职场文书
三八活动策划方案
2014/08/17 职场文书
委托书怎样写
2014/08/30 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技