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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现简单日历效果
Jul 05 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 zend解密软件绿色版测试可用
2008/04/14 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
js实现简单的秒表
2020/01/16 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
wxPython色环电阻计算器
2019/11/18 Python
Python龙贝格法求积分实例
2020/02/29 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
Python 实现集合Set的示例
2020/12/21 Python
魅力教师事迹材料
2014/01/10 职场文书
八项规定整改方案
2014/02/21 职场文书
食品业务员岗位职责
2014/03/18 职场文书
《学会合作》教学反思
2014/04/12 职场文书
1亿有多大教学反思
2014/05/01 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
详解Python flask的前后端交互
2022/03/31 Python
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL