主页 > 专题教程 > javascript > jquery >
来源:自学PHP网 时间:2018-02-08 10:13 作者: 阅读:次
[导读] jQuery的包装集是一个非常重要的概念。包装集是指通过$("exp")筛选出页面的一组满足表达式的元素,这一组元素就属于jQuery包装集中的元素。...
|
jQuery的包装集是一个非常重要的概念。包装集是指通过 研究jQuery包装集的一个重点是了解每一个包装集命令会返回什么结果,是返回原包装集还是返回新的包装集。关于这方面的描述将贯穿本文。 jQuery的包装集和数组非常相似,可以使用
例如我们想知道一个表格中的
$("#table tr").size();
jQuery允许把包装集当做数组来使用,所以我们可以通过下标来获取包装集中的某个元素。另外,jQuery专门有一个
例如要获取一个表格下标为2的
$($("#table tr").get(2))
注意,通过 如果需要知道某个元素在包装集中的位置,可以使用
当我们得到了一个包装集之后,如果想往这个包装集中再添加元素,可以使用
例如,如果有一个表格,我们在选择了表格的第一个
$("#table tr td:first").add("#table tr td:last").addClass('success');
下图是一个返回结果的截图效果:
在确定了一个包装集之后,如果想将这个包装集中的某些元素取消掉,可以使用
例如,一个包装集为表格中的所有
$("#table tr td").not("#table tr td:nth-child(2n)").addClass('success');
得到的效果如下图所示:
jQuery的
如果希望获取包装集中的某个子集,可以使用jQuery提供的
例如想要在一个表格的所有
$("#table tr").slice(1,3).addClass('success');
得到的效果如下图所示:
jQuery允许我们根据DOM中包装元素与其它元素的层次关系,从现有包装集中获取新包装集。 根据关系来获取新包装集的方法有以下几个,这些方法都会返回新的包装集。
再次说明,上面的一组方法都会返回新的包装集。理解这些方法最好的办法就是自己动手写代码来进行测试。自己动手写一下代码测试一下这些方法吧!
如何理解上面的第2点呢?例如有一个表格,我们通过
$("#table").find("tr:eq(1)").addClass('success'); // 正确
$("#table").filter("tr:eq(1)").addClass('success'); // 错误
形象一点的比喻,调用
除了上面介绍的方法之外,还有一个 我们在上面的包装集介绍过程中,不断的提及每一个方法会返回什么包装集,是原有包装集还是新的包装集。这实际上是在为介绍jQuery的链式编程做准备。 jQuery的链式编程能力不但允许以简洁的方式写出强大的操作,而且提高了效率,因为它能够把多个命令应用到包装集中,而不必重新计算包装集。 在使用jQuery编写链式命令时,有两个重要的方法:
来看下面的一个例子,这个例子中对一个表格进行 这个例子使用的HTML代码如下:
<div id="table1" class="table-responsive">
<table id="table-2" class="table table-bordered table-striped">
<thead>
<tr>
<td>#</td>
<td>名字</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张晓亮</td>
<td>男</td>
<td>26</td>
</tr>
.......
</tbody>
</table>
</div>
<div id="table2" class="table-responsive">
<table id="table-2" class="table table-bordered table-striped">
<thead>
<tr>
<td>#</td>
<td>名字</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
</table>
</div>
现在得到的效果如下图所示:
接下来我们使用复制命令,将表格1的内容复制给表格2。
$("#table-1 tbody").clone().appendTo("#table-2");
现在我们得到了2个表格。由于
$("#table-1 tbody").clone().appendTo("#table-2")
.find("tr:nth-child(even)")
.addClass("success");
结果如下图所示,注意上面使用的是
如果想在执行
$("#table-1 tbody").clone().appendTo("#table-2")
.end().end().find("tr:nth-child(even)")
.addClass("success");
上面的小例子展示了 对于
$("#table-1 tbody").clone().appendTo("#table-2")
.end().andSelf().find("tr:nth-child(even)")
.addClass("success");
第一个 这篇文章中介绍了jQuery包装集的内容。理解jQuery的包装集是使用jQuery的基础。研究包装集一定要弄明白各个包装集方法会返回什么结果,我们总结如下: 返回原包装集的方法有:
返回新包装集的方法有:
要清楚的明白每一个方法会返回什么包装集,这样在我们进行链式编程的时候才会得心应手,不会出现莫名其妙的错误。
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com