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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
JavaScript事件对象event用法分析
2018/07/27 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
学习python的几条建议分享
2013/02/10 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Python3.6简单反射操作示例
2018/06/14 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
解决python 上传图片限制格式问题
2019/10/30 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
企业职业病防治方案
2014/05/29 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS