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.Encode手动解码技巧
Jul 14 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
Vue实现背景更换颜色操作
Jul 17 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
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
javascript轮播图算法
2016/10/21 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
express express-session的使用小结
2018/12/12 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
python比较两个列表是否相等的方法
2015/07/28 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python决策树之C4.5算法详解
2017/12/20 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python函数的作用域及关键字详解
2019/08/20 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
国贸专业个人求职信分享
2013/12/04 职场文书
会议主持词
2014/03/17 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
学生会主席任命书
2015/09/21 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