jQuery工具方法

时间  2019-12-12
标签 jquery 工具 方法 栏目 JQuery 繁體版
原文   原文链接

type

  • 参数：
    • target: 目标数据
  • 做用：
    1. 判断目标是类型
console.log($.type('123')); // 执行结果：输出string
    console.log($.type(123)); // 执行结果：输出number
    console.log($.type(true)); // 执行结果：输出boolean
    console.log($.type(function () { })); // 执行结果：输出function
    console.log($.type({})); // 执行结果：输出object
    console.log($.type([])); // 执行结果：输出array
    console.log($.type(undefined)); // 执行结果：输出undefined
    console.log($.type(null)); // 执行结果：输出null
    console.log($.type(new Number())); // 执行结果：输出number
    console.log($.type(NaN)); // 执行结果：输出number
复制代码

trim

  • 参数：
    • target: 目标数据
  • 做用：
    1. 去除目标左右空格
var target = ' 1 2 3 ';
console.log($.trim(target)); // 执行结果：输出 '1 2 3'
复制代码

proxy

  • 参数：
    • function：目标函数
    • target: 目标对象
  • 做用：
    1. 改变目标函数里的this指向目标对象
  • 说明：
    1. 与js原生bind的方法相似
#list {
    width: 100px;
    height: 100px;
    background-color: orange;
  }
复制代码
<div id="list"></div>
复制代码
var list = {
      // 初始化函数
      init: function () {
        this.mes = '123';
        this.dom = document.getElementById('list');
        this.bindEvent();
      },
      // 事件绑定
      bindEvent: function () {
        // 此时的this.show函数里的this为dom
        // this.dom.onClick = this.show;
        // 调用$.proxy改变this
        this.dom.onclick = $.proxy(this.show, this);
      },
      // 显示对话信息
      show: function () {
        console.log(this.producesMes(this.mes));
      },
      // 处理对话信息
      producesMes: function (mes) {
        return mes + '123';
      }
    };

    list.init();
复制代码

noConflict

  • 做用：
    1. 防止冲突
  • 说明：
    1. 经过修改$名称来防止变量名冲突
#list {
    width: 100px;
    height: 100px;
    background-color: orange;
  }
复制代码
<div id="list"></div>
复制代码
var $Z = $.noConflict();
    $Z('#list').css('background', 'red');
复制代码

each

  • 参数：
    • array: 遍历数组
    • function：目标函数：包含index, element
  • 做用：
    1. 遍历数组
    2. 能够遍历数组，对象，伪数组
// 数组
    var arr = [
      { name: 1, age: 18 },
      { name: 2, age: 20 },
    ];
    $.each(arr, function (index, ele) {
      console.log(ele.name, ele.age); // 执行结果：依次输出：1, 18; 2, 20
    });
    
   // 对象
   var obj = {
     a: 1,
     b: 2 
   };
   $.each(obj, function (index, ele) {
     console.log(index, ele); // 执行结果：依次输出：a, 1; b, 2
   });
   
   // 伪数组
   function fn() {
     $.each(arguments, function (index, ele) {
       console.log(index, ele); // 执行结果：依次输出0, 1; 1, 2
     });
   }
   
   fn(1, 2);
复制代码

map

  • 参数：
    • array: 遍历数组
    • function：目标函数：包含element, index
  • 做用：
    1. 遍历操做数组，返回操做后的新数组
    2. 能够遍历数组，对象，伪数组
// 数组
var arr = [1, 2, 3, 4]; 
var newArr = $.map(arr, function (ele, index) {
  return ele ** index;
});
console.log(newArr); // 执行结果：输出1, 2, 9, 64

// 对象
var obj = {
  a: 1,
  b: 2
};
var arr = [1, 2, 3, 4]; 
var newArr = $.map(obj, function (ele, index) {
  return ele * 2;
});
console.log(newArr); // 执行结果：输出2, 4

// 伪数组
function fn() {
  var newArr = $.map(arguments, function (ele, index) {
    return ele ** index;
  });
  console.log(newArr); // 执行结果：输出1, 2, 9, 64
}

fn(1, 2, 3, 4);
复制代码

parseJson

  • 参数：
    • json: json字符串
  • 做用：
    1. 将json字符转换成对象
