jQuery 之表单操作

2019年8月31日 88次阅读 来源: 张文才

一、获取表单 DOM 元素

除了使用 id 和 class 选择器之外，对于表单元素还可通过 type 以及 name 属性选择表单元素，实例：

  • $("input[type='radio']")
  • $("input[type='checkbox']")
  • $("input[name='username']")

二、获取/设置 表单元素的值

（1）文本框、文本域

当表单的值为字符串时，可用 $.trim() 方法去除字符串前后的空格

  • val() 方法不传参数，视为获取 value 值，否则视为设置 value 值
    $("input[type='text']").val()

（2）单选、多选

  • 判断是否选中：
    $("input[type='radio']").is(":checked")
  • 设置选中状态（第二个参数为 false，则取消选中）：
    $("input[type='radio']").prop("checked", true)

三、隐藏域

基本语法：

<input type="hidden" name="field_name" value="value">

特点：

  1. 对于网页访问者来说，隐藏域是不可见的
  2. 表单提交时，隐藏域会将自身的 name 和 value 发送到服务器

用途：

  1. 收集发送数据，可以处理一些特殊的数据，比如用户身份
  2. 只能用于简单的数据储存和传递

四、提交表单

在提交表单时需将表单元素集合的值传递给后台，serialize() 的作用是将选择的表单元素的 vlaue 值序列化为字符串。

实例：

$.ajax({
    url: 'your_url',
    type: 'POST',
    data: $('form').serialize(),
    success: function () {
        // some code
    },
    error: function () {
        // some code
    }
})
    原文作者：张文才
    原文地址: https://segmentfault.com/a/1190000010544998
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