jQuery+css last-child实现选择最后一个子元素操作示例
时间:2018-12-10
这篇文章主要介绍了jQuery+css last-child实现选择最后一个子元素操作,结合实例形式分析了jQuery结合css进行页面元素选择与样式修改相关操作技巧,需要的朋友可以参考下
本文实例讲述了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>www.jb51.net 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.jb51.net/code/HtmlJsRun测试,可得到如下运行效果:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
- JavaWeb(六)之MVC与三层架构设计
- 纸上谈兵: 最短路径与贪婪
- Java魔法堂:枚举类型详解
- 机器学习笔记(5):多类逻辑回归-手动添加隐藏层
- JavaWeb(五)之JSTL标签库
- spring cloud:Edgware.RELEASE版本中zuul回退方法的变化
- js中几种实用的跨域方法原理详解
- spring cloud:Edgware.RELEASE版本hystrix超时新坑
- JS魔法堂:再识ASCII实体、符号实体和字符实体
- MyBatis之传入参数——parameterType
- 被解放的姜戈07 马不停蹄
- 机器学习笔记(6):多类逻辑回归-使用gluon
- JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性
- JavaWeb(四)EL表达式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 手把手教你配置vim,小白也可以
- 【NPM库】- 0x02
- 最长有效括号
- 统计全为1的子矩形
- Android Camera1中的人脸检测
- Executors功能如此强大,ThreadPoolExecutor功不可没(一)
- dotNET:怎样处理程序中的异常(实战篇)?
- 二维背包问题
- 小程序系列之禁用视频快进
- springBoot整合Mq报错:JmsMessagingTemplate that could not be found
- TCP:测试小工具TCPing
- 对象实例化内存布局与访问定位 Krains 2020-08-14
- 基于Docker Compose部署分布式MinIO集群
- Go语言 | 从并发模式看channel使用技巧
- 字节码文件 Krains 2020-08-04