jq源码解析之绑在$, jQuery上面的方法(实例讲解)

jQuery 是非常强大且实用的 JavaScript 库。在 jQuery 中，它的 API 很多都是绑定在 $ 或者 jQuery 上面的。这些 API 通常是用于操作 DOM 元素，但也实现了很多 JS 常用的功能。

下面我们来详细讲解一下 jQuery 中绑定在 $ 或者 jQuery 上面的方法。

jQuery.fn

在 jQuery 中，$ 和 jQuery 实质上是相等的。它们两个都是一个函数，并且在执行后会返回一个包含了许多方法的对象。这个对象就是 jQuery 的核心，我们称之为 jQuery 对象。

jQuery.fn 是所有 jQuery 对象都共享的原型对象。它包含了大量有用的方法，这些方法可以直接通过 jQuery 对象来调用。

以下是一个简单示例：

$.fn.extend({
  foo: function() {
    console.log('hello, world!')
  }
})

$('div').foo() // 输出 "hello, world!" 

上面的代码演示了如何向 jQuery.fn 上添加一个名为 foo 的方法。在这个例子中，我们添加了一个简单的函数，它可以在调用时输出 "hello, world!" 字符串。

$.extend

另一个向 $ 和 jQuery 对象上添加新方法的方法是通过 $.extend 函数。它有两个参数：目标对象和源对象。目标对象就是需要扩展的对象，源对象就是需要添加的新属性。通过 $.extend 可以很容易地添加新的方法或属性到 jQuery 对象中。

以下是一个案例：

$.extend({
  add: function(a, b) {
    return a + b;
  }
});

console.log($.add(1, 2)); // 输出 3

上述代码中我们通过 $.extend 方法添加了一个简单的方法 add 到 jQuery 对象中。通过调用 $.add，我们可以得到传入的两个参数 a 和 b 的和。

示例演示

下面我们再来看两个实际的应用案例：

实例1：$.ajax

$.ajax 是 jQuery 中一个重要的方法，可以方便地进行异步 HTTP 请求。

  // 发送get请求，并接受反馈
  $.ajax({
    url: '/api/user',
    type: 'GET',
    data: {id: 123456},
    dataType: 'json',
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, status, error) {
      console.log(error);
    }
  });

在上述代码中，我们可以看到，$.ajax 可以接受一个配置对象作为参数。配置对象包含了 url、type、data、success、error 等各种参数选项。通过 $.ajax 可以方便地完成 GET、POST 等请求。

实例2：$.each

$.each 可以用于迭代数组或对象。它可以遍历一个数组或对象的属性，并执行一个回调函数来处理其中的元素。

const arr = [1, 2, 3, 4, 5];

$.each(arr, (index, item) => {
  console.log(index, item);
});
// 输出:
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5

上述代码演示了如何使用 $.each 遍历一个数组，并输出每个元素的索引和值。可以看到，$.each 可以非常方便地迭代数组或对象。

总结

在本文中，我们详细讲解了 jQuery 中绑定在 $ 或者 jQuery 上面的方法。我们介绍了两个方法：jQuery.fn 和 $.extend，以及两个实际应用案例：$.ajax 和$.each。通过对这些方法的理解，我们可以更好地使用 jQuery，轻松完成复杂的任务。