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 相关文章推荐
js arguments对象应用介绍
Nov 28 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
js 获取时间间隔实现代码
May 12 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
vue点击页面空白处实现保存功能
Nov 06 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
一个简洁的多级别论坛
2006/10/09 PHP
php header()函数使用说明
2008/07/10 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
JS的replace方法介绍
2012/10/20 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python heapq使用详解及实例代码
2017/01/25 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python 实现超级玛丽游戏
2020/11/25 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
班长自荐书范文
2014/02/11 职场文书
逃课上网检讨书
2014/02/20 职场文书
六一节目主持词
2014/04/01 职场文书
老师对学生的评语
2014/04/18 职场文书
劳资协议书范本
2014/04/23 职场文书
班长演讲稿范文
2014/04/24 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
书法社团活动总结
2015/05/07 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript