基于jQuery实现的文字按钮表单特效整理

标题：基于jQuery实现的文字按钮表单特效整理

介绍：这篇攻略将介绍如何使用jQuery实现一个带有文字按钮的表单，包含焦点状态、错误状态以及提交状态等多种特效。以下是实现步骤：

一、HTML结构和CSS样式的编写

1. 首先，我们需要在HTML中创建一个表单元素，并为其添加id属性，方便后面使用：

<form id="myForm">
  <!-- 表单元素 -->
</form>

1. 在表单中，我们需要添加一些表单元素，例如文本框、下拉列表、单选框、复选框等。这里我们以一个文本框为例：

<div class="form-item">
  <input type="text" id="username" name="username">
  <label for="username">用户名</label>
</div>

注意，我们在文本框周围添加了一个div元素，用于包含label标签。这是为了实现文本框获得焦点时，label标签上移的效果。

1. 在CSS中，我们需要对整个表单进行样式的设置。例如，添加背景色、边框、圆角等：

#myForm {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
}

1. 对于添加了div元素的表单元素，我们需要对其进行样式设置。例如，设置div元素的宽度、高度、边框等：

.form-item {
  position: relative;
  margin-bottom: 20px;
}
.form-item label {
  position: absolute;
  top: 10px;
  left: 15px;
  color: #999;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.2s ease-out;
}
.form-item input {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding-left: 15px;
  font-size: 16px;
}
.form-item input:focus + label, .form-item input:not(:placeholder-shown) + label {
  top: -14px;
  font-size: 12px;
  color: #333;
}

二、jQuery代码的编写

1. 实现焦点状态的特效

当文本框获得焦点时，其对应的label标签应该向上移动一定的高度。我们可以使用jQuery的focus和blur方法来实现：

$('.form-item input').focus(function() {
  $(this).next('label').addClass('active');
}).blur(function() {
  if ($(this).val() == '') {
    $(this).next('label').removeClass('active');
  }
});

在上面的代码中，我们首先获取所有的表单元素，然后使用focus方法和blur方法分别对它们进行设置。

1. 实现错误状态的特效

当表单提交时，如果有表单元素的值为空，则应该在相应的表单元素上添加一个错误状态。我们可以使用jQuery的each方法遍历表单元素来实现：

$('#myForm').submit(function(e) {
  var error = false;
  $('.form-item input').each(function() {
    if (!$(this).val()) {
      $(this).parent('.form-item').addClass('has-error');
      error = true;
    } else {
      $(this).parent('.form-item').removeClass('has-error');
    }
  });
  if (error) {
    e.preventDefault();
  }
});

在上面的代码中，我们使用submit方法对表单进行监听，然后使用each方法遍历所有的表单元素，并判断其是否为空。如果为空，则在其对应的div元素上添加一个has-error类，否则删除该类。

1. 实现提交状态的特效

当表单提交时，我们应该添加一个提交状态，表示正在提交。我们可以使用jQuery的ajax方法实现：

$('#myForm').submit(function(e) {
  e.preventDefault();
  var form = $(this);
  form.addClass('submitting');
  $.ajax({
    url: form.attr('action'),
    method: form.attr('method'),
    data: form.serialize(),
    success: function(response) {
      form.removeClass('submitting');
      alert('提交成功！');
    },
    error: function(response) {
      form.removeClass('submitting');
      alert('提交失败！');
    }
  });
});

在上面的代码中，我们首先使用preventDefault方法阻止表单的默认提交行为。然后，在表单上添加一个submitting类，表示正在提交。接着，使用ajax方法向服务器发送数据，并在请求成功或失败后，删除submitting类，弹出相应的提示信息。

示例说明：

1. 在如上设置中，当文本框获取到焦点时，其对应的label标签会向上移动一定的高度，可以使用下方代码进行测试：

<div class="form-item">
  <input type="text" id="username" name="username" onfocus="this.value=''">
  <label for="username">用户名</label>
</div>

1. 在如上设置中，当表单提交时，如果有表单元素的值为空，则会在相应的表单元素周围添加一个错误状态，可以使用下方代码进行测试：

<input type="text" id="password" name="password" onblur="if(this.value==''){this.placeholder='密码不能为空';this.classList.add('error')}else{this.classList.remove('error')}" placeholder="请输入密码">