表单和jQuery
一.操作表单
1.表单是什么 From
- 文本框 text
- 下拉框 <select>
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- ......
表单的目的：提交信息到后端处理
2.获得要提交的信息
<form method="post" action="#">
<span>用户名：</span><input type="text" id="username">
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">
<input type="radio" name="sex" value="women" id="girl">
</p>
</form>
<script>
//获得输入框的值
var user = document.getElementById('username');
var boy = document.getElementById('boy');
var girl = document.getElementById('girl');
//修改输入框的值
user.value="123456";
//得到输入框的值 动态抓取 >>user.value
var value=user.value;
//获得单选框的值
boy.value
girl.value
//获得单选框是否被选择 ：false true
boy.checked
girl.checked
//更改要选择的值：
boy.checked = true;
</script>
利用 . value就可以拿到框内的值了
3.提交表单及MD5加密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
<!-- MD5工具类-->
<script type="text/javascript" src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit = 绑定一个提交函数 true（放行） false（拦截）
将这个结果返回值交给表单 ，使用 onsubmit 接收
onsubmit="return fun()"
-->
<form action="https://www.baidu.com" method="post" onsubmit="return fun()">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="password" name="password">
<input type="hidden" id="md5" name="md5">
</p>
<!--绑定鼠标点击事件-->
<button type="submit">提交</button>
</form>
<script>
function fun(){
var name = document.getElementById('username');
var pwd = document.getElementById('password');
var md = document.getElementById('md5');
//MD5算法加密
md.value=md5(pwd.value); // 将加密的密码返回给表单的隐藏域，由隐藏域交给后端
console.log(md.value);
console.log(name.value);
console.log(pwd.value);
return true; //false ：拦截继续转发 true ：继续转发
}
</script>
</body>
</html>
二.jQuery
1.初识jQuery
JavaScript和jQuery的关系：
jQuery封装了很多JavaScript的函数，本质上它们还是由JavaScript代码构成的，只不过jQuery给我们封装了很多的方法供我们使用，简化了我们的开发
jQuery开发文档：jQuery API 中文文档
公式 ：$(selector).action()
获取jQuery：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始jQuery</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<!-- <script type="text/javascript" src="lib/jQuery.js"></script>-->
</head>
<body>
<a href="" id="a1" onclick="fun()">点击</a>
<script>
// 公式 $(选择器).事件(函数)
$('#a1').click(function (){
alert("hello jQuery");
})
//等同于
// function fun(){
// alert("hello jQuery");
// }
</script>
</body>
</html>
2.jQuery选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery选择器</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <script> // 源生的js，选择器少，麻烦不好记 //标签 document.getElementsByTagName(); //id document.getElementById() //类 document.getElementsByClassName() //jQuery css中的选择器它全部能用 $('p').click(); //标签选择器 $('#id').click(); //id选择器 $('.class').click(); //class选择器 //$(selector).action() </script> </body> </html>
选择器公式：$(selector).action()
3.事件
鼠标点击事件，键盘事件，其它事件
当网页元素加载完毕了以后响应事件
$(doucment).ready(function(){
})
可以简写为：
$(function(){
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script src="lib/jQuery.js"></script>
<style type="text/css">
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求：获取当前的一个坐标-->
鼠标位置：<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>
4.操作DOM
$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('javaSE'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<h1>666</h1>'); //设置值
这里是使用jQuery对节点进行文本操作
$('#test-ul li[name=python]').css("color","red"); //更改颜色为红色
对节点进行风格操作jQuery有一个专门的方法.css
它的里面可以实现很多css的美化操作，比如，字体，字体颜色，背景颜色，边框等等操作都是可以的。
元素的显示和隐藏：本质就是display：none
$('#test-ul li[name=python]').show() //展示元素
$('#test-ul li[name=python]').hide() //隐藏元素
