JavaScript（3）
浏览器介绍
JavaScript诞生就是为了能够让他在浏览器中运行！
BOM:浏览器对象模型
浏览器内核：
-
IE 6~11
-
Chrome
-
SAfari
-
FireFox
第三方浏览器（使用上述内核）：
-
QQ浏览器
-
360浏览器
window （重要）
window代表了浏览器窗口
window.alert()//弹窗 window.innerHeight//获得浏览器内框的高度 window.innerWidth window.outerHeight//获得浏览器外框的高度 window.outerWidth //调整浏览器窗口上述结果会变
Navigator
Navigator,封装了浏览器的信息
navigator.appName "Netscape" navigator.appVersion "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36" navigator.platform "Win32"
大多数时候，我们不会使用Navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸,单位是像素，是一个只读变量
其实是浏览器分辨率，要比屏幕分辨率低
screen.width 1536 screen.height 864
location （重要）
代表当前页面的URL信息
host: "www.bilibili.com"
hostname: "www.bilibili.com"
href: "https://www.bilibili.com/"
protocol: "https:"
reload: ƒ reload()
location.reload()//刷新网页
//设置新的网址（页面跳转！）
location.assign('https://www.baidu.com/')
document (内容->DOM)
document代表当前的页面，HTML，DOM文档树
document.title//获取标题 "百度一下，你就知道" document.title = "哈哈哈"//修改！ "哈哈哈"
获取具体的文档树节点
<dl id = "app">
<dt>java</dt>
<dt>javaSE</dt>
<dt>javaEE</dt>
</dl>
<script>
var dl = document.getElementById('app')//获取上述列表
</script>
获取cookie
document.cookie "route=1fb8a952e95b44bc50eb8319f785b770; org.springframework.web.servlet.i18n.CookieLocaleResolver.LOCALE=zh_CN; _ga=GA1.3.588156644.1585707123"
劫持cookie原理
页面内置一段js代码，用于获取你的cookie
<script src = "aa.js"></script> <!--恶意人员，获取你的cookie上传到他的服务器-->
比如淘宝和天猫，你在淘宝上登陆后，在天猫上也会自动帮你登录！
在服务器端设置cookie：httpOnly 就不会窃取了
history
不建议使用了，现在使用Ajax
history代表了浏览器的历史记录
history.back()//后退键 history.forward()//前进
7、操作DOM对象（重点）
这一块都是底层代码，比较繁琐，所以后面才会引入jQuery！
核心
浏览器网页就是一个DOM树形结构！
-
更新：更新DOM节点
-
遍历DOM节点：得到DOM节点
-
删除：删除一个DOM节点
-
添加：添加一个DOM节点
要添加一个DOM节点，就必须先获得这个DOM节点
获得DOM节点
整个页面就是一个DOM树，所有标签就叫做DOM节点
<body>
<div id = "father">
<h1>标题一</h1>
<p id = "p1">p1</p>
<p class = "p2">p2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementsByTagName('h1');//获取标签为h1的DOM节点
var p1 = document.getElementById('p1');//id选择器
var p2 = document.getElementByClassName('p2');//类选择器
var father = document.getElementById('father');
var children = father.children;//获取父节点下的所有子节点
//father.firstChild
//father.lastChild
</script>
</body>
以上是原生代码，之后我们尽量都是使用jQuery();
更新节点
<div id = "id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本
-
id1.innerText = '456':修改文本的值，把所有值变成了这个 id1.innerHTML = '<strong>123</strong>':加标签
操作CSS
id1.style.color = 'yellow';//属性使用字符串包裹 id1.style.fontSize = '20px';// - 转为 驼峰命名 id1.style.padding = '2em';
删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
<div id = "father">
<h1>标题一</h1>
<p id = "p1">p1</p>
<p class = "p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
//第一种方法
father.removeChild(self);
//第二种
//注意：删除是一个动态的过程，你删除第一个孩子之后，第二个孩子就变成了第一个
father.removeChild(father.children[0])
</script>
注意：在删除多个节点的时候，children是在时刻变化的，删除节点的时候要注意！
插入节点
我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖！
追加（把一个存在的标签移到一个标签的子节点最下面）
<p id = "js">JavaScript</p>
<div id = "list">
<p id = "se">javaSE</p>
<p id = "ee">javaEE</p>
<p id = "me">javaME</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);//把js代表的p标签追加到list的子节点中（剪切、复制）
</script>
创建一个新的标签，实现插入
<script>
//通过js创建一个新的节点
var newp = document.creatElement('p');//创建一个p标签
newp.id = 'newp';
newp.innerText = 'hello';//给标签增加id和内容
//设置标签的属性（万能写法！）
var myScript = document.creatElement('script');
myScript.setAttribute('type','text/javascript');
//可以创建一个style标签
var myStyle = document.creatElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:red}';//s设置标签内容
//要把样式加到head标签去,注意：按照标签名获取节点是一个数组！！！要加下表！
document.getElementByTagName('head')[0].appendChild(myStyle);
</script>
insertBefore：把一个节点随意插入另一个节点的子节点内
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee)//把js放到ee后面
8、操作表单（验证）
获得要提交的信息
<form action = "" method = "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');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value = '123'//把别人填的值改了！
//对于单选框、多选框等固定的值，boy_radio.value只能取到当前的值，不能看到用户选择了那个
boy_radio.checked;//查看返回的结果，Boolean类型，如果为true，则被选择
girl_radio.checked = true;//修改用户的选择结果
</script>
获取表单信息除了按照id，还有表单的独特方法：
配合forms和name属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
提交表单，MD5加密，表单优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类，这个类的md5()方法用于对密码加密-->
<script src = "md5.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit = 绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接受！
格式：onsubmit = "return function()"
-->
<form action = "https://www.baidu.com/" method = "post" onsubmit="return test()">
<p><!--表单没有name属性，抓包抓不到！-->
<span>用户名：</span><input type = "text" id = "username" name = "username">
</p>
<p>
<span>密码：</span><input type = "password" id = "input-password">
</p>
<!--当使用MD5进行加密时，会瞬间改变输入密码的长度，所以我们设置一个隐藏域，不影响用户的输入！-->
<input type = "hidden" id = "md5-password" name = "password">
<p>
<input type = "submit" value = "提交">
</p>
<!--按钮级别的表单拦截onclick，建议使用表单级别的onsubmit-->
<!-- <button type="button" onclick=""></button>-->
</form>
<script>
let test = function () {
//获取三个节点
let userName = document.getElementById("username");
let password = document.getElementById("input-password");
let md5pass = document.getElementById("md5-password");
// 将输入的密码通过MD5加密后，放到隐藏域
md5pass.value = hex_md5(password.value);
//可以校验判断表单内容，true就是通过提交，false就是阻止提交
return true;
}
</script>
</body>
</html>
9、jQuery
初始jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--使用jQueryCDN在线引入-->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
<!--下载js文件引入-->
<script src = "jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id = "test-jQuery">点我</a>
<!--jQuery公式！：$(selector).action() 注意：选择器要用引号括起来-->
<script>
<!-- 选择器就是css的选择器-->
$('#test-jQuery').click(function () {
alert('hello');
})
</script>
</body>
</html>
选择器！
//原生的js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery中，css的选择器他全部都能用
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//类选择器
关于jQuery选择器的其他内容，查文档！文档要用起来！啥都有还方便！
http://jquery.cuishifeng.cn/index.html
jQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "jquery-3.4.1.js"></script>
<style>
#divMove{
width: 500px;
height: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求：获得鼠标当前的坐标-->
mouse:<span id = "mouseMove"></span>
<div id = "divMove">
在这里移动鼠标试试！
</div>
<script>
//当网页元素加载完毕之后，响应事件，这里把公式简化了！记住就行！
$(function () {
//想要获取鼠标移动事件
$('#divMove').mousemove(function (e) {
//把获取的鼠标位置输出到span标签
$('#mouseMove').text('x:'+e.pageX+" "+'y'+e.pageY);
})
})
</script>
</body>
</html>
同理，更多事件查看文档！
jQuery操作DOM元素
要对应源码看，注意理解
节点文本操作
$('#test-ul li[name =python]').text();
//获得id为test-ul的ul列表下的name为python的li的值
$('#test-ul li[name = python]').text('设置值');//设置里面的值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值
css的操作
$('#test-ul li[name =python]').css({'color','red'});
元素的显示和隐藏：本质是display:none
$('#test-ul li[name = python]').show();
$('#test-ul li[name = python]').hide();
其他
$(window).width();
$(window).height();
$('#test-ul li[name = python]').toggle();//元素的显示和隐藏切换
未来ajax()
$('#from').ajax()
$.ajax({url:"test.html",context:document.body,success:function({
$(this).addClass("done");
})});
