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 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
解析PHP的session过期设置
2013/06/29 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
使用python在本地电脑上快速处理数据
2017/06/22 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python实现汽车管理系统
2018/11/30 Python
int在python中的含义以及用法
2019/06/27 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Django REST 异常处理详解
2020/07/15 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
新学期校长寄语
2014/01/18 职场文书
一名老师的自我评价
2014/02/07 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
会计学专业自荐信
2014/06/25 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL