标签：修改 aaa pos style 信息 imp back download order
表单的目的：提交信息
<form action="post">
<p>
<span>用户名：</span><input type="text" id="username">
</p>
<!--多选框的值就是定义好的value-->
<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 input_text = document.getElementById(‘username‘);
//得到输入框的值
input_text.value;
//修改输入框的值
input_text.value=‘123‘;
var boy_radio = document.getElementById(‘boy‘);
var girl_radio = document.getElementById(‘girl‘);
//对于单选框和复选框等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中
girl_radio.checked=true;//赋值
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--onsubmit 也是一个函数，需要return
onsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="pwd">
<input type="hidden" id="md5-pwd" name="password">
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
<script>
function aaa(){
var username = document.getElementById(‘username‘);
var pwd = document.getElementById(‘pwd‘);
var md5_pwd = document.getElementById(‘md5-pwd‘);
md5_pwd.value = md5(pwd.value);
//可以校验表单内容，true就通过提交，false，阻止提交
return true;
}
</script>
</body>
</html>
JavaScript
jQuery库，里面存在大量的JavaScript函数
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>-->
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test-jQuery">点我</a>
<script>
//js原生
// var test_jQuery = document.getElementById(‘test-jQuery‘);
// test_jQuery.click(function (){
//
// })
//jQuery：write less do more
//公式：$(selector).action()
//selector就是css的选择器
$(‘#test-jQuery‘).click(function (){
alert(‘hello,jQuery‘);
})
</script>
</body>
</html>
<script>
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器它全部都能用！
$(‘p‘).click();//标签选择器
$(‘#id1‘).click();//id选择器
$(‘.class1‘).click();//class选择器
</script>
文档工具站：https://jquery.cuishifeng.cn/id.html
鼠标事件，键盘事件，其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</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>
当网页元素加载完毕之后，响应事件
//当网页元素加载完毕之后，响应事件
$(document).ready(function (){
})
//等价下面
$(function (){
})
节点文本操作
$(‘#test-ul li[name=python]‘).text() //获取值
$(‘#test-ul li[name=python]‘).text(‘‘) //设置值
$(‘#test-ul li[name=python]‘).html() //获取值
$(‘#test-ul li[name=python]‘).html(‘<strong>123</strong>‘) //设置值
css操作
$(‘#test-ul li[name=python]‘).css({ "color": "#ff0011", "background": "blue" });
元素的显示和隐藏：本质是display:none;
$(‘#test-ul li[name=python]‘).show()// 显示
$(‘#test-ul li[name=python]‘).hide()// 隐藏
娱乐测试
$(window).height()
$(window).width()
$(document).height()
$(document).width()
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
1、如果巩固JS（看jQuery源码，看游戏源码！）
2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~） layui、elementui、Ant
标签：修改 aaa pos style 信息 imp back download order
原文地址：https://www.cnblogs.com/edgarstudy/p/14728653.html
