操作表单(验证)
表单是什么 from DOM树
- 文本框 text
- 下拉框
<Select>
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- ....
表单的目的:提交信息
<form action="post">
<span>用户名</span> <input type="text" id="username">
</form>
<script>
var input_text=document.getElementById('username')
</script>
input_text.value
得到输入框的值input_text.value='xutu'
修改输入框的值
<form action="post">
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var boy_radio=document.getElementById('boy')
var girl_radio=document.getElementById('girl')
</script>
- 对于单选框,多选框无法通过value的方法取到,只能获得当前的值
boy_radio.checked
查看返回的结果,是否为true,如果为true,则被选中boy_radio.checked=true
赋值
提交表单
<form action="#">
<span>用户名</span> <input type="text" id="username">
<p>
<span>密码 </span><input type="password" name="password" id="password"/>
</p>
<button type="submit" onclick="xitu()">提交</button>
</form>
<script>
function xitu(){
var use=document.getElementById('username')
var pas=document.getElementById('password')
console.log(use.value)
console.log(pas.value)
}
</script>
- 绑定事件 onclick 被点击
- 此方法不安全可以使用Md5进行加密
- 表单绑定提交事件,onsubmit绑定一个提交检测的函数,true ,false,将这个结果返回给表单,使用onsubmit接受
jQuery
JavaScript jQuery库,里面存在大量的JavaScript函数
- jQuery是一个快速、简洁的JavaScript]框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件
- 公式 : $(selector).action()