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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
Javascript 布尔型分析
Dec 22 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
js实现时分秒倒计时
Dec 03 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
如何使用vue3打造一个物料库
May 08 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和javascript常用正则表达式及用法实例
2014/07/01 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
js面向对象的写法
2016/02/19 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
django初始化数据库的实例
2018/05/27 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python从PDF中提取数据的示例
2020/10/30 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
白色公司:The White Company
2017/10/11 全球购物
高一家长会邀请函
2014/01/12 职场文书
会计学自我鉴定
2014/02/06 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
创先争优活动个人总结
2015/03/04 职场文书
基层党支部承诺书
2015/04/30 职场文书
工程质量保证书
2015/05/09 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技