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 EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
js Math 对象的方法
Sep 01 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php返回json数据函数实例
2014/10/09 PHP
php浏览历史记录的方法
2015/03/10 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
GreyBox技术总结(转)
2010/11/23 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
详解Bootstrap插件
2016/04/25 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
python dict如何定义
2020/09/02 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
秋季运动会广播稿大全
2014/02/17 职场文书
四下基层实施方案
2014/03/28 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
股指期货心得体会
2014/09/10 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python