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 相关文章推荐
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
AngularJS基础知识
Dec 21 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JavaScript入门基础
Aug 12 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
vuejs如何配置less
Apr 25 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
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的面试题集
2006/11/19 PHP
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
python flask搭建web应用教程
2019/11/19 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
python 实现批量图片识别并翻译
2020/11/02 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
党员廉洁自律承诺书
2014/05/26 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
师德承诺书2015
2015/04/28 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python