jQuery中:first，:first-child，first()的使用区别
ul li:first 先获取页面中所有li节点对象数组，然后返回数组中的第一个li节点对象 。
:first-child 选择器选取属于其父元素的第一个子元素的所有元素。
first() 返回被选元素的首个元素。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>ul_1 item 1</li>
<li>ul_1 item 2</li>
<li>ul_1 item 3</li>
<li>ul_1 item 4</li>
<li>ul_1 item 5</li>
</ul>
<ul>
<li>ul_2 item 1</li>
<li>ul_2 item 2</li>
<li>ul_2 item 3</li>
<li>ul_2 item 4</li>
<li>ul_2 item 5</li>
</ul>
</body>
</html>
先测试 :first，代码如下
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li:first").css("background-color","yellow");
})
</script>
效果如下; 只有第一个被选中,
测试:first-child，代码如下
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li:first-child").css("background-color","yellow");
})
</script>
效果如下：
发现每一个ul的第一个li元素都被选中，
测试first()，代码如下
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li").first().css("background-color","yellow");
})
</script>
效果如下：
结果发现只有第一个被选中，
这里发现，:first选中的是第一个ul元素的第一个li子元素，然后添加样式，不论这个元素在本页面有多少个，它只找第一个
而:first-child选择的是所有ul下面的第一个子元素是li的元素，有两个ul父元素，ul_1,ul_2他们都拥有各自的子元素li。
最后是first()它和:first 类似，获取的第一个ul元素的第一个li子元素，不管有多少个本元素
jQuery中:first，:first-child，first()的使用区别的更多相关文章
- jquery中,size()和length()方法有啥区别
jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...
- jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
- [转载]jQuery中的html，val，text区别
在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...
- jquery中$.get()提交和$.post()提交有区别
jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...
- Jquery中bind和live.one,delegate的区别
Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...
- jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...
- jquery 中后代遍历之children、find区别
jquery 中children.find区别 首先看一段HTML代码,如下: <table id="tb"> <tr> <td>0</t ...
- Jquery中$.each()与$().each()的使用与区别。
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法.两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点. $().each,对于这个方法,在d ...
- jQuery中四种事件监听的区别
原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...
- jquery中attr方法和prop方法的区别
关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...
随机推荐
- 四、java基础-面向过程_对象_类中可出现的因素
1.面向过程和面向对象区别: 1)面向过程:开发一个应用程序.一个项目,必须先了解整个过程,了解各个步骤.模块间的因果关系,使的面向过程方式去开发程序时,代码和代码之间的关联程度是非常强.所以其中任何 ...
- 在线配置raid
Exit Code: 0x00 rpm -ivh MegaCli-8.07.14-1.noarch.rpm ls /opt/MegaRAID/MegaCli//opt/MegaRAID/MegaCli ...
- 黑马客户管理系统(SSM)
黑马客户管理系统 1系统概述 1.1系统功能介绍 本系统后台使用SSM框架编写,前台页面使用当前主流的Bootstrap和jQuery框架完成页面信息展示功能(关于Bootstrap的知识,有兴趣的读 ...
- python获取最大、最小值
1.获取数组极值,并返回索引 c = [-10,-5,0,5,3,10,15,-20,25] print c.index(min(c)) # 返回最小值 print c.index(max(c)) ...
- WIN2008中部署网站后样式及JS加载不了(转载)
今天在一台刚刚装好的WIN2008上部署一个问题,一切按流程来:① 控制面板加IIS,把.NET 3.5打勾② 装.NET 4.0框架③ 装MSSQL2012④ IIS中部署网站⑤ 修改web.con ...
- Activemq、Rabbitmq、Rocketmq、Kafka的对比
综上所述,各种对比之后,我个人倾向于是: 一般的业务系统要引入MQ,最早大家都用ActiveMQ,但是现在确实大家用的不多了,没经过大规模吞吐量场景的验证,社区也不是很活跃,所以大家还是算了吧,我个人 ...
- Echarts学习宝典
1,可以使用百度图说中的图表代码复制到option中,还可在百度图说中以可视化的方式编辑数据,调整参数和编辑样式.(也可借助百度图说更改部分样式) 2,借助网站 https://echarts.bai ...
- thinkphp的增删改查命令 - (mysql-thinkphp) (4)
方法1,在namespace下面加2行 use think\Controller; use think\Db; 1.查询所有结果 $res = Db::query("select * fro ...
- Ubuntu操作系统部署zabbix agent服务
Ubuntu操作系统部署zabbix agent服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.下载zabbix软件包 博主推荐阅读: https://www.cnblog ...
- P1077 互评成绩计算
P1077 互评成绩计算 转跳点: