关于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 ...
随机推荐
- UVA11549 计算机谜题（Floyd判圈算法）
#include<iostream> #include<cstdio> #include<cstring> #include<cmath> #inclu ...
- HTML5 <canvas> 基础学习
HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...
- js两种生成对象模式（公有成员和成员私有）
假设有个需求,创建一个book类,有isbn码,书名,作者 :可以对isbn进行数据完整性校验:--js设计模式 <script type="text/javascript" ...
- cookie会话技术
会话技术 B/S请求是无状态无记忆的,脚本与脚本之间是没有联系的,导致不能进行连续的业务逻辑 Cookie技术:将会话数据保存在浏览器端 原理:服务器向浏览器发送指令,用来管理存储在浏览器端的cook ...
- moodle其他搜集
1.将面包屑的符号换成">>",找到皮肤包里的config.php文件,在最后加入 $THEME->rarrow=">>"; ...
- Java中的native关键字与JNI
一.先说一下大致的意思: jdk提供的类库源代码中有一些方法没有实现,这些方法前有native关键字,如object类中的 : native Object clone() throws CloneNo ...
- IOS多线程加锁
注意:加锁位置不同产生结果不同 -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { / ...
- CoreAnimation的使用
一.CABasicAnimation CABasicAnimation *anim = [CABasicAnimation animation]; anim.keyPath = @"posi ...
- C# ExcelHelper
using System; using System.IO; using System.Data; using System.Collections; using System.Data.OleDb; ...
- 关于CSRF的攻击
CSRF攻击的原理: 1.当用户成功登陆网站A时,浏览器纪录本次会话cookie. 2.未退出网站A,点击了恶意网站B上的图片或者其他诱骗信息. 3.恶意网站B上的诱骗信息超链接到了网站A上面,冒充用 ...