深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

前面的话

　　在上一篇中已经介绍过基础选择器和层级选择器，本文开始介绍过滤选择器。过滤选择器是jQuery选择器中最为庞大也是最为出彩的一部分。以CSS结构伪类选择器为基础，jQuery过滤选择器增加了很多扩展功能。本文先从与CSS选择器最相近的子元素过滤选择器开始说起

通用形式

$(':nth-child(index)')

　　$(':nth-child(index)')选择每个父元素的第index个子元素(index从1算起)，返回集合元素

$(':nth-child(1)') 　　　　　　 每个父元素下第1个子元素

　　

$('span:nth-child(1)') 　　　　每个父元素下第1个子元素，且该子元素为span元素

$('div span:nth-child(1)')    每个为div元素的父元素下第1个子元素，且该子元素为span元素

<button id="btn1" style="color: red;">$(':nth-child(1)')</button>

<button id="btn2" style="color: blue;">$('span:nth-child(1)')</button>

<button id="btn3" style="color: green;">$('div span:nth-child(1)')</button>

<button id="reset">还原</button>

<div id="t1">

    <i>1.1</i>

    <span>1.2</span>

</div>

<p  id="t2">

    <span>2.1</span>

    <i>2.2</i>

</p>

<div id="t3">

    <span>3.1</span>

    <i>3.2</i>

</div>

<script src="jquery-3.1.0.js"></script>

<script>

reset.onclick = function(){history.go();}

//匹配每个父元素的第1个子元素，结果是1.1、2.1和3.1

//[注意]实际上，<head>元素作为<html>元素的第1个子元素，也被设置为color:red

btn1.onclick = function(){$(':nth-child(1)').css('color','red');}

//匹配每个父元素的第1个子元素，且该子元素是span元素，结果是2.1和3.1

btn2.onclick = function(){$('span:nth-child(1)').css('color','blue');}

//匹配每个div元素为父元素的第1个子元素，且该子元素是span元素，结果是3.1

btn3.onclick = function(){$('div span:nth-child(1)').css('color','green');}

</script>

　　对应于CSS的结构伪类选择器nth-child(n)

　　nth-child(n)选择器用于选择每个父元素下的第n个子元素(n从1开始)

　　如果要完成同样的上面三个功能，选择器格式分别为：

:nth-child(1){color:red;}

span:nth-child(1){color:blue;}

div span:nth-child(1){color:green;}

　　如果上面的第三个功能要使用javascript实现，则表现如下：

var divs = document.getElementsByTagName('div');

for(var i = 0; i < divs.length; i++){

    var firstChild = divs[i].firstElementChild;

        if(firstChild.nodeName == 'SPAN'){

            firstChild.style.color = 'green';

        }

}

参数

　　当然$(':nth-child(index)')选择器作为通用的子元素过滤选择器，可以有多种参数选择

　　【1】$(':nth-child(even)') 选取每个父元素下的索引值为偶数的元素

　　【2】$(':nth-child(odd)') 选取每个父元素下的索引值为奇数的元素

　　【3】$(':nth-child(3n+1)') 选取每个父元素下的索引值为(3n+1)的元素

<button id="btn1" style="color: red;">$(':nth-child(even)')</button>

<button id="btn2" style="color: blue;">$(':nth-child(odd)')</button>

<button id="btn3" style="color: green;">$(':nth-child(3n+1)')</button>

<button id="reset">还原</button>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ul>

<script src="jquery-3.1.0.js"></script>

<script>

reset.onclick = function(){history.go();}

//匹配每个父元素为ul的偶数个元素，结果是2、4

btn1.onclick = function(){$('ul :nth-child(even)').css('color','red');}

//匹配每个父元素为ul的奇数个元素，结果是1、3、5

btn2.onclick = function(){$('ul :nth-child(odd)').css('color','blue');}

//匹配每个父元素为ul的(3n+1)个元素，结果是1、4

btn3.onclick = function(){$('ul :nth-child(3n+1)').css('color','green');}