var jsonStr = '{"name": "zhangl", "age": 18, "gender": "MAN"}';
var jsonObj = $.parseJSON(jsonStr);
console.log(jsonObj); // 执行结果： 输出{name: 'zhangl', age: 18, gender: 'MAN'}
复制代码

makeArray

  • 参数：
    • array：伪数组
  • 做用：
    1. 将伪数组转换为数组
  • 说明：
    1. 当一个参数时，将伪数组转换为数组
    2. 当两个参数时，将前面的值，插入到后面的对象里，至关于合并的做用
// 变数组
function fn() {
  var newArr = $.makeArray(arguments);
  console.log(newArr); // 执行结果：输出[1, 2, 3, 4]
};
fn(1, 2, 3, 4)

// 合并
var obj = {
  a: 1,
  b: 2,
  length: 2
}
var newObj = $.makeArray([1, 2], obj);
console.log(newObj); // 执行结果：输出{2: 1, 3: 2, a: 1, b: 2, length: 4}
var newArr = $.makeArray('a', [1, 2]);
console.log(newArr); // 执行结果：输出[1, 2, "a"]
复制代码

extend

  • 做用：
    1. 插件扩展(工具方法)
    2. 浅层克隆
    3. 深层克隆
  • 说明：
    1. 扩展插件，参数为一个对象
    2. 浅层克隆，参数为多个对象，将后面对象的key-value复制到最前面一个对象中，出现相同的key后面的覆盖前面的
    3. 深层克隆，第一个参数为true，其他参数为对象, 将后面对象的key-value复制到最前面一个对象中，出现相同的key后面的覆盖前面的
// 添加工具方法
$.extend({
  // 获取一个指定范围的随机数
  getRandom: function (start, end) {
    return Math.random() * (end - start) + start;
  }
});
console.log($.getRandom(5, 10)); // 执行结果：输出9.664911117249257

var obj1 = {
  name: '张三',
  age: 18,
  sex: 'MAN'
};

var obj2 = {
  name: '李四',
  age: 19
};

var obj3 = {
  name: '王五',
  age: 20,
  son: { 
    name: '王五的孩子',
    age: 1
  }
};

// 浅克隆
$.extend(obj1, obj2, obj3);
console.log(obj1); // 执行结果：输出name: "王五", age: 20, sex: "MAN", son: {name: "王五的孩子", age: 1}}
obj1.son.name = '张三的孩子';
console.log(obj3.son.name); // 执行结果：输出张三的孩子

// 深克隆
$.extend(true, obj1, obj2, obj3);
console.log(obj1); // 执行结果：输出name: "王五", age: 20, sex: "MAN", son: {name: "王五的孩子", age: 1}}
obj1.son.name = '张三的孩子';
console.log(obj3.son.name); // 执行结果：输出王五的孩子
复制代码

fn.extend

  • 做用：
    1. 插件扩展(实例方法)
    2. 浅层克隆
    3. 深层克隆
  • 说明：
    1. 扩展插件，参数为一个对象
    2. 浅层克隆，参数为多个对象，将后面对象的key-value复制到最前面一个对象中，出现相同的key后面的覆盖前面的
    3. 深层克隆，第一个参数为true，其他参数为对象, 将后面对象的key-value复制到最前面一个对象中，出现相同的key后面的覆盖前面的
<div id="demo" style="width: 100px; height: 100px; background: orange; position: absolute">
</div>
复制代码
// 给jQ实例添加工具方法
$.fn.extend({
   drag: function (e) {
     var disX,
         disY,
         self = this;
     // 绑定鼠标按下事件
     $(this).on('mousedown', function (e) {
       // 计算鼠标点击位置距离方块的左边距离，和顶部距离
       disX = e.pageX - $(this).offset().left;
       disY = e.pageY - $(this).offset().top;

       // 绑定鼠标移动事件
       $(document).on('mousemove', function (e) {
         $(self).css({ left: e.pageX - disX, top: e.pageY - disY });
       });

       // 鼠标松开
       $(document).on('mouseup', function () {
         $(this).off('mousemove').off('mouseup');
       });
     });
     return this;
   }
});

// 调用
$('#demo').drag();

var obj1 = {
  name: '张三',
  age: 18,
  sex: 'MAN'
};

var obj2 = {
  name: '李四',
  age: 19
};

var obj3 = {
  name: '王五',
  age: 20,
  son: { 
    name: '王五的孩子',
    age: 1
  }
};

