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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jquery实现拖拽小方块效果
Dec 10 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
一些星际专用术语解释
2020/03/04 星际争霸
晶体管来复再生式二管收音机
2021/03/02 无线电
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
javascript来定义类的规范小结
2010/11/19 Javascript
chrome原生方法之数组
2011/11/30 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
python openpyxl模块的使用详解
2021/02/25 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
优秀教师感人事迹材料
2014/05/04 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server
Python学习之时间包使用教程详解
2022/03/21 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers