操作表单（验证）
表单是什么？DOM树的一个节点
文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏框 hidden
密码框 paseword
.....
表单目的：提交信息
获得要提交的信息
</head>
<body>
<form action="post">
<span>用户名：</span>
<input type="text" id="username">
</form>
<!-- 1.先获取一下页面 -->
<script>
var input_text=document.getElementById('username');
// 得到输入框的值
</script>
</body>
在操作台
input_text.value //输出user的值
'' //值为空（此时未输入）
//如果是多个表单，我们想得到一部分的值,可以利用下标。
document.getElementsByteName('inpit')[2]
我们得到了输入框的值，我们就可以修改输入框的值
input_text.value ='123'
对于单选框，多选框等固定的值，利用.value只会返回当前的值，我们可以用xxx.checked通过他返回的值是true还是false来获得它的结果，同时我们也可以修改结果。
提交表单
button是一个按钮，我们把type设置为button，也可以使它提交,required必填属性
按钮级别提交事件
绑定事件onclick被点击的时候...
<button type="button" οnclick="fff()"></button> </form> <script type="text/javascript"> function fff(){ alert(1)
MD5加密密码，提交表单,表单优化
MD5算法
MD5工具类
https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post" οnsubmit="return fff()">
<p>
<span>用户名：</span><input type="text" name="username" id="username" value="" />
</p>
<p>
<span>密码：</span><input type="password" id="input-possword"name="password">
</p>
<!-- 隐藏密码 -->
<input type="hidden" name="password" id="md5-password" value="" />
<button type="button" οnclick="fff()">提交</button>
</form>
<script type="text/javascript">
function fff(){
var uname=document.getElementById('username');
var pwd=document.getElementById('possword');
var md5pwd=document.getElementById('md5-password')
console.log(uname.value)
pwd.value=md5(pwd.value)
md5pwd.value=md5(pwd.value)
return true;
//可以校验判断表单内容，true就是通过提交，false就是阻止提交
}
</script>
</body>
</html>
如何提高网站安全性？
步骤：获取它的值，在提交时进行拦截加密，修改它的值，验证通过就return ture,不通过就是false.重点是在表单级别的onsubmit,如果是按钮级别的我们也可以绑定按钮的onclick,一般我们都是用onsubmit
表单绑定提交事件
我们可以使它提交时fslse,或者成功提交了以后跳转
我们需要通过onsubmit绑定一个函数（提交检测），获取一个值，ture或者false，我们需要将结果返回给表单，使用onsumbit去接收
jQuery
javascript和jQuery库
网址：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
jQuery库里面存在大量的javascript函数
获取jQuery
封装
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> //引入 <script src="http://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> </head> <body> </body> </html>
或者另一种(已经保存好的)
<script src="jQuery.js" type="text/javascript"></script>
公式
$().action()
第一个括号里面放的是选择器，这个选择器就是css选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery.js" type="text/javascript"></script>
</head>
<body>
<a href=""id="test-jquery">点击</a>
<script>
$('#test-jquery').click(function(){
alert('hello,jiangdaping');
})
</script>
</body>
</html>
js原生选择器
标签选择器：
document.getElementByTagName()
Id选择器
document.getElementById()
类选择器
document.getElementByClassName()
特点：原生的js选择器少，麻烦不好记
对比jQuery(css中的选择器他都可以用，可以在jQuery API中里查看它的所有选择器)
标签选择器：
$('p').click() //标签选择器（p标签）
类选择器
$(.class1).click()
id选择器
$('#id1').click()
事件
鼠标事件，键盘事件，其他事件
鼠标事件
当我们网页元素加载完毕之后，再响应事件
$(document).ready()表示这个网页元素已经加载完了，加载完之后的事件我们就把它放在ready()这个括号里
例如:（大括号里放的是function的执行代码）
$(document).ready(function(){
})
我们默认把上一行代码简化成$(function(){
})
例子：要求：获取鼠标当前的一个坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery.js"></script>
<style>
#divMove{
width:500px;
height:500px;
border:5px solid lightpink;
}
</style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+'y'+e.pageY)
})
});
</script>
</body>
</html>
JQuery操作Dom元素
节点文本操作
一些例子
$('#test-ul').text();修改id为test-ul的文本
$('#test-ul').html();修改id为test-ul的html
如果test-ul下面还有子元素，这个时候是非常不明确的，所以我们可以调整代码
$('#test-ul li[name=python]' ).text();获得值（ul下面li中name为python的值）
$('#test-ul li[name=python]' ).text('设置值');设置值，就是重载
html和以上的text的获得值方法以及修改值方法都是一样的，例如
$('#test-ul').html('<strong>123<strong>');
以上的代码为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">Javascript</li>
<li name="python">Python</li>
</ul>
<script type="text/javascript">
$('test-ul li[name=pathon]').text();
$('#test-ul').html();
</script>
</body>
</html>
css的操作
例如上面的text以及html，改为css就可以了
$('#test-ul').css({'color':'pink','fontSize':'50px'});//若是括号里有多个就用大括号括起来,用括号隔开，用引号表示对应
以上的一些设置样式都可以在jQuery 库里寻找，不用刻意去记
元素的显示和隐藏
例如让上面例子中的python消失，我们以前是在对应元素的style里面加一个display:none这样就可以使它不显示，但是在jQuery里面也有对应的办法
$('#test-ul').shoe() 显示
$('#test-ul').hide() 隐藏
但是他们的本质还是一样的
关于jQuery的方法还有很多，例如$(window).width()来获得它的宽度
多查文档就好了。
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
