1、first-child

first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素：

示例代码：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>jQuery中first-child与first选择器区别</title>

    </head>

    <body>

        <ul>

            <li>John</li>

            <li>Karl</li>

            <li>Brandon</li>

        </ul>

        <ul>

            <li>Glen</li>

            <li>Tane</li>

            <li>Ralph</li>

        </ul>

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

        <script type="text/javascript">

            //选择了2个元素：

            //分别是：<li>John</li> 和 <li>Glen</li>

            //first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素

            $("li:first-child").css('color', 'red');

        </script>

    </body>

</html>

效果：

2、first

first为获取匹配的第一个元素，只能匹配一个元素。

示例代码：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>jQuery中first-child与first选择器区别</title>

    </head>

    <body>

        <ul>

            <li>John</li>

            <li>Karl</li>

            <li>Brandon</li>

        </ul>

        <ul>

            <li>Glen</li>

            <li>Tane</li>

            <li>Ralph</li>

        </ul>

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

        <script type="text/javascript">

            //选择了1个元素：

            //是：<li>John</li>

            //first为获取匹配的第一个元素，只能匹配一个元素

            $("li:first").css('color', 'red');

        </script>

    </body>

</html>

效果：

在使用过程中要注意两者的区别。

jQuery中first-child与first选择器区别的更多相关文章

  1. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  2. 深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...

  3. jquery中的this与$(this)的区别总结（this：html元素）（$(this)：JQuery对象）

    jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性  ...

  4. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  5. jquery中的$().each和$.each的区别

    jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...

  6. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  7. jquery中this与$(this)的用法区别

    jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...

  8. jquery 中 html与text函数的区别

    jquery 中 html与text函数的区别 共同点:它们都能讲函数中的参数渲染到页面中: 异同点: text() 只是简单的讲参数的内容写入到页面中: html() 会根据参数的值,判断是否字体符 ...

  9. 前端开发入门到进阶附录一【JQuery中parent()，parents()，parentsUntil()区别和使用技巧】

    JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...

  10. JQuery中$.each 和$(selector).each()的区别详解

    PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...

随机推荐

  1. linux 定时任务 crontab 详细解释(转)

    cron 是linux的内置服务,但它不自动起来,可以用以下的方法启动.关闭这个服务:  引用:  /sbin/service crond start //启动服务  /sbin/service cr ...

  2. SQLite 客户端管理工具

    SQLite 客户端管理工具 SQLite Expert Personal 3.5.79.2499 下载地址:http://www.onlinedown.net/soft/117987.htm SQL ...

  3. C#和C++中char类型的区别

    对于char,这个字符类型.我们一般都认为就是一个字节.今天在仔细比较发现,C#的char和C++的char是有区别的. 1.首先来看C#中char占多大空间 using System;using S ...

  4. App Store常用推广方法

    转:http://www.cocoachina.com/bbs/read.php?tid-5000.html 天天潜水,在这里获益不少.不贡献一点似乎过意不去,所以在这里根据自己的经验谈谈基本的推广方 ...

  5. 开始Admob广告盈利模式详细教程

    例子工程源码下载地址:     下载源代码               当然,我也参考了一些网上的资料,主要有: AdMob:在android应用中嵌入广告的方案        如何在Android ...

  6. .NET：CLR via C# User-Mode Constructs

    The CLR guarantees that reads and writes to variables of the following data types are atomic: Boolea ...

  7. .NET：CLR via C# The Interlocked Anything Pattern

    Many people look at the Interlocked methods and wonder why Microsoft doesn't create a richer set of ...

  8. 什么是软件project？

    Normal 0 7.8 pt 0 2 false false false MicrosoftInternetExplorer4 /* Style Definitions */ table.MsoNo ...

  9. Rsync服务介绍与配置

    Rsync 简要介绍 rsync 是一个用于增量文件传输的开源工具,不得不说,rsync简直是不同服务器间传输文件.同步文件的利器.与FTP相比,它具有非常简单的安装和配置方法.而且,rsync可以只 ...

  10. 如何记录linux终端下的操作日志

    如何记录linux终端下的操作日志 在linux终端下,为方便检查操作中可能出现的错误,以及避免屏幕滚屏的限制,我们可以把操作日志记录下来.常用的工具有 screen,script,以及tee等,通过 ...