关于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 ...
随机推荐
- unity3d打开对话框
最近一直在忙项目,没时间更新博客,这两天趁空封装windows下的打开对话框,支持多选.其他系统可以用ngui或者ugui封装一个. 这里就不上封装的源码了提供dll供小伙伴们使用,如果有需要源码请请 ...
- flex属性值----弹性盒子布局
里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法: display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...
- @property、@synthesize和dynamic的用法
原文: http://blog.csdn.net/hherima/article/details/8622948 @代表“Objective-C”的标志,证明您正在使用Objective-C语言 O ...
- Android数据库--Sqlcipher的使用（一）
1.下载官方支持包:https://s3.amazonaws.com/sqlcipher/3.2.0/sqlcipher-for-android-community-v3.2.0.zip Github ...
- 可用fidder测试的一些安全测试点
以下是整理的一些常见的安全渗透测试点 1.用工具fidder抓包拦截篡改服务器端返回的代码,导致下级拥有对上级的访问操作权限 以下是公司开发写的用户角色权限页面跳转 修改普通角色跳转的页面为管理员跳转 ...
- B/S和C/S【转载Jane的博客 http://blog.sina.com.cn/liaojane】
什么是C/S和B/S结构? C/S又称Client/Server或客户/服务器模式.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.In ...
- Hibernate之环境搭建
开始之前,我想先理清一个概念,即ORM是什么? ORM介绍 全称:Object/Relation Mapping,即对象/关系映射. ORM也可以理解为一种规范,具体的ORM框架可作为应用程序和数据库 ...
- 批量修改安卓apk包名
1.准备工作 1.1 反编译工具apktool下载 1.2 java, android SDK安装 1.2 python安装 2.反编译现有包 apktool.bat d test.apk 3. 直接 ...
- SQL MySQL
SQL 结构化查询语言(英语:Structural Query Language,缩写:SQL),是一种特殊目的之编程语言,用于数据库中的标准数据查询语言. 各种通行的数据库系统在其实践过程中都对SQ ...
- 类加载class loader
Class装载验证流程: 加载:取得类的二进制流,转为方法区的数据结构,在java堆中生成对应的java.lang.class对象 链接:就是将已经读入到内存的类的二进制数据合并到虚拟机的运行时环境中 ...