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的全局变量
Nov 16 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
改进Django中的表单的简单方法
2015/07/17 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
python os.listdir()乱码解决方案
2021/01/31 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
商务英语广告词大全
2014/03/18 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
广告宣传策划方案
2014/05/21 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
学习保证书
2015/01/17 职场文书
毕业班工作总结
2015/08/10 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书