// 浅克隆
$.fn.extend(obj1, obj2, obj3);
console.log(obj1); // 执行结果：输出name: "王五", age: 20, sex: "MAN", son: {name: "王五的孩子", age: 1}}
obj1.son.name = '张三的孩子';
console.log(obj3.son.name); // 执行结果：输出张三的孩子

// 深克隆
$.fn.extend(true, obj1, obj2, obj3);
console.log(obj1); // 执行结果：输出name: "王五", age: 20, sex: "MAN", son: {name: "王五的孩子", age: 1}}
obj1.son.name = '张三的孩子';
console.log(obj3.son.name); // 执行结果：输出王五的孩子
复制代码

ajax

  • 参数：
    • object: 对象
      • url: 请求资源路径
      • type: 请求方式 'get', 'post'
      • data: 请求参数
      • dataType: 请求参数类型 jsonp
      • async: 是否异步
      • success: 请求成功回调
      • error: 请求失败回调
      • complete: 请求完成回调
      • context: 修改执行上下文对象
  • 做用：
    1. 发送网络请求，接收请求数据
<div class="wrapper"></div>
复制代码
$.ajax({
    url: 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person',
    type: 'GET',
    data: {
        name: 'zhangl'
     },
     success: function (res) {
        // 因为context致使函数做用域this变为.wrapperjQ对象，默认为ajax对象
        console.log(res);
        // 执行结果：输出{code: 0, data: [{name: "王港", src: "./src/img/3.png", des: "颈椎很差", sex: "m"}], msg: "OK"}
        console.log(this); // 执行结果：输出[div.wrapper, prevObject: jQuery.fn.init(1)]
        $.each(res.data, function (index, ele) {
            console.log(ele);
        });
    },
    error: function (e) {
        console.log(e.status, e.statusText);
    },
    complete: function () {
       console.log('请求完成');
    },
    context: $('.wrapper')
});
复制代码

Callbakcs

  • 参数：
    • string: 字符串
  • 做用：
    1. 管理多个回调函数
  • 说明：
    1. 返回一个callback对象，具备add(添加)和fire(执行)两个API
    2. 参数为once只执行一次fire
    3. 参数为memory只要执行过fire，那么后面再add的回调函数，直接执行
    4. 参数为unique，当添加多个相同的回调函数，默认去除重复的回调函数
    5. 参数为stopOnFalse，当碰到返回值为false, 那么后面的回调函数都不会执行
// 无参数
// callback对象
var cb = $.Callbacks();

// 任务1
function firstTask(x, y) {
   console.log('firstTask', x, y);
}
// 任务2
function secondTask(x, y) {
   console.log('secondTask', x, y);
}

// 添加回调函数
cb.add(firstTask, secondTask);
// 执行回调函数
cb.fire(10, 20);
cb.fire(10, 20);
// 执行结果：输出两次 firstTask 10 20; secondTask 10 20

// 任务3
function thirdTask(x, y) {
   console.log('thirdTask', x, y);
}
cb.add(thirdTask);

// 必须再执行一次fire，才会执行任务3
cb.fire(10, 20); 
// 执行结果：输出 firstTask 10 20; secondTask 10 20; thirdTask 10 20

// ----------------------------- //

// 参数为once
var cb = $.Callbacks('once');

// 任务1
function firstTask(x, y) {
   console.log('firstTask', x, y);
}

// 任务2
function secondTask(x, y) {
   console.log('secondTask', x, y);
}

// 添加回调函数
cb.add(firstTask, secondTask);
// 执行回调函数
cb.fire(10, 20); // 执行结果：输出 firstTask 10 20; secondTask 10 20
cb.fire(10, 20); // 不执行

// ----------------------------- //

// 参数为memory
var cb = $.Callbacks('memory');
// 任务1
function firstTask(x, y) {
   console.log('firstTask', x, y);
}

// 任务2
function secondTask(x, y) {
   console.log('secondTask', x, y);
}

// 添加回调函数
cb.add(firstTask, secondTask);
// 执行回调函数
cb.fire(10, 20); // // 执行结果：输出 firstTask 10 20; secondTask 10 20

// 任务3
function thirdTask(x, y) {
   console.log('thirdTask', x, y);
}

