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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
Mac下安装vue
2018/04/11 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
python Django模板的使用方法
2016/01/14 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
思想汇报范文
2013/11/04 职场文书
学生个人自我鉴定
2014/03/26 职场文书
法人代表委托书
2014/04/04 职场文书
安全标语大全
2014/06/10 职场文书
课外访万家心得体会
2014/09/03 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
经典祝酒词大全
2015/08/12 职场文书
Python的property属性详细讲解
2022/04/11 Python
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python