jQuery中:last-child选择器用法实例


Posted in Javascript onDecember 31, 2014

本文实例讲述了jQuery中:last-child选择器用法。分享给大家供大家参考。具体分析如下:

此选择器能够匹配父元素的最后一个子元素。

注意:last只选取一个元素,而此选择符将匹配每个父元素的最后一个子元素。
语法结构:

$(":last-child")

此选择器一般也要和其他选择器配合使用,比如类选择器、元素选择器等等。例如:

$("li:last-child").css("color","blue")

以上代码能够将父元素下最后一个li元素中的字体颜色设置为蓝色。

注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是li,而是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(){ 

    $("li:last-child").css("color","blue") 

  }) 

})  

</script>

</head>

<body>

<div>

  <ul>

    <li class="houtai" title="asp">ASP教程</li>

    <li class="houtai" title="net">ASP.NET教程</li>

    <li class="houtai" title="php">PHP教程</li>

  </ul>

  <ul>

    <li class="qiantai" title="html">html教程</li>

    <li class="qiantai" title="div">DIV+CSS教程</li>

    <li class="qiantai" title="jquery">jQUERY教程</li>

    <li class="qiantai" title="js">jAVAScript教程</li>

  </ul>

</div>

<button>点击查看效果</button>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 #Javascript
jQuery中:first-child选择器用法实例
Dec 31 #Javascript
jQuery中复合属性选择器用法实例
Dec 31 #Javascript
javascript实现左右控制无缝滚动
Dec 31 #Javascript
javascript比较两个日期的先后示例代码
Dec 31 #Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 #Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 #Javascript
You might like
php date与gmdate的获取日期的区别
2010/02/08 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
一个JS翻页效果
2007/07/23 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
Python  连接字符串(join %)
2008/09/06 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python实现求特征选择的信息增益
2018/12/18 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
Python学习笔记之装饰器
2020/08/06 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
军训自我鉴定范文
2014/02/13 职场文书
英语教育专业自荐信
2014/05/29 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
2015年党总支工作总结
2015/05/25 职场文书
运动会100米广播稿
2015/08/19 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书