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()的使用区别的更多相关文章

  1. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  2. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

  3. [转载]jQuery中的html，val，text区别

    在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...

  4. jquery中$.get()提交和$.post()提交有区别

    jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...

  5. Jquery中bind和live.one,delegate的区别

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...

  6. jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  7. jquery 中后代遍历之children、find区别

    jquery 中children.find区别 首先看一段HTML代码,如下: <table id="tb"> <tr> <td>0</t ...

  8. Jquery中$.each()与$().each()的使用与区别。

    在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法.两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点. $().each,对于这个方法,在d ...

  9. jQuery中四种事件监听的区别

    原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...

  10. jquery中attr方法和prop方法的区别

    关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...

随机推荐

  1. jqgrid 合并表头

    参考:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:groupingheadar jQuery("#表格id").jqGri ...

  2. vue2 Excel导出数据 js-xlsx的使用

    vue2 Excel导出数据 js-xlsx的使用 https://www.jianshu.com/p/ea115a8e9107 小世界最温暖 关注 2018.11.19 16:08 字数 280 阅 ...

  3. 一、iBatis进行分页查询

    1.ibatis理解: iBatis属于半自动化的ORM框架,我们需要编写SQL语句,由iBatis进行数据库访问,返回结果.而iBatis可以为我们做的更多,比如对查询参数集合.结果.分页查询.事务 ...

  4. pytorch 调整tensor的维度位置

    target.permute([0, 3, 1, 2]) 一定要使用permute以及中括号 一些在我这里没起到作用的网上的例子: 1. https://blog.csdn.net/zouxiaolv ...

  5. Random Process Modeling_1

    1. Bertrand Triangle r=1; %circle radius x0=0; y0=0; %centre of circle %points for circle t=linspace ...

  6. sklearn学习笔记（1）--make_blobs函数及相应参数简介

    make_blobs方法: sklearn.datasets.make_blobs(n_samples=100,n_features=2,centers=3, cluster_std=1.0,cent ...

  7. 有时间会做系列一（Dice）

    题目大意:给n个骰子的每面安排点数,第i个骰子有a[i]面,a[i]和为m,点数范围从1到m,不重复.问怎么安排掷骰子的点数和的期望最大.输出期望和每个骰子的点数(按骰子输入顺序). 思路: EX=x ...

  8. PostGIS官方教程汇总目录

    一.PostGIS介绍 二.PostGIS安装 三.创建空间数据库 四.加载空间数据 五.数据 六.简单的SQL语句 七.几何图形(Geometry) 八.关于几何图形的练习 九.空间关系 十.空间连 ...

  9. 虚拟机下安装win7

    参考博客:https://blog.csdn.net/weixin_43465312/article/details/92662519 下载地址:https://msdn.itellyou.cn/

  10. 【题集】k倍区间（抽屉原理）

    例1:http://lx.lanqiao.cn/problem.page?gpid=T444 蓝桥杯 问题描述 给定一个长度为N的数列,A1, A2, ... AN,如果其中一段连续的子序列Ai, A ...