</script>

反向形式

$(':nth-last-child(index)')

　　$(':nth-last-child(index)')选择器选择每个父元素的反向第index个子元素(index从最后一个元素计数到第一个元素为止)，返回集合元素

<button id="btn1" style="color: red;">$(':nth-last-child(even)')</button>

<button id="btn2" style="color: blue;">$(':nth-last-child(odd)')</button>

<button id="btn3" style="color: green;">$(':nth-last-child(3n+1)')</button>

<button id="reset">还原</button>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>

<script src="jquery-3.1.0.js"></script>

<script>

reset.onclick = function(){history.go();}

//匹配每个父元素为ul的偶数个元素(从后往前数)，所以结果为5(倒数第2个)、3(倒数第4个)、1(倒数第6个)

btn1.onclick = function(){$('ul :nth-last-child(even)').css('color','red');}

//匹配每个父元素为ul的奇数个元素(从后往前数)，所以结果为6(倒数第1个)、4(倒数第3个)、2(倒数第5个)

btn2.onclick = function(){$('ul :nth-last-child(odd)').css('color','blue');}

//匹配每个父元素为ul的反向的(3n+1)个元素，即1、4，所以结果是6(倒数第1个)、3(倒数第4个)

btn3.onclick = function(){$('ul :nth-last-child(3n+1)').css('color','green');}

</script>

首尾子元素

　　为了方便，jQuery还定义了第一个子元素和最后一个子元素的获取方式

$(':first-child')

　　:first-child选择器是:nth-child(1)选择器的简写形式，选取每个父元素的第1个子元素

$(':last-child')

　　类似地，$(':last-child')选择器选取每个父元素的最后1个子元素

<button id="btn1" style="color: red;">$('div :first-child')</button>

<button id="btn2" style="color: blue;">$('div :last-child')</button>

<button id="btn3" style="color: green;">$('div span:first-child')</button>

<button id="btn4" style="color: pink;">$('div span:last-child')</button>

<button id="reset">还原</button>

<div id="t1">

    <i>1.1</i>

    <span>1.2</span>

</div>

<p  id="t2">

    <span>2.1</span>

    <i>2.2</i>

</p>

<div id="t3">

    <span>3.1</span>

    <i>3.2</i>

</div>

<script src="jquery-3.1.0.js"></script>

<script>

reset.onclick = function(){history.go();}

//匹配每个div元素为父元素的第1个子元素，结果是1.1和3.1

btn1.onclick = function(){$('div :first-child').css('color','red');}

//匹配每个div元素为父元素的最后1个子元素，结果是1.2和3.2

btn2.onclick = function(){$('div :last-child').css('color','blue');}

//匹配每个div元素为父元素的第1个子元素，且该子元素是span元素，结果是3.1

btn3.onclick = function(){$('div span:first-child').css('color','green');}

//匹配每个div元素为父元素的最后1个子元素，且该子元素是span元素，结果是1.2

btn4.onclick = function(){$('div span:last-child').css('color','pink');}

</script>

　　首尾子元素选择器分别对应于CSS中的:first-child和:last-child

　　如果要完成同样的功能，选择器格式分别为：

div :first-child{color:red;}

div :last-child{color:blue;}

div span:first-child{color:green;}

div span:last-child{color:pink;}

　　如果使用javascript选择器要完成上面的最后一个功能，则如下所示

var divs = document.getElementsByTagName('div');

for(var i = 0; i < divs.length; i++){

    var lastChild = divs[i].lastElementChild;

        if(lastChild.nodeName == 'SPAN'){

            lastChild.style.color = 'pink';

        }

}

唯一子元素

$(':only-child')

　　$(':only-child')选择器的匹配规则为：如果某个元素是它父元素中的唯一的子元素，才会被匹配

$('div span:only-child').css('color','green');

　　对应于CSS的:only-child选择器

div span:only-child{color:green;}

　　如果使用javascript实现，则如下所示

var divs = document.getElementsByTagName('div');

