zoukankan      html  css  js  c++  java
  • JQuery 遍历 操作数组 map、grep、filter 的区别


    filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
    例如:
    改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框:
    $("div").css("background", "#c8ebcc")
    .filter(".middle")
    .css("border-color", "red"); 

    注意:filter和find的区别
    例如: $("div").filter(".rain"); 和 $("div").find(".rain");
    find()会在div元素内寻找class为rain 的元素,是对它的子集操作
    filter()则是筛选div的class为rain的元素,是对它自身集合元素筛选


    $.grep() 函数使用指定的函数过滤数组中的元素,并返回过滤后的数组。
    提示:源数组不会受到影响,过滤结果只反映在返回的结果数组中。
    语法
    $.grep( array, function [, invert ] )
    特别注意:Function类型 指定的过滤函数。grep()方法为function提供了两个参数:其一为当前迭代的数组元素,其二是当前迭代元素在数组中的索引。
    例如: 输出 5,8
    $(function () {
    var arr =$.grep( [1,5,8], function(n,i){
    return n > 4;
    });
    $( "p" ).text( arr.join( ", " ) );
    })

    $.grep() 根据条件过滤,所以函数中为bool类型的表达式,而map()  则是返回一个对象或者值;


    map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
    由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。
    $("p").append( $("input").map(function(){
    return $(this).val();
    }).get().join(", ") );


    get() 方法获得由选择器指定的 DOM 元素。 与 ajax - get() 方法 没有关系,两个不相关。
    语法
    $(selector).get(index)
    例如:
    获得第一个 p 元素的名称和值:
    $("button").click(function(){
    x=$("p").get(0);
    $("div").text(x.nodeName + ": " + x.innerHTML);
    });
    或者:
    $("button").click(function(){
    x=$("p").eq(0);
    $("div").text($(x).prop("tagName")+ ": " + $(x).html());
    });

    jQuery中get()和eq(的区别)
    eq返回的是一个jquery对象 get返回的是一个html 对象数组
    返回的是jQuery对象,就可以继续调用其他方法,返回的是html数组就不能调用jQuery的其他方法
    例如:
    $("ul li").get(1).css("color", "red"); //这个是错误的
    $("ul li").eq(1).css("color", "red"); //这个是正确的


    Jquery的获取元素标签名称的方法:
    $( this ).prop("nodeName")

    jQuery DOM 元素方法

    函数描述
    .get() 获得由选择器指定的 DOM 元素。
    .index() 返回指定元素相对于其他指定元素的 index 位置。
    .size() 返回被 jQuery 选择器匹配的元素的数量。
    .toArray() 以数组的形式返回 jQuery 选择器匹配的元素。
  • 相关阅读:
    cmd中删除、添加、修改注册表命令
    修改注册表使win server 2012R2开机进入桌面而不是开始界面
    win8.1/2012R2上面安装flash debugger
    ANT中的copy和move标签
    用maven在MANIFEST.MF文件中的Class-Path中增加当前目录(.)
    通过ANT生成MANIFEST.MF中的Class-Path属性
    Junit4进行参数化测试
    DbUnit入门实战
    oracle查看当前正在使用的数据库
    左偏树 P3377【模板】左偏树(可并堆)
  • 原文地址:https://www.cnblogs.com/dare/p/9176584.html
Copyright © 2011-2022 走看看