jQuery中:last选择器用法实例


Posted in Javascript onDecember 30, 2014

本文实例讲述了jQuery中:last选择器用法。分享给大家供大家参考。具体分析如下:

此选择器匹配元素集合中的最后一个元素。

语法结构:

$(":last")

此选择器一般和其他的选择器配合使用,比如类选择器和元素选择器等等。例如:
$("li:last").css("color","green")

以上代码能够将li元素集合中的最后一个li元素中的字体颜色设置为绿色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":last")等同于$("*:last")。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("li:last").css("color","green") 

  }) 

}) 

</script> 

</head> 

<body> 

<div> 

  <ul> 

    <li class="zhuanqu">html专区</li> 

    <li class="zhuanqu">div+css专区</li> 

    <li class="zhuanqu">jQuery专区</li> 

    <li class="zhuanqu">Javascript专区</li> 

  </ul> 

</div> 

<button>点击查看效果</button> 

</body> 

</html>[/size]

[size=2]

以上代码代码可以将li元素集合中最后一个li元素中的字体颜色设置为绿色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" /> 

<title>三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $(":last").css("color","green") 

  }) 

}) 

</script> 

</head> 

<body> 

<div> 

  <ul> 

    <li class="zhuanqu">html专区</li> 

    <li class="zhuanqu">div+css专区</li> 

    <li class="zhuanqu">jQuery专区</li> 

    <li class="zhuanqu">Javascript专区</li> 

  </ul> 

  <div> 

     <span>三水点靠木</span> 

  </div> 

</div> 

<button>点击查看效果</button> 

</body> 

</html>

由于没有指定选择器与:last选择器匹配使用,所以将会默认与*选择器匹配使用,所以将会让button按钮中的字体颜色设置为绿色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
前端常见跨域解决方案(全)
Sep 19 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 #Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 #Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 #Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 #Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 #Javascript
JavaScript中的对象序列化介绍
Dec 30 #Javascript
JavaScript中的数组特性介绍
Dec 30 #Javascript
You might like
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python之web模板应用
2017/12/26 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
护士自我鉴定怎么写
2014/02/07 职场文书
《雪儿》教学反思
2014/04/17 职场文书
商品陈列协议书
2014/09/29 职场文书
个人简历求职信范文
2015/03/20 职场文书
2015年资料员工作总结
2015/04/25 职场文书
勇敢的心观后感
2015/06/09 职场文书