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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
javascript处理table表格的代码
Dec 06 Javascript
jquery的map与get方法详解
Nov 04 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
JS的深浅复制详细
Oct 16 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生成EXCEL的东东
2006/10/09 PHP
php中的登陆login
2007/01/18 PHP
php 前一天或后一天的日期
2008/06/28 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
js实现圆盘记速表
2015/08/03 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python画微信表情符的实例代码
2019/10/09 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Django框架models使用group by详解
2020/03/11 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
销售人员获奖感言
2014/02/05 职场文书
运动会稿件200字
2014/02/07 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
协议书范本
2014/04/23 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
干部作风建设心得体会
2014/10/22 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2015年招聘工作总结
2014/12/12 职场文书
三年级学生期末评语
2014/12/26 职场文书
协议书范文
2015/01/27 职场文书
初中教师个人总结
2015/02/10 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
Ruby处理CSV数据方法详解
2022/04/18 Ruby