for(var i = 0; i < divs.length; i++){

    var children = divs[i].children;

    if(children.length == 1 && children[0].nodeName == 'SPAN'){

        children[0].style.color = 'green';

    }

}

<button id="btn1" style="color: green;">$('div span:only-child')</button>

<button id="reset">还原</button>

<div>

    <span>1.1</span>

</div>

<div>

    <span>2.1</span>

    <i>2.2</i>

</div>

<script src="jquery-3.1.0.js"></script>

<script>

reset.onclick = function(){history.go();}

//虽然第2个div中只存在一个<span>元素，但由于它并不是唯一的子元素，所以无法被匹配

btn1.onclick = function(){$('div span:only-child').css('color','green');}

</script>

最后

　　在CSS结构伪类选择器中，nth-child(n)和nth-of-type(n)选择器经常容易混淆，需要小心区分才能避免出错。类似地，在jQuery过滤选择器中，子元素选择器和索引选择器也是非常相近，容易混淆。在选择器系列下一篇中，将类比于本文的子元素选择器，详细介绍索引选择器

　　欢迎交流

深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器的更多相关文章

jQuery选择器之子元素选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器
× 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引前面的话上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器通用形式 $(':eq(index) ...
css3类选择器之结合元素选择器和多类选择器
css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...
深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素前面的话本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性前面的话属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
× 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态前面的话过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器焦点状态 :focus :focus选择器选择当 ...
深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器
× 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话本文介绍过滤选择器中的内容选择器.内容选择器的过 ...
jQuery选择器之子元素过滤选择器Demo
测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
jquery选择器之子元素
HTML代码: :first-child 匹配第一个子元素,每个父元素的第一个子元素 :last-child 匹配最后一个子元素,每个父元素的最后一个子元素 <!DOCTYPE html> ...

随机推荐

CI框架多个表前缀，如何使用框架语句querybuilder
最近用CI框架遇到一个问题.2个前提条件: 1.数据库设计不规范,有的有表前缀(如:ck_table1),有的没有(如:table2)或者表前缀不一样: 2.数据库操作又想使用数据库操作语句query ...
JVM调优-Jva中基本垃圾回收算法
从不同的的角度去划分垃圾回收算法. 按照基本回收策略分引用计数(Reference Counting) 比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数.垃圾回 ...
第四章 Js的面向对象的初窥视(天生的哈希表)
对象就有键值对 var speaker = { text: "Hello World", say: function(){ console.log("Hello Worl ...
paper 24 ：matlab的cat函数
cat:用来联结数组用法:C = cat(dim, A, B) 按dim来联结A和B两个数组. C = cat(dim, A1, A2, A3, ...) 按dim联结所有输入的数 ...
Codeblocks 添加库（undefined reference 错误的处理）
静态库 (扩展名为 .a 或 .lib) 是包含函数的文件,用于在link阶段整合执行程序,动态链接库(扩展名 .dll)是不在link阶段整合进执行程序中的. DLL文件在执行阶段动态调用下面 ...
windows下安装Django
因为Django本身是由Python编写,所以先要安装Python.下载地址(可以根据读者当前版本自行下载):http://www.python.org/download/releases/3.3.4 ...
Mybatis学习（6）动态加载、一二级缓存
一.动态加载: resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: 如 ...
回文词&lowbar;KEY
回文词 (palin.pas/c/cpp) [问题描述] 回文词是一种对称的字符串--也就是说,一个回文词,从左到右读和从右到左读得的结果是一样的.任意给定一个字符串,通过插入若干字符,都可以变成一个 ...
在c&num;中利用keep-alive处理socket网络异常断开的方法
本文摘自 http://www.z6688.com/info/57987-1.htm 最近我负责一个IM项目的开发,服务端和客户端采用TCP协议连接.服务端采用C#开发,客户端采用Delphi开发.在 ...
HTTP 请求头 WIKI 地址
https://en.wikipedia.org/wiki/List_of_HTTP_header_fields