热门关键字:
jquery > jquery教程 > jquery教程 > jQuery技巧$()包装集内元素的改变

jQuery技巧$()包装集内元素的改变

311
作者:管理员
发布时间:2021/1/27 15:57:48
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3517
JQuery包装集内的元素在一开始的扩展后,还可以通过一系列JQuery提供的方法对包装集内的元素进行扩展,修改,筛选,删除
find()方法VS filter()方法
这两个方法是比较容易搞混的。


filter方法表示的是对内部内部元素进行筛选,这个接受两个参数,一个返回布尔的函数,或者是JQuery的选择表达式,包装集内部的元素只会小于等于当前包装集内部的元素,并且包含的元素属于原来包装集内元素的子集:


<div id =“ one”>一个</ div>
<div id =“ two”> <p>两个</ p> </ div>
<div id =“ three”> <p>三个</ p> </ div>
<script type =“ text / javascript”>
    alert($(“ div”)。filter(“:not(:first):not(:last)”)。html()); //输出<p>两个</ p>
    alert($(“ div”)。filter(function(){return this.id ==“ two”;})。html()); //也输出<p>这两个</ p>
    
</ script>
而find方法却是在当前元素内(子元素)部进行查找,并返回新的包装集,这意味着包装集可能会增加:


<div id =“ one”>一个</ div>
<div id =“ two”> <p>两个</ p> <p> </ p> <p> </ p> </ div>
<div id =“ three”> <p>三个</ p> </ div>
<script type =“ text / javascript”>
    alert($(“ div”)。find(“ p”)。text()); //提醒“ thetwotheThree”
    alert($(“ div”)。find(“ p”)。length); //警告4而不是原始3
</ script>
从上面可以抛光新包装集内的元素增加了


 


父母()方法VS最接近()方法
这两个方法都是由当前元素向上查找所匹配的元素,不同之处如下:


<div id =“ wrapper”>
    <div id =“ two”>
        <p id =“ p1”>
            两个</ p>
    </ div>
</ div>
<script type =“ text / javascript”>
    alert($(“#p1”)。parents(“ div”)。length); //警报2包括<div id =“ two”>和<div id =“ wrapper”>
    alert($(“#p1”)。closest(“ div”)。length); //警报1,仅包含<div id =“ two”>
    alert($(“#p1”)。parents(“ p”)。length); //警告0,因为它不包含当前元素
    alert($(“#p1”)。closest(“ p”)。length); //警告1,因为它包含自身<p id =“ p1”>
</ script>
对于父母方法来说,允许内部元素向上的所有匹配元素加入新的包装集并返回,而最邻近的方法只会包含离当前元素最近的元素,因此使用最邻近的方法后当前包装集内的元素只能为1个或者0个


而父母方法并不包括当前包装集内的元素,而最近方法会包含当前包装集内的元素


直系子元素VS所有子元素
使用children可以返回直系子元素,而使用find加通配配符的方法可以返回除了文本之上之外的所有子元素:


 <div id =“ wrapper”>
    这里的文本节点
    <div id =“ two”>
        <p id =“ p1”>
            两个</ p>
    </ div>
</ div>
<script type =“ text / javascript”>
    alert($(“#wrapper”)。children()。length); //警报1,因为仅包括直接子项
    alert($(“#wrapper”)。find(“ *”)。length); //警报2,因为包括所有后裔
    alert($(“#wrapper”)。find(“> *”)。length); //警告1,因为仅包括直接子级
</ script>
可以修剪儿童的方法只会包含内部元素的直系子元素,而使用find(“> *也会产生同样的效果”)。若想采用所有的直系子元素直接在find内传“ *”通配符


回到过去的end()方法以及andself()方法
上述所有的方法,以及某些add(),next(),nextAll(),prev()等对包装集内元素进行更改的方法都可以使用end()方法来进行返回:


 <div id =“ wrapper”>
    这里的文本节点
    <div id =“ two”>
        <p id =“ p1”>
            两个</ p>
    </ div>
    </ div>
<script type =“ text / javascript”>
    alert($(“#wrapper”)。find(“> *”)。end()。get(0).id); //由于使用了end()方法,因此警告了“包装器”而不是“两个”
</ script>
end()方法总是和最近的一个和包装集更改的方法相替换,而替代其他方法:


 <div id =“ wrapper”>
    这里的文本节点
    <div id =“ two”>
        <p id =“ p1”>
            两个</ p>
    </ div>
    </ div>
<script type =“ text / javascript”>
    alert($(“#wrapper”)。find(“#p1”)。html(“ new value”)。end()。get(0).id); //由于结束方法,导致了警告包装器
    alert($(“#p1”)。text())//警告新值,因为之前的html方法尚未取消
</ script>
如果需要在改变包装集内元素的情况下还需要包含原始的包装集内元素,使用和自己的方法:


<div id =“ wrapper”>
    这里的文本节点
    <div id =“ two”>
        <p id =“ p1”>
            两个</ p>
    </ div>
    </ div>
<script type =“ text / javascript”>
    var $ a = $(“#wrapper”)。find(“#two”)。andSelf();
    alert($ a [0] .id); //先警告两个
    alert($ a [1] .id); //之后的警告包装器
</ script>
我们会发现第一警报二,因为两个先被选择。






如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jQuery
友荐云推荐