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. pkgadd 软件安装二种方法

    安装文件 pkgadd -d /soft/top-3.6.1-sol10-x86-local 安装目录文件: pkgadd -d ./ SUNWi1cs SUNWi15cs

  2. 在Linux下使用sprintf代替atoi实现整型转化为char*

    程序中需要用到将整型转化为char*类型,然后将两个char*类型的变量拼接.将整型转化为char*自然想到了itoa函数: 头文件:#include <stdio.h> char *it ...

  3. 免费的Bootstrap管理后台模板集合

    Free Bootstrap Admin Templates for Designers 1. Admin Lite AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高 ...

  4. 转 ios给view设置圆角

    // 圆角 userhead.layer.masksToBounds = YES; userhead.layer.cornerRadius = 6.0; userhead.layer.borderWi ...

  5. IOC详解和Unity基础使用介绍

    说起IOC,可能很多初学者不知道是用来做什么的,今天正好有点时间,就来扫扫盲,顺便巩固下自己. IOC全称是Inversion Of Control,意为控制反转(这些自然百度也有),可什么是控制反转 ...

  6. ACM-DP之最大连续子序列——hdu1231

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...

  7. html在线编辑器汇总

    1. TinyMCE 免费,开源,轻量的在线编辑器,基于 JavaScript,高度可定制,跨平台. 2. FCKEditor 免费,开源,用户量庞大的在线编辑器,有良好的社区支持. 3. YUI E ...

  8. 如何在JTable中动态添加一行

    JTable tbImage = new JTable(5,5);//create a dummy tableDefaultTableModel dtm=(DefaultTableModel)tbIm ...

  9. C#中的托管与非托管

    在.net 编程环境中,系统的资源分为托管资源和非托管资源. 字面理解托管,就是托付个别人管理,要的是结果,具体怎么完成的我并不关心,就像某些'牛逼'的老板“我只要结果”那样. 在.NET FRAME ...

  10. iOS抽屉效果

    源代码下载 抽屉效果第三方类库下载 所需第三方类库下载 側拉栏抽屉效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTUhUaW9z/font/5a6L ...