这篇文章补充改一下前面落下的内容
Date对象
一个用来获取时间的对象，很简单，用法看下面吧
var now = new Date(); // Sat Oct 05 2024 16:25:03 GMT+0800 (中国标准时间)
now.getFullYear(); // 年
now.getMonth(); // 月 (0-11)
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 时间戳 从1970.1.1 00:00:00 UTC 开始的毫秒数
// 转换
now = new Date(1728116897386); // 时间戳转日期对象
now.toLocaleString(); // 格式化为本地时间字符串
now.toGMTString(); // 格式化为GMT时间字符串
JSON
是一种具有特定格式的字符串，是一种数据交换格式，具有清晰和简洁的层次结构，易于人类阅读和机器解析，可以有效提升网络传输效率。在js中一切对象都可以用json字符串来表示，二者可以相互转化。对象用{}，数组用[]，键值对用key:value
var user = {
name: "John",
age: 30,
gender: "男"
};
// 对象转化为json字符串 参数为对象
var jsonuser = JSON.stringify(user);
// json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"John","age":30,"gender":"男"}')
BOM
BOM是浏览器对象模型，提供了与浏览器窗口进行交互的对象，其核心对象是window
// windows代表浏览器窗口
window.alert("Hello World!"); // 弹出提示框
window.innerHeight; // 浏览器窗口高度
window.innerWidth; // 浏览器窗口宽度
window.outerHeight; // 浏览器窗口包括边框高度
window.outerWidth; // 浏览器窗口包括边框宽度
// location代表当前页面的url信息
host: "127.0.0.1:5500"
href: "http://127.0.0.1:5500/js.html"
protocol: "http:"
// document代表当前的页面，可以进行一些文档操作
document.cookie // 获取cookie
// history代表浏览器的历史记录
history.back() // 后退
history.forward() // 前进
操作表单
表单是负责提交信息的，主要包括文本框、下拉框、单选框、多选框、密码框等等。
设置和获得表单的值
<form action="post">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="male" id="boy">男
<input type="radio" name="sex" value="female" id="girl">女
</p>
</form>
<script>
var input_text = document.getElementById("username");
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
// 修改输入框的值
input_text.value
// 得到输入框的值
input_text.value = "admin";
// 对于单选框多选框等固定的值,boy_radio.value只能取到当前的值
boy_radio.checked; // 选中,也就是赋值为true
</script>
表单提交
获取提交的值并在需要的时候进行验证和加密
<!-- onsubmit绑定一个提交检测的函数,返回true或false -->
<form method="post" onsubmit="return jiami()">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<p>
<span>密码:</span><input type="password" id="password">
</p>
<!-- 或者在按钮绑定事件 -->
<button type="button" onclick="jiami()">提交</button>
</form>
<script>
function jiami() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// md5加密 需要引入md5工具类
password.value = md5(password.value);
// 可以校验判断表单内容,ture就通过提交,false就阻止提交
return false;
}
</script>
jQuery
是一个库，里面有非常多函数。可以去官网下载然后导入项目，也可以直接引用cdn
最重要的公式是$(selector).action()，selector就是css选择器，action是操作，括号里填函数
<a id="test">点我</a>
<script>
$('#test').click(function(){
alert('hello,jQuery');
});
</script>
常见的事件有鼠标事件键盘事件，鼠标事件有鼠标的按下移动等等，具体可以去官网找
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 要求获取鼠标当前的坐标 -->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
// 当前网页元素加载完之后响应事件
$(document).ready(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+' y:'+e.pageY);
})
});
</script>
</body>
还有一些常用的dom操作
// 文本操作
$('#test li[name=Python]').text(); // 获得值
$('#test li[name=Python]').text('设置值'); // 设置值
$('#test li[name=python]').html(); // 获得值
$('#test li[name=python]').html('<strong>123</strong>'); // 设置值
// css操作
$('#test li[name=Python]').css('color', 'blue'); // 设置颜色
// 元素的显示和隐藏
$('#test li[name=Python]').show(); // 显示元素
$('#test li[name=Python]').hide(); // 隐藏元素
