jquery函数自定义写法

在编程的世界里，jQuery 就像是一个魔法棒，能让网页元素的控制变得轻松又有趣，就让我们一起来如何用 jQuery 编写自定义函数，让你的网页更加灵动。

我们要明白什么是 jQuery 函数，jQuery 函数就是一段可以重复使用的代码，它可以帮助我们简化复杂的操作，提高代码的可读性和可维护性，想象一下，如果你有一个页面，页面上有多个按钮需要实现相同的功能，这时候，一个自定义的 jQuery 函数就能派上大用场了。

如何编写一个自定义的 jQuery 函数呢？方法非常简单，你只需要使用$.fn 来扩展 jQuery 的原型对象，这样，你就可以为所有的 jQuery 对象添加一个新的方法，你想创建一个函数，当点击一个按钮时，它会改变按钮的背景颜色，你可以这样写：

$.fn.changeColor = function(color) {
  this.css('background-color', color);
  return this;
};

这段代码中，$.fn 是 jQuery 原型的引用，changeColor 是我们自定义的函数名，color 是一个参数，它接收一个颜色值。this.css('background-color', color); 这一行代码是 jQuery 的链式调用，它将当前元素的背景颜色设置为传入的color 值。return this; 确保函数可以链式调用。

你可以在任何 jQuery 选择器后面使用这个changeColor 方法了。

$('#myButton').changeColor('red');

这行代码会将 ID 为myButton 的按钮的背景颜色改为红色。

自定义 jQuery 函数的好处不仅仅是代码复用，它还能让你的代码更加模块化，你可以将相关的功能封装在一个函数中，这样在需要的时候，只需调用这个函数即可，而不需要每次都写一大段重复的代码。

自定义函数还可以接受回调函数作为参数，这样你就可以在函数执行完毕后做一些额外的操作，你可以创建一个显示提示信息的函数：

$.fn.showAlert = function(message, callback) {
  alert(message);
  if (typeof callback === 'function') {
    callback();
  }
};

这个showAlert 函数接受两个参数：message 是要显示的提示信息，callback 是一个可选的回调函数，当提示框显示后，如果提供了回调函数，它将被执行。

使用这个函数，你可以这样做：

$('#myButton').showAlert('Hello, world!', function() {
  console.log('Alert shown!');
});

这段代码会在点击按钮后显示一个提示框，并在提示框显示后在控制台打印 "Alert shown!"。

通过自定义 jQuery 函数，你可以让代码更加简洁、高效，同时也能提升你的编程技能，下次当你在写网页时，不妨尝试编写一些自定义的 jQuery 函数，让你的代码更加强大。