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 相关文章推荐
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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 socke 向指定页面提交数据
2008/07/23 PHP
php对象工厂类完整示例
2018/08/09 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python3基础之函数用法
2014/08/13 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
置业顾问岗位职责
2014/03/02 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
国际贸易求职信
2014/07/05 职场文书
一份文言文检讨书
2014/09/13 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2015年复活节活动总结
2015/02/27 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers