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. mklink让网盘同步不同文件夹

    mklink简介 Linux 下有一个叫符号链接的东东,是 ln 这个链接命令,mklink 和 ln 的功能几乎一样.在xp系统下,junction命令要用微软开发的小程序 junction.exe ...

  2. oracle 取整的几种方法

    --1.取整(大)      select ceil(-1.001) value from dual ; --2.取整(小) select floor(-1.001) value from dual ...

  3. 关于错误errno EFAULT：Bad address

    UDP socket : read error Bad address 在写UDP server.在调用套接字读取的时候发生了这个错误. 通过看errno.h 能够看到相应的错误号  EFAULT: ...

  4. HDU2838 Cow Sorting 树状数组 区间求和加逆序数的应用

    这题目意思非常easy,就是给你一个数组,然后让你又一次排好序,排序有要求的,每次仅仅能交换两个元素的位置,交换须要一个代价 就是两个元素之和,问你把数组重小到大排好最少须要多少代价 可能一開始想不到 ...

  5. JSPGen4 自学路线图

  6. freecms怎样在信息列表类标签中提取info.content

    原文地址:http://javaz.cn/site/javaz/site_study/info/2015/22026.html 项目地址:http://www.freeteam.cn/ 因为info. ...

  7. ztree使用系列三（ztree与springmvc+spring+mybatis整合实现增删改查）

    在springmvc+spring+mybatis里整合ztree实现增删改查,上一篇已经写了demo,以下就仅仅贴出各层实现功能的代码: Jsp页面实现功能的js代码例如以下: <script ...

  8. 算法：希尔排序（Shell Sort）

    背景 在三种简单的排序算法中(冒泡.选择和插入)插入排序的算法最好,不过插入过程可能需要进行大量的移动,如何尽可能少的移动元素呢?希尔排序正是基于对这个问题的思考而想出来的,考虑到希尔排序对已排序数组 ...

  9. pytest文档28-重复执行用例（pytest-repeat）

    前言 平常在做功能测试的时候,经常会遇到某个模块不稳定,偶然会出现一些bug,对于这种问题我们会针对此用例反复执行多次,最终复现出问题来. 自动化运行用例时候,也会出现偶然的bug,可以针对单个用例, ...

  10. JAVA nio 2 定义 Path 类

    一旦确认了文件系统上的一个文件或目录,那么就可以定义一个 Path 类来指向它.定义 Path 类可以使用绝对路径.相对路径.路径中带有一个点号“.”(表示当前目录).路径中带有两个点“..”(表示上 ...