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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
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
PHP 日常开发小技巧
2009/09/23 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
在windows系统中实现python3安装lxml
2016/03/23 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
python如何读写csv数据
2018/03/21 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
优秀少先队工作者事迹材料
2014/05/13 职场文书
信息工作经验交流材料
2014/05/28 职场文书
出纳岗位职责
2015/01/31 职场文书
材料采购员岗位职责
2015/04/03 职场文书