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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 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数组编码转换示例详解
2014/03/11 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
jquery控制display属性为none或block
2014/03/31 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
js类的继承定义与用法分析
2019/06/21 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
浅谈Django REST Framework限速
2017/12/12 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python 接收处理外带的参数方法
2018/12/03 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
外贸业务员工作职责
2014/01/06 职场文书
企业消防安全制度
2014/02/02 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
责任书格式范文
2014/07/28 职场文书
首都博物馆观后感
2015/06/05 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python