【jQuery】关于选择器中的 :first 、 :first-child 、 :first-of-type
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<meta charset="utf-8">
<script src="./js/jquery-1.11/jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li><p>测试li-11</p></li>
<li><p>测试li-12</p></li>
<li><p>测试li-13</p></li>
</ul>
<hr>
<ul>
<li><p>测试li-21</p></li>
<li><p>测试li-22</p></li>
<li><p>测试li-23</p></li>
</ul>
<hr>
</div>
<hr>
<ul>
<li><p>测试li-31</p></li>
<li><p>测试li-32</p></li>
<li><p>测试li-33</p></li>
</ul>
<script>
$(document).ready(function(){
$("ul li:first").each(function(){
alert($(this).html());
})
})
</script>
</body>
</html>
【:first选择器在几个浏览器下的显示】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<meta charset="utf-8">
<script src="./js/jquery-1.11/jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li><p>测试li-11</p></li>
<li><p>测试li-12</p></li>
<li><p>测试li-13</p></li>
</ul>
<hr>
<ul>
<li><p>测试li-21</p></li>
<li><p>测试li-22</p></li>
<li><p>测试li-23</p></li>
</ul>
<hr>
</div>
<hr>
<ul>
<li><p>测试li-31</p></li>
<li><p>测试li-32</p></li>
<li><p>测试li-33</p></li>
</ul>
<script>
$(document).ready(function(){
$("ul li:firstchild").each(function(){
alert($(this).html());
})
})
</script>
</body>
</html>
【chrome】PS：chrome下好像存在弹窗，我就没法切到另一个窗口，所以只能3个画面截图后拼接了
【IE 11】
【Edge】
【:first-of-type】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<meta charset="utf-8">
<script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li><p>测试li-11</p></li>
<li><p>测试li-12</p></li>
<li><p>测试li-13</p></li>
</ul>
<hr>
<ul>
<li><p>测试li-21</p></li>
<li><p>测试li-22</p></li>
<li><p>测试li-23</p></li>
</ul>
<hr>
</div>
<hr>
<ul>
<li><p>测试li-31</p></li>
<li><p>测试li-32</p></li>
<li><p>测试li-33</p></li>
</ul>
<script>
$(document).ready(function(){
$("ul li:first-of-type").each(function(){
alert($(this).html());
})
})
</script>
</body>
</html>
【总结】
从上面的截图，看出 :first 、 :first-child 、 :first-of-type，这三个选择器，浏览器内核不同，并不会影响jQuery以及显示效果。
另一方面，
【:first】选择器，返回的是单一的node，即节点，是唯一、确定的
【:first-child】选择器，返回的实际是一个node的数组，若是不用each进行遍历，默认返回的是该数组的第一个节点（后来我查看了一下size()的返回值，确实是3，印证了我的想法）
【:first-of-type】选择器，和【:first-child】类似（之所以不用一样，因为只是在这个示例中结果一样，而且两个选择器的作用也 不一样），返回的也是一个node的数组，若是不用each进行遍历，默认返回的是该数组的第一个节点（后来我查看了一下size()的返回值，确实是 3，印证了我的想法）。
【jQuery】关于选择器中的 :first 、 :first-child 、 :first-of-type的更多相关文章
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- jQuery的选择器中的通配符[id^='code'] 【转】
JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...
- 关于jquery的选择器中的空格问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery的选择器中的通配符[id^='code'] 等示例及说明
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- jQuery的选择器中的通配符[id^='code']
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- jquery属性选择器中|value和^value的区别
jquery的属性选择中有两个比较混淆:一个是[attribute^value], 另一个是[attribute|value]. 先看解释: [attribute^value]:选取属性的值以valu ...
- jQuery的选择器中的通配符[id^='code']或[name^='code']
这两天在做一个专题的时候遇到了一个通配符的问题 //弹层操作$(function(){ //视频播放 $("a[href^='#video']").each(function(in ...
- jQuery属性选择器中加变量
$(function () { $('#bkhandle').on('click','#bkdel',function () { $.ajax( { url:"{% url 'bkdel' ...
- 如何将变量id添加到jquery的选择器中
今天在做广州仲裁委员会的系统时这样的一个需求,需要在页面一加载的时候查询各个项目的案件数,这里有很多个项目,一开始我是这样写的: 代码如下: $.get(assignedCaseUrl,functio ...
随机推荐
- jQuery对下拉框Select操作总结
jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...
- php 代码大全
1.子类访问父类静态方法 <?php class A{ static function loadById(){ $class_name = get_called_class(); $model ...
- Cycles_per_instruction
https://en.wikipedia.org/wiki/Cycles_per_instruction
- 套接字I/O模型-完成端口IOCP
“完成端口”模型是迄今为止最为复杂的一种I/O模型.然而,假若一个应用程序同时需要管理为数众多的套接字,那么采用这种模型,往往可以达到最佳的系统性能!但不幸的是,该模型只适用于Windows NT和W ...
- Win7+VS2010环境下CEGUI 0.8.4编译过程详解
转载▼ 1. 在http://cegui.org.uk/download 下载CEGUI源码包 cegui-0.8.4 以及CEGUI依赖库(Windows / Apple OS X only) ...
- InnoDB Double write
记得刚开始看InnoDB文档的时候,Double Write一节(其实只有一小段)就让我很困惑.无奈当时内力太浅,纠缠了很久也没弄明白.时隔几个月,重新来整理一下. 涉及到的概念:Buffer Poo ...
- IIS管理器的快捷方式在哪里?
两种重新创建IIS快捷方式的方法,希望对大家有所帮助 1．首先需要明白它本来就是个快捷方式,所以可以重新创建一个新的快捷方式:右击桌面>>新建>>快捷方式．弹出创建快捷方式向导 ...
- 003. 连接access数据库代码
1. 前端aspx中的代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...
- 动态从数据库中获取数据填充Select
JavaScript代码: $(document).ready(function () { getIntype(); });function getIntype(){ $.ajax({ type:&q ...
- OpenJudge计算概论-校门外的树
/*======================================================================== 校门外的树 总时间限制: 1000ms 内存限制: ...