// 自动执行fire
cb.add(thirdTask); // 执行结果：输出 firstTask 10 20; secondTask 10 20; thirdTask 10 20

// ----------------------------- //

// 参数为unique
var cb = $.Callbacks('unique');

// 任务1
function firstTask(x, y) {
   console.log('firstTask', x, y);
}

// 任务2
function secondTask(x, y) {
   console.log('secondTask', x, y);
}

// 添加回调函数
cb.add(firstTask, secondTask);
cb.add(firstTask, secondTask);
// 执行回调函数(去除回调对象中重复的回调函数)
cb.fire(10, 20); // 执行结果：输出 firstTask 10 20; secondTask 10 20

// ----------------------------- //

// 参数为stopOnFalse
var cb = $.Callbacks('stopOnFalse');

// 任务1
function firstTask(x, y) {
   console.log('firstTask', x, y);
}

// 任务2
function secondTask(x, y) {
   console.log('secondTask', x, y);
   return false;
}

// 任务3
function thirdTask(x, y) {
   console.log('thirdTask', x, y);
}

// 添加回调函数
cb.add(firstTask, secondTask, thirdTask);
// 执行回调函数(遇到return false，后面的回调函数不执行)
cb.fire(10, 20); // // 执行结果：输出 firstTask 10 20; secondTask 10 20
复制代码

Deferred

  • 做用：
    1. 异步处理事件
    2. ajax回调地狱解决方案
  • 说明：
    1. Deferred对象具有注册事件和执行事件的功能
    2. 注册事件API done：成功状态 fail：失败状态 progress：等待状态
    3. 触发事件API resolve：成功状态; reject：失败状态; notify：等待状态
    4. Deferred对象的promise方法返回只具有注册功能的Deferred对象
    5. 若是触发了resolve或reject，那么其余状态注册的函数不会再执行，若是触发的是notify，会随机触发resolve，reject其中的一个
function getScore() {
  // 获取deferred对象
  var df = $.Deferred();
    setInterval(function () {
      var score = Math.random() * 100;
        if (score > 60) {
          // 触发成功事件 注册API done
          df.resolve(score);
        } else if (score < 50) {
          // 触发失败事件 注册API fail
          df.reject(score);
        } else {
          // 触发等待事件 注册API progress
          df.notify(score)
        }
    }, 1500);
    // 返回df注册功能(防止在函数外触发df注册的事件)
    return df.promise()
}

var df = getScore();

// 注册成功事件
df.done(function (score) {
  console.log('成功', score);
});

// 注册失败事件
df.fail(function (score) {
  console.log('失败', score);
});

// 注册等待事件
df.progress(function (score) {
  console.log('等待', score);
});
复制代码

then

  • 参数
    • function: resolve
    • function: reject
    • function: progress
  • 做用：
    1. 简化Deferred的注册步骤
    2. 便于链式调用, 结构清晰
function getScore() {
    // 获取deferred对象
    var df = $.Deferred();
    setInterval(function () {
        var score = Math.random() * 100;
        if (score > 60) {
            // 触发成功事件 注册API done
            df.resolve(score);
        } else if (score < 50) {
            // 触发失败事件 注册API fail
            df.reject(score);
        } else {
            // 触发等待事件 注册API progress
            df.notify(score)
        }
    }, 1500);
    // 返回df注册功能(防止在函数外触发df注册的事件)
    return df.promise()
}

var df = getScore();

df.then(function (score) { // df对象注册resolve, reject, progress函数
    console.log('成功', score);
    var innerDf = $.Deferred();
    setTimeout(function () {
        innerDf.resolve('成功'); // 触发innerDf对象的resolve
    }, 1000);
    return innerDf.promise(); // 建立innerDf对象，便于后面的链式调用
    }, function (score) {
        console.log('失败', score);
        var innerDf = $.Deferred();
        setTimeout(function () {
            innerDf.reject('失败');
        }, 1000);
        return innerDf.promise();
    }, function (score) {
        console.log('等待', score);
        var innerDf = $.Deferred();
        setTimeout(function () {
            innerDf.progress('等待');
        }, 1000);
        return innerDf.promise();
}).then(function (res) { // innerDf对象注册resolve, reject, progress函数(链式调用)
        console.log('第二次resolve' + res);
    }, function (res) {
        console.log('第二次reject' + res);
    }, function (res) {
        console.log('第二次notify' + res);
});
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程