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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
详解JavaScript作用域 闭包
Jul 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
PHP简介
2006/10/09 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
strstr()的简单实现
2013/09/26 面试题
小学生安全保证书
2014/02/01 职场文书
出纳员岗位责任制
2014/02/11 职场文书
四年级学生评语大全
2014/04/21 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
校园安全主题班会
2015/08/12 职场文书
保险公司增员口号
2015/12/25 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python