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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
JS代码触发事件代码实例
Jan 02 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 安全检测代码片段(分享)
2013/07/05 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
document.createElement()用法
2013/03/13 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
python通过smpt发送邮件的方法
2015/04/30 Python
Python lxml模块安装教程
2015/06/02 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python函数与方法的区别总结
2019/06/23 Python
详解python播放音频的三种方法
2019/09/23 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
平安建设实施方案
2014/03/19 职场文书
创先争优承诺书范文
2014/03/31 职场文书
2014年医生工作总结
2014/11/21 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL