关于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 ...
随机推荐
- 【Android】策略模式封装百度地图路线规划模块
百度地图的Demo里有个路线规划的功能,但是,这个功能和Activity耦合性太高,所以需要单独抽离出路径规划功能,进行"解耦". 注:由于项目原因,本文只针对驾车路线规划进行封装 ...
- linux入侵控制与痕迹清理
后门 (1)开机自动反弹shell (2)linux后门 Rookit 目前常用的有:t0rn /mafix/enyelkm 等 mafix rootkit Mafix是一款常用的轻量应用级别Root ...
- 【5】图解HTTP 笔记
坚持.聪明.不畏困难,我将取得最后的胜利. 第一章 了解 Web 以网络基础 1. HTTP ( HyperText Transfer Protocol ): 超文本传输协议. 2. 通讯方式: 3. ...
- Mysql登录后看不到数据库
进入数据库后,只能看到information_schema/test这两个库,其他的数据库都看不到,这是权限出了问题. 关闭Mysql /usr/local/mysql/support-files/m ...
- 。net定时关闭excel进程
public void Application_Start() { // 在应用程序启动时运行的代码 System.Timers.Timer timer = new System.Timers.Tim ...
- List集合分页显示
package com.mshc.util; import java.util.Arrays; import java.util.Collections; import java.util.List; ...
- dotnet的移除-->安装 升级
之所以要升级dotnet 是因为项目中报了如下错误 意思就是版本低了 为了升级 我先要把之前的移除掉(用脚本移除) #!/usr/bin/env bash # # Copyright (c) .NET ...
- UNICODE与ANSI的区别
什么是ANSI,什么又是UNICODE呢?其实这是两种不同的编码方式标准,ANSI中的字符采用8bit,而UNICODE中的字符采用16bit.(对于字符来说ANSI以单字节存放英文字符,以双字节存放 ...
- [Rails] 从 Request 到 Response（1）
本文翻译自:Rails from Request to Response 系列:个人选择了自己感兴趣的部分进行翻译,需要阅读原文的同学请戳前面的链接. 第一部分 导言(Introduction) 服务 ...
- Layui文件上传样式在ng-dialog不显示的问题处理
1.项目业务改动,在一个弹窗页面加图片上传. 2.页面使用angular框架,图片上传使用layui的文件上传组件. js: layui.upload({ url: '/test/upload.jso ...