jQuery 自定义函数写法分享

请听我仔细讲解。

jQuery 自定义函数介绍

在 jQuery 中，我们可以通过扩展 jQuery 的原型对象来添加自定义的函数，从而实现自己的业务逻辑，这种方式被称为 jQuery 自定义函数。使用 jQuery 自定义函数可以让代码更加模块化，易于维护和扩展。

jQuery 自定义函数的基本格式

一个典型的 jQuery 自定义函数的基本格式如下：

$.fn.extend({
    myFunc: function(options) {
        var defaults = {
            // 默认参数
        };
        var settings = $.extend({}, defaults, options);
        // 函数内容
        return this.each(function() {
            // 实现具体的逻辑
        });
    }
});

其中，myFunc 是自定义函数的名称，options 是传递给函数的参数，$.extend() 方法用于合并默认参数和传递参数，this 表示当前匹配的 jQuery 对象，.each() 方法用于遍历匹配的元素并实现具体的逻辑。

jQuery 自定义函数的示例

下面通过两个示例来介绍 jQuery 自定义函数的应用。

示例 1：滑动菜单

$.fn.extend({
  slideMenu: function() {
    return this.each(function() {
      var $menu = $(this);
      $menu.find('li:has(ul)').addClass('has-submenu').prepend('<span class="trigger"></span>');
      $menu.find('.trigger').click(function() {
        $(this).toggleClass('active');
        $(this).next().slideToggle();
      });
    });
  }
});

上面的代码是一个简单的滑动菜单的实现。我们首先为含有子菜单的菜单项添加 has-submenu 类，并在其前面添加一个 trigger 元素作为展开/折叠按钮。然后，当用户点击 trigger 元素时，我们将其和下一个元素的显示状态进行逆转。

通过在 HTML 中引入该自定义函数，我们可以很方便地实现选择器 $menu 的滑动菜单效果：

<ul class="menu">
  <li><a href="#">主页</a></li>
  <li>
    <a href="#">产品</a>
    <ul>
      <li><a href="#">产品 A</a></li>
      <li><a href="#">产品 B</a></li>
      <li><a href="#">产品 C</a></li>
    </ul>
  </li>
  <li><a href="#">关于我们</a></li>
</ul>

<script>
$(document).ready(function() {
  $('.menu').slideMenu();
});
</script>

示例 2：验证表单

$.fn.extend({
  validateForm: function(options) {
    var defaults = {
      required: '必填字段不能为空',
      email: '请输入正确的邮箱地址',
      phone: '请输入正确的手机号码'
    };
    var settings = $.extend({}, defaults, options);

    return this.each(function() {
      var $form = $(this);

      $form.submit(function(event) {
        var valid = true;

        $form.find('input[required]').each(function() {
          var val = $(this).val();
          if (val === '') {
            showError($(this), settings.required);
            valid = false;
          }
        });

        $form.find('input[type="email"]').each(function() {
          var val = $(this).val();
          var re = /\S+@\S+\.\S+/;
          if (val && !re.test(val)) {
            showError($(this), settings.email);
            valid = false;
          }
        });

        $form.find('input[type="tel"]').each(function() {
          var val = $(this).val();
          var re = /^1\d{10}$/;
          if (val && !re.test(val)) {
            showError($(this), settings.phone);
            valid = false;
          }
        });

        if (valid) {
          $form.find('.error-msg').hide();
          return true;
        } else {
          event.preventDefault();
        }
      });

      function showError($input, msg) {
        var $errorMsg = $input.next('.error-msg');
        if ($errorMsg.length === 0) {
          $errorMsg = $('<span class="error-msg"></span>').insertAfter($input);
        }
        $errorMsg.text(msg).show();
      }
    });
  }
});

上面的代码是一个表单验证的实现。我们首先定义了三种默认的验证错误信息，然后遍历表单中的所有必填输入框、邮箱输入框、手机号码输入框，分别检查其格式是否正确。如果有任意一个输入框验证失败，则显示相应的错误信息并阻止表单提交。

通过在 HTML 中引入该自定义函数，我们可以很方便地对指定的表单元素进行验证：

<form id="myForm">
  <div>
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" required>
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email">
  </div>
  <div>
    <label for="phone">电话：</label>
    <input type="tel" name="phone" id="phone">
  </div>
  <button type="submit">提交</button>
</form>

<script>
$(document).ready(function() {
  $('#myForm').validateForm();
});
</script>