学习资源来自B站狂神说:狂神说
BOM
window对象
window代表浏览器窗口
Navigator类
封装了浏览器的信息(不建议使用)
大多数时候不会使用navigator对象,因为会被人为修改。
不建议使用这些属性来判断和编写代码。
screen对象
代表屏幕
location对象
location代表当前页面的url信息
document对象
代表当前页面 HTML DOM文档树
获取具体的文档树节点
获取cookie
document.cookie
服务端可以设置cookie:httpOnly
history对象
代表浏览器的浏览记录(不建议使用)
history.back()//后退
history.forward()//前进
DOM
DOM:文档对象模型
核心:
浏览器网页就是dom树形结构
- 更新:更新dom节点
- 遍历dom节点:得到dom节点
- 删除:删除一个dom节点
- 添加:添加一个dom节点
要操作一个dom节点,就必须要先获得一个dom节点
删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意。
插入节点
我们获得了某个dom节点,如果这个节点是空的,我们通过innerHTML就可以添加一个元素,但是如果这个dom节点已经存在元素了,我们就不能这样干,因为会覆盖。
- 追加
appendChild()
- 创建一个新的标签
createElement(’’);//参数是节点tag
操作表单
表单是什么 form dom树
- 文本框
- 下拉框
- 单选框
- 多选框
- 隐藏域
- 密码框
- …
表单的目的:提交信息
获得要提交的信息
jQuery
jQuery库,里面存在大量的javascrapt函数库
引入外部CDN,或者本地库
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
选择器
<script>
document.getElementById("id")
//选择器就是css的选择器
$('#test-jQuery').click(function () {
alert('hello,jQuery!');
})
</script>
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName()
//id
document.getElementById()
//类
document.getElementsByClassName()
//jQuery css中的选择器它全部都能用
$('p').click()//标签选择器
$('#id1').click()//id选择器
$('.class1').click()//类选择器
文档工具站:https://jquery.cuishifeng.cn/
事件
鼠标事件,键盘事件,其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#divMove{
width:500px;
height: 500px;
border: 1px solid #ff0000;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</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>
<ul id="test-ul">
<li class="js">javascript</li>
<li name="python">python</li>
</ul>
<script>
//document.getElementById("test-ul")
$("#test-ul li[name=python]").text();
$("#test-ul").html();
</script>
元素的显示和隐藏:本质:display:none;
未来ajax();
小技巧:
- 巩固js - 看jQuery源码,看游戏源码
- 巩固HTML,CSS - 扒网站,全部down下来,然后对应修改看效果