浅谈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 相关文章推荐
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
关于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实时显示输出
2008/10/02 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
jQuery的框架介绍
2016/05/11 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python保存数据到本地文件的方法
2018/06/23 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python模块常用用法实例详解
2019/10/17 Python
python如何保存文本文件
2020/06/07 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
如何利用python进行时间序列分析
2020/08/04 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
如何写出好的Java代码
2014/04/25 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
项目负责人岗位职责
2015/02/15 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
英文辞职信范文
2015/05/13 职场文书
节水宣传标语口号
2015/12/26 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
一起来学习Python的元组和列表
2022/03/13 Python