关于jquery选择器中:first和:first-child和:first-of-type的区别及:nth-child()和:nth-of-type()的区别
:first：选择第一个出现符合的元素
:first-child：选择限制条件中的第一个元素，并且必须和冒号前面的标签一致
:first-of-type：选择所有限制条件下的第一个冒号前面的标签元素，此标签可以不是第一个
测试:first代码：
<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<a>Hello1</a>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
$(function(){
$zzz=$("p:first").text();
alert($zzz);
});
</script>
</body>
其中结果为：
测试:first-child代码：
<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
$(function(){
$zzz=$("p:first-child").text();
alert($zzz);
});
</script>
</body>
其中结果为：
测试:first-of-type代码：
<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<a>Hello1</a>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
$(function(){
$zzz=$("p:first-of-type").text();
alert($zzz);
});
</script>
</body>
其中结果为：
怎么样，很好理解吧，研究了好半天的呀！
下面是补充的:nth-child()和:nth-of-type()区别
:nth-child：是选择父元素下的第几个元素，不分标签类别，计数从1开始
:nth-of-type：是选择父元素下的同类型元素的第几个元素。区分标签类别，计数从1开始
测试:nth-child()代码：
<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
$(function(){
$zzz=$("p:nth-child(3)").text();
alert($zzz);
});
</script>
</body>
其中结果为：
测试:nth-of-type()代码：
<body>
<a></a>
<p>1</p>
<p>2</p>
<p>3</p>
<div>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
</div>
<div>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
</div>
<div></div>
<script>
$(function(){
$zzz=$("p:nth-of-type(3)").text();
alert($zzz);
});
</script>
</body>
其中结果为：
关于jquery选择器中:first和:first-child和:first-of-type的区别及:nth-child()和:nth-of-type()的区别的更多相关文章
- jquery选择器中两个class是什么意思？
jquery选择器中两个class是什么意思? $(".class1 .class2") 选择class1元素下class2的元素(中间有空格)$(".class1.cl ...
- 处理jQuery选择器中的特殊符号，如（、#等
前几天解决一个外网问题,客服反馈页面数据加载不出来,首先看一下服务端日志也没报错异常,自己测试了一下,在chrome的Console发现有js报错,原来是js报错导致的数据加载不出来. 调试了一番,发 ...
- jQuery选择器中的特殊符号和关键字
一般情况下,在jQuery选择器中,我们很少会用到诸如"."."#"."("."["等特殊字符,因为根据W3C规定,HT ...
- jQuery选择器中的空格问题
前几天就遇到过这样的问题,明明我用的是('tr :even').css('background','#ccc')想改变表格中行的背景色,反复试了还是没改变.还问了度娘还是没找到原因所在(当时问题描述的 ...
- JQuery选择器中的一些注意事项
1. 选择器中含有特殊符号的注意事项 1. 1 选择器中含有",","#","("或"]"等特殊字符 根据w3c的规定, ...
- jQuery选择器中空格的问题再探究
jQuery选择器的空格问题,看似很小,但是差之毫厘谬以千里,让人很是恼火,<锋利的jQuery>书中有个经典的例子,我这里也拷贝下来,再加点自己的想法 <html> < ...
- JQuery选择器中含有冒号的ID处理差异的分析
问题提出 对于一个输入框, 如果其id中含有冒号(:),选择器使用需要有特殊写法, 例如 id为下 <input type="text" value="ddd&qu ...
- jquery选择器中的find和空格，children和>的区别、及父节点兄弟节点，还有判断是否存在的写法
一.find和空格,children和>及其它的区别 空格:$('parent childchild')表示获取parent下的所有的childchild节点(所有的子孙). 等效成 = ...
- jquery 选择器中含有空格注意
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery选择器中，通配符[id^='code']input[id$='code'][id*='code']
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&qu ...
随机推荐
- 安卓平台 全面支持软解和硬解的SDK-Demo源代码开放
专业做视频编解码的SDK开发工作. 2015年12月1日10:46:55: 更新到1.5.0版本 功能列表: 基本播放: 1,正常播放, 支持MP4,FLV,AVI,TS,3GP,RMVB,WM,WM ...
- apache 配置静态文件缓存和开启gzip压缩
1,设置文件静态缓存3天: 在httpd.conf 里添加如下代码: #文件静态缓存配置 <IfModule expires_module> #打开缓存 ExpiresActive on ...
- PHP strtotime在linux服务器时间延迟8小时问题
今天客户反映有个功能投票模块第一天投了后,第二天就不能投了,理论上是第二天凌晨就可以再答题的,发现本地是正常的,linux服务器异常, 仔细查找原因发现是strtotime函数获取的值和本地获取的值不 ...
- C# 实现客户端程序自动更新
看到一篇不错的帖子,可能以后会用到,果断收藏 文章来源 博客园jenry(云飞扬)http://www.cnblogs.com/jenry/archive/2006/08/15/477302.html ...
- Metrics-Java版的指标度量工具
介绍 Metrics是一个给JAVA服务的各项指标提供度量工具的包,在JAVA代码中嵌入Metrics代码,可以方便的对业务代码的各个指标进行监控,同时,Metrics能够很好的跟Ganlia.Gra ...
- NGUI中的Tween的委托使用
public TweenPosition tweenIn; public TweenScale tweenOut; EventDelegate In = new EventDelegate(this, ...
- 如何使用Git上传代码到GitHub
1.在Github上面创建Github仓库: 2.下载Github Shell到本地:https://desktop.github.com/ 3.打开Github Shell,输入以下命令生成秘钥来验 ...
- [其他]Jboss容器开启调试模式
1.登陆服务器: 2.找到$JBOSS_HOME/bin/run.conf 3.找到# Sample JPDA settings for remote socket debuging这项,并将说明下方 ...
- WinForm 布局，容器、打印和对话框控件
今天,我主要学习了容器控件.打印控件.对话框控件. 在正式进行今天的内容之前,首先补充了布局的两个属性:Anchor:锁定位置,Dock:填充位置,一般与容器控件配合使用. 之后,我学习了第一部分内容 ...
- Style绑定
目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...