浅谈jquery选择器 :first与:first-child的区别

一个例子：

<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

first表示（所有父元素合并后的）第一个；first-child表示（每个父元素的）第一个

$('ul li:first') 返回john所在的li。 查找所有ul下第一个li元素

$("ul li:first-child") 返回 john glen。 查找每个ul下第一个元素是li元素dom元素。

扩展用法：$("body *:first")表示body下的第一个孩子元素； $("body *:first-child")表示body下的每一个是第一个孩子元素的元素

另外，css选择器从右往左，如果是这样；

<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>

<div>DIV</div>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

那么$("ul li:first-child") 只返回John. 查找每个的第一个孩子元素，如果是li元素则匹配，否则不匹配.

$('li:first‘)匹配第一个li元素  $("li:first-child")匹配第一个li元素，它是某个元素的第一个孩子元素

以上这篇浅谈jquery选择器 :first与:first-child的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery中:first-child选择器用法实例

    本文实例讲述了jQuery中:first-child选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配父元素的第一个子元素. 语法结构: 复制代码 代码如下: $(":first-child") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $("ul li:first-child").css("color","blue") 以上代码能够将父元素下的第一个li

  • 基于jquery中children()与find()的区别介绍

    基于jquery中children()与find()的区别介绍

    .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元素集合中每个元素的后代.参数是必选的,可以为选择器.jquery对象可元素来对元素进行筛选. .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级.这里的children,我理解为儿子,只在儿子这一级遍历.看下例子: 复制代码 代码如下: .chi

  • 浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

  • 浅谈jquery选择器 :first与:first-child的区别

    一个例子: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> first表示(所有父元素合并后的)第一个:first-child表示(每个父元素的)

  • 浅谈jquery之on()绑定事件和off()解除绑定事件

    off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S

  • 浅谈jQuery中的checkbox问题

    一开始的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框</title> <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script t

  • 浅谈jquery中的each方法$.each、this.each、$.fn.each

    jquery.each 方法 方法一 $("img").each(function(i,elem){ // i 下标 从零开始, // elem == this // $(elem).toggleClass("example"); $(this).toggleClass("example"); }); 方法二 $.each([1,2,3,4],function(){ //$(this)==数组中的每一个数组(如果数组是对象,就是对象) }); 方

  • 浅谈jQuery before和insertBefore的区别

    jQuery 中利用before和insertBefore可以达到在指定元素前插入指定内容,写法上有区别 先看一个例子: 在<div class='div1'>div1</div>前面插入<div>toInsertContent</div> 实现: $('<div>toInsertContent</div>').insertBefore($('.div1')); 或者 $('.div1').before('<div>toI

  • 浅谈jQuery中的$.extend方法来扩展JSON对象

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果 set

  • 浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

    • 依赖的脚本文件 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../Javascript/jquery.form.js" type="text/javascript"></script> • ajaxSubmit 和ajaxForm区

  • 浅谈jQuery hover(over, out)事件函数

    hover(over, out)事件函数 当鼠标移动一个匹配的元素上面,会触发指定的第一个函数 当鼠标移出这个元素时,会触发指定的第二个函数 over(function):鼠标移到元素上触发的函数 out(function):鼠标移出元素触发的函数 <nav class="main-nav"> <a href="/"><span>首页</span></a> <a href="/about&q

  • 浅谈jQuery animate easing的具体使用方法(推荐)

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: •properties:一组包含作为动画属性和终值的样式属性和及其值的集合 •duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

随机推荐