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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python装饰器原理与用法分析
2018/04/30 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
python tqdm库的使用
2020/11/30 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
广告语设计及教案
2014/03/21 职场文书
小学生操行评语
2014/04/22 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
平安建设汇报材料
2014/12/29 职场文书
Python 键盘事件详解
2021/11/11 Python