关于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 ...
随机推荐
- asp.net 如何引用dll
这要看你引用dll文件是什么文件,是单纯的类库还是外部或自定义控件dll文件. 如果是类库dll文件,引用的步骤是这样的:在解决方案管理器中,选中要添加引用的项目或网站-右击-添加引用-选择要添加的d ...
- JDK各版本新增的主要特性
JDK1.5新特性: 1.自动装箱与拆箱: 2.枚举 3.静态导入,如:import staticjava.lang.System.out 4.可变参数(Varargs) 5.内省(Introspec ...
- Gentoo解决Windows系统txt文本中文乱码问题
Linux与Windows系统语言编码区别 在Linux操作系统下,我们有时打开在windows下的txt文件,发现在windows下能正常显示的txt文件出现了中文乱码. 出现这种情况的原因为两种操 ...
- Tiny6410之按键裸机驱动
操作步骤: 第一步:查看开发板电路原理图 找到LED 和按键的管脚所对应的寄存器 LED:(见Tiny6410之LED裸机驱动) nLED_1 - GPK4 nLED_2 - GPK5 nLED_3 ...
- many bugs report when test bcm bt/wifi chip
after change aerial , many bugs diappear .
- angular localStorage使用方法
var YourCtrl = function($scope, localStorageService, ...) { // To add to local storage localStorageS ...
- openwrt的编译环境
安装centos7 ,以最小的方式安装在 vmware 的虚拟机了.(yum 更新系统就不提了.下面是没有yum更新的情况下的记录和总结) 安装后,发现 ifconfig 命令不好用,得用 ip ad ...
- tablespace
CREATE [UNDO] TABLESPACE tablespace_name [DATAFILE datefile_spec1 [,datefile_spec2] ...... [{MININUM ...
- sqlserver跨数据库与跨服务器使用
sqlserver跨数据库与跨服务器使用 日常数据库编程中经常会遇到需要跨数据库和跨服务器的情况,本文总结解决方法,具体如下: 工具/原料 SQLSERVER 数据库 方法/步骤 跨数据库使用比较 ...
- LR11安装注意事项
一.安装Microsoft Visual c++2005 sp1运行时组件,就会提示命令行选项语法错误,键入“命令/?”可获取帮肋信息 解决方法: 进入LoadRunner11下载\loadrunne ...