zoukankan      html  css  js  c++  java
  • 十四、过滤函数筛选对象集合

    页面上经常会创建DOM元素、删除DOM元素。因为jQuery对象是以集合的形式存在的,所以还要执行将DOM对象添加到jQuery对象集合、从jQuery对象集合中删除等操作。jQuery官网将管理jQuery对象集合的函数放在了"Traversing"分类中。Traversing分类下主要包括三个子类:Filtering,Finding,Chaining分别是过滤,查找,链式操作。

    过滤函数的作用是:在已经选定的集合中,将匹配过滤函数的元素保留,将不符合的去除。列表如下:

     

    名称

    说明

    举例

    eq(index)

    返回集合中指定索引index的元素,从0开始计算

    $(“p”).eq(1)

    获取匹配的第二个元素

    filter(expr)

    筛选出与指定表达式匹配的元素集合

    $(“p”).filter(“.selected”)

    保留带有selected类的元素

    filter(fn)

    筛选出与指定函数返回值匹配的元素集合,这个函数内部将对每个对象计算一次(正如’$.each’)。如果调用的函数返回false则这个元素被删除,否则就会被保留

    $(“div”).filter(function(index){return $(“ol”,this).size()=0;});

    保留子元素中不含有ol的元素

    is(expr)

    注意:这个函数返回的不是jQuery包装集而是Boolean

    用一个表达式检查当前选择的元素集合,如果 其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合,或者表达式无效,则返回falsefilter内部实际也是在调用这个函数,所以,filter()函数原有的规则在这里也适用。

    $(“input[type=’checkbox’]”).parent().is(“form”)

    由于input元素的父元素是一个表单元素,所以返回true

    map(callback)

    将一组元素转换成其他数组(不论是否是数组元素)可以用这个函数建立一个列表,不论是值、属性还是css样式,或者其他特别形式,都可以用”$.map()”来方便的建立

    $(“p”).append($(“input”).map(function(){

    return $(this).val();

    }).get().join(“,”));

    form中的每个input元素的值简历一个列表

    not(expr)

    删除与指定表达式匹配的元素

    $(“p”).not($(“#selected”)[0])

    P元素中删除带有selectID元素

    slice()

    选取一个匹配的子集

    $(“p”).slice(0,1);

    选择第一个P元素

    过滤函数要点

    1.eq()函数

    如果index超出了集合则返回一个空集合,而不会返回null。

    2.filter()函数与find()函数

    filter()函数支持选择器表达式和fn()函数两种类型的参数,是最常使用的过滤函数。但是初学者常常分不清filter()函数和后面即将讲到的find()函数。jQuery后台选择器时已经在内部使用过find()函数:

    jQuery("div .className");等同于jQuery("div").find(".className");

    使用filter()和find()都要首先使用选择器获得一个jQuery对象集合。

    filter()函数是作用在集合的每一个对象上,即在"jQuery("div")"选取的集合上过滤,将匹配表达式或者函数的对象保留。

    find()函数是在每一个对象内部查找匹配表达式的子元素,即作用在"jQuery("div")"集合的每个子元素上。

    3.is()函数

    返回的是true或者false。只要jQuery对象集合中有一个元素满足表达式的条件就返回true。比如:$("div").is(".testClass");只要有一个div应用了testClass的样式就返回true。

    4.map()函数

    map()函数会改变jQuery对象集合,比如:

    $("div").map(function(){return this.innerHtml;})

    5.slice()函数

    slice()函数的行为与javascript数组的slice()函数相同。即参数start表示其元素的索引,从0开始。end参数不传入则表示选取从start以后所有的元素。

  • 相关阅读:
    Docker 使用Calico插件配置网络
    Fluentd插件rewrite-tag-filter介绍
    Fluentd Regexp patterns
    gdb 打印数据结构
    g++ -g
    《100-gdb-tips》——查看调用堆栈
    dbghelp.dll 定位异常奔溃信息
    debug skill:烫烫烫屯屯屯
    sizeof()和strlen()的区别
    指针和引用的区别
  • 原文地址:https://www.cnblogs.com/tomkillua/p/2630889.html
Copyright © 2011-2022 走看看