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. Comparable<T> 和 Comparator<T>

    相同点: Comparable<T> 和 Comparator<T>都是接口 不同点: 两者声明的方法不同.前者是compareTo()方法,后者是compare()方法. C ...

  2. InvalidateRect(转)

    ///===================该段是自己总结的一个小结================================= InvalidateRect()函数的作用是设置一个无效区域,并 ...

  3. Word文档中的语法高亮显示代码

    有时候我们程序员也需要在word文档里面显示代码,但是直接复制过去 不好看,格式也不太对,这里给大家分享一个Word文档中的语法高亮显示代码的方法 http://www.planetb.ca/synt ...

  4. oracle的dump理解

    http://blog.csdn.net/notbaron/article/details/51228444 http://blog.csdn.net/lqx0405/article/details/ ...

  5. STM32学习笔记3-IO配置输入输出

    STM32的IO配置时没什么特殊的,有个注意点就是有用IO前须要先打开其时钟线,下面是验证过oK的程序: RCC->APB2ENR|=GpioBApb2enrEn; //使能PORTB时钟 GP ...

  6. C#高性能大容量SOCKET并发(转)

    C#高性能大容量SOCKET并发(零):代码结构说明 C#高性能大容量SOCKET并发(一):IOCP完成端口例子介绍 C#高性能大容量SOCKET并发(二):SocketAsyncEventArgs ...

  7. Android中关于项目中对Thread的管理（不是线程池）

    背景 项目中对于一些并不复杂的耗时操作,比如计算,不频繁操作数据库等,因为没必要使用线程池,所以之前项目会直接使用new Thread的方式,时间一长,回头再看,原来new Thread之处已经很多了 ...

  8. Selenium2+python自动化51-unittest简介

    前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG,这个招聘的需求上也是经常见到的.python里面也有单元测试框架-unittest,相当于是一个python版的junit. ...

  9. C++ 转型动作 尽量避免 以及 那些意想不到的威胁

    看完EffectiveC++的关于转型的章节,顿时认为周围的代码都处在悬崖边上~~ C的旧式转型:inta = 10; double b = (double)a; 对于C++的四种转型函数, cons ...

  10. VMware与Cisco DRAC中的virtual disk的对应关系

    笔者面临的问题如下: 笔者有一台Cisco C240的服务器, 其中有十块容量一样大的SAS的local disk, 一块SSD. 其中的两块SAS盘组成了一个RAID 1的virtual drive ...