jquery 数组没个数组中有对象如何合并对象集合

转载

bigrobin 2024-12-02 07:12:42

文章标签 jquery jQuery 数组作用域 文章分类 jQuery 前端开发

HTML代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<button>按钮</button>
<div></div>
<div id="test">Click Here!</div>

一、核心

1、jQuery对象访问

//each 遍历
    $("ul>li").each(function (index) {   //index是元素的索引
        console.log(this);   //this指向每一个索引对应的dom对象
    });

    //selector 获取到原始的选择器
    console.log($("ul>li").selector);   //ul>li

    //context  返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
    console.log($("ul>li").context);  //document
    //jQuery对象第二个参数 是前边匹配器的父元素 并且是原生js对象
    console.log($("li", document.body).context);   //body
    console.log($("li", $("ul")[0]).context);   //ul

    //length size() 获取jQuery对象中元素的个数
    console.log($("ul>li").length);  //4
    console.log($("ul>li").size());  //4

    //get 通过索引获取元素
    console.log($("ul>li").get(1));  //与eq()选择器类似

    //index 不加参数，获取当前元素的索引；
    console.log($("ul>li").eq(1).index());   //1
    //如果是集合，默认获取第一个
    console.log($("ul>li").index());   //0
    //参数可以使jQuery对象
    console.log($("ul>li").index($("ul>li").eq(1)));  //1
    //参数也可以是dom对象
    console.log($("ul>li").index($("ul>li").eq(3)[0]));  //3

2、数据缓存

//data() 在元素上存放数据（可以存放任何格式的数据，而不仅仅是字符串,可以是key-value形式的数据）,返回jQuery对象。
    //存放字符串数据
    console.log($("button").data("key-val", "123"));
    //获取存放的数据  参数为存储的数据名
    console.log($("button").data("key-val"));  //123
    //在一个div上存取名/值对数据
    $("div").data("test", { first: 16, last: "pizza!" });
    console.log($("div").data("test").first);  //16;
    console.log($("div").data("test").last);  //pizza!;
    
    //removeData() 在元素上移除存放的数据 参数为存储的数据名
    $("button").removeData("key-val");
    console.log($("button").data("key-val"));  //undefined

3、扩展——插件机制

（1）扩展jQuery对象本身，用来在jQuery命名空间上增加新函数。

$.extend 扩展的方法使用时直接$.

$.extend({
        isNumber: function () {
            console.log("检测是否是数字", this);   //this指向jQuery本身
        },
        isArrayTo: function () {
            console.log("检测是否是数组");
        }
    });
    
    $.isNumber();

（2）扩展jQuery元素集（通常用来制作插件）

$.fn.extend({
        MyMap: function () {
            console.log(this);  //this指向当前的jQuery对象
        }
    });
    $("ul>li").MyMap();

（3）合并对象

var a={
        a:1,
        b:2,
        d:5
    };
    var b={
        a:2,
        b:3,
        c:4
    };
    //原生js的方法合并对象
    console.log(Object.assign({}, a, b));   //{a: 2, b: 3, d: 5, c: 4}
    //jQuery方法合并
    console.log($.extend({}, a, b));   //{a: 2, b: 3, d: 5, c: 4}

二、工具

1、数组和对象操作

$.each() 通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。
回调函数拥有两个参数：第一个为 index，第二个为 value。
如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

//遍历jQuery对象
    $.each($("ul>li"),function(index,val){
        console.log(index,val);
    });
    //遍历数组
    $.each([1,2,3,4],function(index,val){
        console.log(index, val);
    });

$.makeArray() 类数组转化为数组：

console.log($("li"));  //类数组  init(4) [li, li, li, li, prevObject: init(1), context: document, selector: "li"]
    console.log($.makeArray($("li")));  //转化为数组   [li, li, li, li]

map映射:

console.log($.map($("li"), function (ele, index) {
        return ele;
    }));   //[li, li, li, li]

确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。

console.log($.inArray(5, [1, 2, 3]));   //-1
    console.log($.inArray($("li").eq(0)[0], $("li")));   //0

把jQuery集合中所有DOM元素恢复成一个数组。

console.log($("li").toArray());  //[li, li, li, li]

grep() 使用过滤函数过滤数组元素。
第三个参数为false或未设置，则函数返回数组中由过滤函数返回 true 的元素集；第三个参数如果为true，则返回过滤函数中返回 false 的元素集。

console.log($.grep([0, 1, 2], function (n, i) {
        return n > 0;
    }, true));    //[0]

合并数组，去除重复项：

//合并数组
    console.log($.merge([0, 1, 2], [2, 3, 4]));  //[0, 1, 2, 2, 3, 4]
    //去除重复项
    console.log($.unique($.merge([0, 1, 2], [2, 3, 4])));  //[0, 1, 2, 3, 4]

2、函数操作

$.proxy() 改变函数的作用域——this指向。

当有事件处理函数要附加到元素上，但他们的作用域实际是指向另一个对象时，这个方法最有用了。此外，jQuery能够确保即便你绑定的函数是经过$.proxy()处理过的函数，你依然可以传递原先的函数来准确无误地取消绑定。请参考下面的例子。

这个方法有两种用法：
第一种：
$.proxy(function,context) function:将要被改变作用域的函数。
context:一个object，那个函数的作用域会被设置到这个object上来。
第二种：
$.proxy(context,name) context:一个object，那个函数的作用域会被设置到这个object上来。
name：改变上下文中的函数名(这个函数必须是前一个参数 ‘context’ 对象的属性)。

//强制设置函数的作用域，让this指向obj而不是#test对象。
    var obj = {
        name: "John",
        test: function() {
            alert( this.name );
            $("#test").unbind("click", obj.test);
        }
    };

    $("#test").click( jQuery.proxy( obj, "test" ) );   //John

    //以下代码跟上面那句是等价的
    //$("#test").click( jQuery.proxy( obj.test, obj ) );   //John

    //如果不改变作用域
    //$("#test").click( obj.test );    //undefined

3、测试操作

//检测是否是数组
    console.log($.isArray(1));   //false
    
    //检测是否是函数
    function bok(){
        console.log(a);
    }
    console.log($.isFunction(bok));  //true
    
    //检测是否是对象
    console.log($.isEmptyObject({}));   //true
    console.log($.isEmptyObject(obj));  //false
    
    //检测一个DOM节点是否包含另一个DOM节点
    console.log($.contains($("ul")[0], $("ul>li").eq(0)[0]));  //true
    
    //检测数据类型
    console.log($.type("text"));  //string
    
    //测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）
    console.log($.isPlainObject(obj));  //true
    
    //检测是否是数字
    console.log($.isNumeric(1));   //true