获取表单所有属性

获取表单的所有 name、valvue 值 input 必须有 name 属性

<form action="" id="form">
    <input type="text" name="title" value="name">
    <input type="tel"  name="phone">
    <input type="text" name="email">
</form>

<script>
  // 表单的值以数组展示
  var data = $("#form").serializeArray();
  console.log(data);
  // [
  //  { name: "title",  value: "name" },
  //  { name: "phone",  value: "" },
  //  { name: "email",  value: "name" }
  // ]

  //展示表单 name 所对应的 value 值。字符串形式展示。
  var data2 = $("#form").serialize();
  console.log(data2);
  // title=name&phone=&email=
</script>

表单单选属性

获取表单单选选中的值，通过 checked 控制。

<form action="" id="form">
    <input type="radio" name="sex" value="男" title="男">
    <input type="radio" name="sex" value="女" title="女" checked="">
    <input type="radio" name="sex" value="YX" title="YX">
</form>

<script>
    var checkboxFP = $('input[name="sex"]:checked').val();
    console.log(checkboxFP)  // 女
</script>

下拉选择

获取下拉选中的值，通过 find 进行遍历。

<form action="" id="form">
    <select name="quiz3" id="change">
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">拱墅区</option>
    </select>
</form>

<script>
    $('#change').change(function (e){
      // select 的所有属性值
        console.log(e)  
        var check = $('#change').find('option:selected').val()
        // 下拉选中的值
        console.log(check)  
    })
</script>

回车事件

  1. keydown 点击键盘事件
  2. keyup 松开键盘事件
  3. event.keyCode 获取点击键盘的值，回车为13
<script>
    $(document).keydown(function (e) {
        event.keyCode === 13 ? (
          //  回车提交表单
          $('#form').triggerHandler('click')
        ) : (
            console.log('鼠标的其他事件')
        )
    })
    $(document).keyup(function (e) {
        console.log('松开')
    })
</script>