jQuery工具方法

最新推荐文章于 2022-04-15 23:48:51 发布
最新推荐文章于 2022-04-15 23:48:51 发布
阅读量162 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：https://juejin.im/post/5ce964545188252a4f229474
版权

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);
});
复制代码
weixin_33671935
关注
jQuery工具方法&css属性及方法
qq_64286752的博客
03-17 1423
jQuery工具方法和CSS属性及方法
jQuery 工具方法 （全）
weixin_46370867的博客
11-06 190
下面是对jQuery中工具方法的整理，希望可以帮助到有需要的小伙伴。 一、类数组对象 １、length属性 length属性 - 获取当前jQuery对象中包含DOM对象的个数 实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
jQuery的工具方法
FairyKunKun的博客
04-15 650
$.trim(); <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/> <title&g
JQuery工具函数汇总
01-19
在jQuery中,工具函数是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的,我们统称为工具函数,或Utilites函数 主要作用于：字符串、数组、对象 API:工具函数 调用格式:  $.函数名()或jQuery.函数名...
jquery工具包
12-30
jquery-1.8.3.min.js+jquery-1.9.1.min.js+jquery-1.11.2.min.js+jquery-1.11.3.min.js+jquery-2.1.3.min.js+jquery-2.1.4.min.js+jquery-3.1.1.min.js+jquery-3.3.1.min.js+
jQuery源码解读之extend()与工具方法、实例方法详解
10-20
它既可以作为jQuery对象的一个实例方法，也可以作为工具方法来使用。 首先，让我们深入理解extend()的基本用法。extend()接收一个或多个对象作为参数，并将这些对象的属性合并到第一个对象中。如果第一个参数是布尔...
JQuery日期插件
03-08
JQuery日期插件，内附完整的使用方式 laydate({ elem: '#xkzqdsj2', format: 'YYYY年MM月DD日', value:"2013年12月02号", festival: true, //显示节日 choose: function(datas){ //选择日期完毕的回调 } });
jQuery工具方法(三）
wq199909的博客
07-18 116
// $.ajax // 参数 obj // 属性 url: 请求地址 https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person // type: 请求方式 // data: {} 参数，信息 // success： 请求成功后的处理函数 // error: 请求失败后的处理函数 // ...
【jquery源码五】jQuery工具方法汇总①。
汪小穆的博客
07-04 620
前言：jQuery的工具方法是jQuery源码中的基石，是构建庞大的jQuery库的根本。这些工具方法也给我们的编程带来了很多便利。 【jquery源码】目录   一、修改$.extend() 【jquery源码三】jQuery是如何创建方法和扩展方法 前面的文章也说到了$.extend()，$.fn.extend()的作用。我们这里进行简易的修改，一样实现扩展方法的效果。 jQue...
jQuery.02.工具、属性
Champion_me的博客
03-17 522
jQuery.02.工具、属性
jquery工具方法整理
Kepler_II的博客
03-11 203
jquery工具方法整理 或许有人说jquery不是过时了吗？怎么还用，但我要告诉你，没有永恒的库或者框架，只有其中的思想是最宝贵的，也可以结合游戏来讲，就是一代版本一代神 jquery工具方法总结 1.下载jquery3.5.1 由于本人是通过yarn进行下载的，如果没有安装yarn，可以参考后面的链接或者用npm包下载,我使用的命令如下: yarn add jquery@3.5.1 [注意，这里的jquery的q千万不能大写，我已经掉几次坑了!!!] 安装详细请参考 : npm学习npm $
jQuery常用工具方法
专注
01-09 562
jQuery.contains() 判断一个DOM元素是否在另一个DOM元素中。 jQuery.contains(container,contained) container 类型是元素。 可能会包含其他元素的DOM元素。 contained 类型是元素。 也许会把其他元素包含的DOM元素。 注意：第一个参数必须是DOM元素，不是jQuery对象或者javascrip
jQuery 之 $工具方法
z_x_Qiang的博客
12-31 272
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;09_$工具方法&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 1. $.each(): 遍历数组或对象中
jquery自定义方法
weixin_34233618的博客
09-09 120
总结： * jQuery中添加自定义或函数方法1,如 $.fn.extend({'aa':function(){}}) 或 jQuery.fn.aa=function(){}, 这种调用时就得这样,$("#**").aa() *jQuery中添加自定义或函数方法2,如$.extend({'aa':function(){}}),这种调用时就是这样$.aa() *jQuery中添加自定义或函数...
jQuery 1.9.1源码解析：常用工具方法详解
了解和熟练运用这些jQuery工具，能够帮助开发者更有效地编写和维护JavaScript代码，尤其是涉及到事件处理、动画和数据操作时。通过深入理解源码，我们可以更好地优化性能，避免潜在问题，并提升开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值