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_08_函数对象
Oct 15 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
总结js中的一些兼容性易错的问题
Dec 18 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 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/01 无线电
由php if 想到的些问题
2008/03/22 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
yii用户注册表单验证实例
2015/12/26 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
人机交互程序 python实现人机对话
2017/11/14 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
怎样有效的进行自我评价
2013/10/06 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
绿色学校实施方案
2014/03/31 职场文书
公务员政审材料
2014/12/23 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
2015年采购工作总结
2015/04/10 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Python数据结构之队列详解
2022/03/21 Python