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


Posted in Javascript onDecember 31, 2014

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

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

语法结构:

$(":first-child")

此选择器一般也要和其他选择器配合使用,比如类选择器、元素选择器等等。例如:
$("ul li:first-child").css("color","blue")

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

注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是li,而是li的父元素。很多人往往误以为是匹配li元素的子元素中的最后一个元素。

实例代码:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="https://3water.com/" />

<title>:first-child选择器-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("ul li:first-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>

以上代码中,点击按钮可以将每一个ul下的第一个li元素的文字颜色设置为蓝色。

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

Javascript 相关文章推荐
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
小程序实现列表倒计时功能
Jan 29 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
jQuery中[attribute=value]选择器用法实例
Dec 31 #Javascript
修复bash漏洞的shell脚本分享
Dec 31 #Javascript
You might like
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
获得Google PR值的PHP代码
2007/01/28 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
curl和libcurl的区别简介
2015/07/01 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
echarts实现折线图的拖拽效果
2019/12/19 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
使用tensorflow实现AlexNet
2017/11/20 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
使用Tkinter制作信息提示框
2020/02/18 Python
新电JAVA笔试题目
2014/08/31 面试题
物业保安主管岗位职责
2013/12/25 职场文书
洗手间标语
2014/06/23 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
责任书范本大全
2015/05/11 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP