【:first】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./js/jquery-1.11/jquery.min.js"></script>
</head>

<body>
    <div>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </div>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:first").each(function(){
                alert($(this).html());
            })
        })
    </script>
</body>
</html>

【:first选择器在几个浏览器下的显示】

【:first-child】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./js/jquery-1.11/jquery.min.js"></script>
</head>

<body>
    <div>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </div>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:firstchild").each(function(){
                alert($(this).html());
            })
        })
    </script>
</body>
</html>

【waterfox】

【chrome】PS：chrome下好像存在弹窗，我就没法切到另一个窗口，所以只能3个画面截图后拼接了

【IE 11】

【Edge】

【:first-of-type】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>
</head>

<body>
    <div>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </div>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:first-of-type").each(function(){
                alert($(this).html());
            })
        })
    </script>
</body>
</html>

【总结】

从上面的截图，看出 :first 、 :first-child 、 :first-of-type，这三个选择器，浏览器内核不同，并不会影响jQuery以及显示效果。

另一方面，

【:first】选择器，返回的是单一的node，即节点，是唯一、确定的

【:first-child】选择器，返回的实际是一个node的数组，若是不用each进行遍历，默认返回的是该数组的第一个节点（后来我查看了一下size()的返回值，确实是3，印证了我的想法）

【:first-of-type】选择器，和【:first-child】类似（之所以不用一样，因为只是在这个示例中结果一样，而且两个选择器的作用也 不一样），返回的也是一个node的数组，若是不用each进行遍历，默认返回的是该数组的第一个节点（后来我查看了一下size()的返回值，确实是 3，印证了我的想法）。

【jQuery】关于选择器中的 :first 、 :first-child 、 :first-of-type的更多相关文章

  1. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  2. jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  3. jQuery的选择器中的通配符[id^='code'] 【转】

    JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...

  4. 关于jquery的选择器中的空格问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery的选择器中的通配符[id^='code'] 等示例及说明

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  6. jQuery的选择器中的通配符[id^='code']

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  7. jquery属性选择器中|value和^value的区别

    jquery的属性选择中有两个比较混淆:一个是[attribute^value], 另一个是[attribute|value]. 先看解释: [attribute^value]:选取属性的值以valu ...

  8. jQuery的选择器中的通配符[id^='code']或[name^='code']

    这两天在做一个专题的时候遇到了一个通配符的问题 //弹层操作$(function(){ //视频播放 $("a[href^='#video']").each(function(in ...

  9. jQuery属性选择器中加变量

    $(function () { $('#bkhandle').on('click','#bkdel',function () { $.ajax( { url:"{% url 'bkdel' ...

  10. 如何将变量id添加到jquery的选择器中

    今天在做广州仲裁委员会的系统时这样的一个需求,需要在页面一加载的时候查询各个项目的案件数,这里有很多个项目,一开始我是这样写的: 代码如下: $.get(assignedCaseUrl,functio ...

随机推荐

  1. ob_start()失效与phpunit的非正常结束

    在ob_clean();或ob_get_clean()之前有return或致命错误,从而结束了程序,会导致ob_start失效, 这和phpunit的非正常结束

  2. c# 图片XML序列化与反序列化

    var xmlDoc = new XmlDocument(); xmlDoc.Load(@"C:\Users\*\Desktop\*.xml"); ].ChildNodes[]; ...

  3. 02-Java 数组和排序算法

    一.Java 数组 1.数组定义:数组是有序数据的集合,数组中的每个元素具有相同的数组名和下标来做唯一标识. 2.数组的分类:一维.二维.三维. 3.数组声明及内存分配: 为数组分配内存空间:如果不分 ...

  4. wikioi 1688 求逆序对

    /*=========================================================== wikioi 1688 求逆序对 时间限制: 1 s 空间限制: 12800 ...

  5. PouchDB：可随时同步的开源JavaScript数据库

    PouchDB是一个开源的JavaScript数据库,可以运行在浏览器中.PouchDB的数据存储.处理方式受到了Apache CouchDB的启发(CouchDB是一个面向文档的数据库,可通过Jav ...

  6. ManifoldJS

    微软推出开源工具ManifoldJS,可以自动将Web App转换成各种平台的App(安卓.iOS.Chrome OS.Windows). ManifoldJS通过获取网站meta-data信息,即可 ...

  7. https和http共存的nginx配置

    server {        listen       80;        listen      443 ssl;        server_name  test.xx.com;        ...

  8. js中数组Array的一些常用方法总结

    var list = new Array()是我们在js中常常写到的代码,今天就总结一下Array的对象具有哪些方法. list[0] = 0; list[1] = 1; list[2] = 2; 或 ...

  9. XSS转码 &amp;&amp; struts2 property标签的bug

    struts2: <s:property value="name" escape="false"/> EL表达式: jsp 2.0中的 ${todo ...

  10. 查询oracle RAC实例名称等信息

    select * from gv$instance;