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


Posted in Javascript onNovember 20, 2016

一个例子:

<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的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
关于js函数解释(包括内嵌,对象等)
Nov 20 #Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 #Javascript
解决前端跨域问题方案汇总
Nov 20 #Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 #Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 #Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 #Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
Python内建数据结构详解
2016/02/03 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
python框架中flask知识点总结
2018/08/17 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
服装促销活动方案
2014/02/23 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
三严三实对照检查材料
2014/08/25 职场文书
培训师岗位职责
2015/02/14 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript