zoukankan html css js c++ java

深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

前面的话

　　上一篇介绍了过滤选择器中的子元素选择器部分，本文开始介绍极易与之混淆的索引选择器

通用形式

$(':eq(index)')

　　$(':eq(index)')选择器选择索引等于index的元素(index从0开始)，返回单个元素

索引

　　[注意]索引选择器的索引和子元素选择器的索引有明显的不同

　　【1】索引选择器索引从0开始，而子元素选择器索引从1开始

　　【2】索引选择器的索引是指定元素的索引，而子元素选择器的索引是所有子元素的索引

<div>
    <i>0</i>
    <span>1</span>
    <i>2</i>
    <span>3</span>
</div>

　　如果要选择<span>1<span>元素，若使用子元素选择器，则设置为

//选择父元素为div元素下的第二个子元素，且该子元素是span元素(索引从1开始)
$('div span:nth-child(2)').css('color','red');

　　若使用索引选择器，则设置为

//选择父元素为div元素下的最先出现的span元素(索引从0开始)
$('div span:eq(0)').css('color','blue');

<button id='btn1'>$('div span:nth-child(2)')</button>
<button id='btn2'>$('div span:eq(0)')</button>
<div>
    <i>0</i>
    <span>1</span>
    <i>2</i>
    <span>3</span>
</div>
<script>
btn1.onclick = function(){
    $('div span:nth-child(2)').css('color','red');
}
btn2.onclick = function(){
    $('div span:eq(0)').css('color','blue');
}
</script>

　　在CSS中，与:nth-child(n)选择器相似的选择器是:nth-of-type(n)，:nth-of-type(n)选择器返回索引等于n的元素(索引从1开始)

　　如果要使用:nth-child(n)选择器选择上述代码中的<span>1<span>元素，则设置为

div span:nth-child(2){color:red;}

　　若使用:nth-of-type(n)选择器，则设置为：

div span:nth-of-type(1){color:blue;}

　　所以CSS选择器:nth-of-type(n)与jQuery中的索引选择器$(':eq(index)')相似，相同的地方是索引是指的指定元素的索引

　　而不同之处有两处

　　【1】CSS选择器:nth-of-type(n)的索引从1开始，而jQuery中的索引选择器$(':eq(index)')的索引从0开始

　　【2】CSS选择器:nth-of-type(n)返回多个元素，而jQuery中的索引选择器$(':eq(index)')返回的是单个元素

$(':eq(0)') 选择第一个索引等于0的元素

$('span:eq(0)') 选择第一个索引等于0的span元素

$('div span:eq(0)') 选择第一个div元素为父元素下索引等于0的span元素

<button id="btn1" style="color: red;">$(':eq(0)')</button>
<button id="btn2" style="color: blue;">$('span:eq(0)')</button>
<button id="btn3" style="color: green;">$('div span:eq(0)')</button>
<button id="reset">还原</button>
<p id="t1">
    <i>1.0</i>
    <span>1.1</span>
</p>
<p  id="t2">
    <span>2.0</span>
    <i>2.1</i>
</p>
<div id="t3">
    <i>3.0</i>
    <span>3.1</span>
</div>
<script>
reset.onclick = function(){history.go();}
//选择第一个索引等于0的元素，结果为<html>。由于字体颜色可以继承，所以所有的子元素的字体颜色都是红色
btn1.onclick = function(){$(':eq(0)').css('color','red');}

//选择第一个索引等于0的span元素，结果为<span>1.1</span>
btn2.onclick = function(){$('span:eq(0)').css('color','blue');}

//选择第一个div元素为父元素下索引等于0的span元素，结果是<span>3.1</span>
btn3.onclick = function(){$('div span:eq(0)').css('color','green');}
</script>

首尾索引元素选择器

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

$(':first')

　　$(':first')选择器选择最先出现的第1个索引元素，返回单个元素　

$(':last')

　　$(':last')选择器选择最后出现的最后1个索引元素，返回单个元素

<button id="btn1" style="color: red;">$('div :first')</button>
<button id="btn2" style="color: blue;">$('div :last')</button>
<button id="btn3" style="color: green;">$('div span:first')</button>
<button id="btn4" style="color: pink;">$('div span:last')</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
btn1.onclick = function(){$('div :first').css('color','red');}

//匹配最后出现的父元素为div元素的最后1个索引元素，结果是3.2
btn2.onclick = function(){$('div :last').css('color','blue');}

//匹配最先出现的父元素为div元素的第1个span索引元素，结果是1.2
btn3.onclick = function(){$('div span:first').css('color','green');}

//匹配最后出现的父元素为div元素的最后1个span索引元素，结果是3.1
btn4.onclick = function(){$('div span:last').css('color','pink');}
</script>

　　首尾索引选择器并不对应于CSS中的:first-of-type和:last-of-type。因为首尾索引选择器只选择单个元素，而CSS选择器会选择多个元素

　　如果要使用javascript实现类似$('div span:last').css('color','pink')的功能

var divs = document.getElementsByTagName('div');
for(var i = divs.length-1; i>-1;i--){
    var spans = divs[i].getElementsByTagName('span');
    if(spans){
        spans[spans.length-1].style.color = 'pink';
        break;
    }    
}

奇偶索引元素选择器

　　除了前面介绍的:eq(index)、:first和:last之外，其他的索引元素选择器返回的都是集合元素。接下来介绍奇偶索引元素选择器

:even

　　:even选取索引是偶数的所有元素，返回集合元素

:odd

　　:odd选取索引是奇数的所有元素，返回集合元素

<button id="btn1" style="color: red;">$('div :even')</button>
<button id="btn2" style="color: blue;">$('div :odd')</button>
<button id="btn3" style="color: green;">$('div span:even')</button>
<button id="btn4" style="color: pink;">$('div span:odd')</button>
<button id="reset">还原</button>
<div>
    <span>0:span0</span>
    <span>1:span1</span>
    <span>2:span2</span>
    <i>3:i0</i>
    <i>4:i1</i>
    <i>5:i2</i>
    <span>6:span3</span>
    <span>7:span4</span>
</div>
<script>
reset.onclick = function(){history.go();}
//匹配父元素为div元素的索引为偶数的元素，结果序号是0、2、4、6
btn1.onclick = function(){$('div :even').css('color','red');}

//匹配父元素为div元素的索引为奇数的元素，结果序号是1、3、5
btn2.onclick = function(){$('div :odd').css('color','blue');}

//匹配父元素为div元素的span元素索引为偶数的元素，结果序号是0、2、7
btn3.onclick = function(){$('div span:even').css('color','green');}

//匹配父元素为div元素的span元素索引为奇数的元素，结果序号是1、6
btn4.onclick = function(){$('div span:odd').css('color','pink');}
</script>

　　子元素过滤选择器中也存在类似的奇偶选择器，分别是:nth-child(even)和:nth-child(odd)。由于它们的索引开始不同，索引表示也不同，所以类似的表示，结果却不同

<button id="btn1" style="color: red;">$('div :nth-child(even)')</button>
<button id="btn2" style="color: blue;">$('div :nth-child(odd)')</button>
<button id="btn3" style="color: green;">$('div span:nth-child(even)')</button>
<button id="btn4" style="color: pink;">$('div span:nth-child(odd)')</button>
<button id="reset">还原</button>
<div>
    <span>0:span0</span>
    <span>1:span1</span>
    <span>2:span2</span>
    <i>3:i0</i>
    <i>4:i1</i>
    <i>5:i2</i>
    <span>6:span3</span>
    <span>7:span4</span>
</div>
<script>
reset.onclick = function(){history.go();}
//匹配父元素为div元素的索引为偶数的元素，因为索引是从1开始的，结果序号是1、3、5、7(对应的索引是2、4、6、8)
btn1.onclick = function(){$('div :nth-child(even)').css('color','red');}

//匹配父元素为div元素的索引为奇数的元素，因为索引是从1开始的，结果序号是0、2、4、6(对应的索引是1、3、5、7)
btn2.onclick = function(){$('div :nth-child(odd)').css('color','blue');}

//匹配父元素为div元素的索引为偶数的元素，且该元素是span元素，结果序号是1、5(对应的索引是2、6)
btn3.onclick = function(){$('div span:nth-child(even)').css('color','green');}

//匹配父元素为div元素的索引为奇数的元素，且该元素是span元素，结果序号是0、2、6(对应的索引是1、3、7)
btn4.onclick = function(){$('div span:nth-child(odd)').css('color','pink');}
</script>

范围索引元素选择器

:lt(index)

　　:lt(index)选择器选取索引小于index的元素，返回集合元素

:gt(index)

　　:gt(index)选择器选取索引大于index的元素，返回集合元素

<button id="btn1" style="color: red;">$('div :lt(4)')</button>
<button id="btn2" style="color: blue;">$('div span:lt(4)')</button>
<button id="btn3" style="color: green;">$('div gt(3)')</button>
<button id="btn4" style="color: pink;">$('div span:gt(3)')</button>
<button id="reset">还原</button>
<div>
    <span>0:span0</span>
    <span>1:span1</span>
    <span>2:span2</span>
    <i>3:i0</i>
    <i>4:i1</i>
    <i>5:i2</i>
    <span>6:span3</span>
    <span>7:span4</span>
</div>
<script>
reset.onclick = function(){history.go();}
//匹配父元素为div元素的索引小于4的元素，结果序号是0、1、2、3
btn1.onclick = function(){$('div :lt(4)').css('color','red');}

//匹配父元素为div元素的span元素的索引小于4的元素，结果序号是0、1、2、6
btn2.onclick = function(){$('div span:lt(4)').css('color','blue');}

//匹配父元素为div元素的索引大于1的元素，结果序号是2、3、4、5、6、7
btn3.onclick = function(){$('div :gt(1)').css('color','green');}

//匹配父元素为div元素的span元素的索引大于1的元素，结果序号是2、6、7
btn4.onclick = function(){$('div span:gt(1)').css('color','pink');}
</script>

最后

　　索引选择器借鉴于CSS的nth-of-type()选择器，但又有变化和拓展之处。变化表现在索引选择器的索引是指的特定元素的索引顺序，且从0开始。拓展表现在新增了范围索引选择器。还有一点值得注意的是:first、:last和:eq()返回的是单个元素，而其他索引选择器返回的是集合元素

　　欢迎交流

查看全文

相关阅读:
easy ui 表单ajax和from两种提交数据方法
 easy ui 下拉级联效果，下拉框绑定数据select控件
 easy ui 下拉框绑定数据select控件
 easy ui 异步上传文件，跨域
 easy ui 菜单和按钮(Menu and Button)
HTTP 错误 404.3
EXTJS4.2 后台管理菜单栏
 HTML 背景图片自适应
 easy ui 表单元素input控件后面加说明（红色）
EXTJS 4.2 添加滚动条

原文地址：https://www.cnblogs.com/xiaohuochai/p/5807292.html