1.快速入门
引入方式：<script>标签必须成对出现！
内部：<script> <script>
外部：<script src="xxx"> <script>
2.基本语法
数据类型：
var let
数：number，不区分小数和整数 NaN//not a number Infinity//无穷大
字符串: ‘abc’ "abc"
布尔值 true,false
null 空 定义了没有值
Undefined 未定义
数组:[ ] 类型可以不一样 如果越界报Undifined
对象：{ }
Map和Set:
逻辑运算：
&& 与运算，两个 为真，结果为真
|| 或运算，一个为真，结果为真
！非
比较运算符：
= 赋值
== 等于（类型不一样，值一样，结果为true）不推荐
===绝对等于(类型一样，值一样，结果true)
'use strict' EC6严格检查模式，必须写在第一行，预防js的随意性产生的一些问题
3.函数
函数定义：
方式一,直接定义一个函数
function 函数名（参数...）{
xxx...；
return xxx;
}
方式二，用一个变量表示函数
var 变量名=function(参数...){
xxx...'
return xxx;
}
arguments可以获得传进来的所有参数，可以比实际的参数多
4.变量的作用域
。。。
5.方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
方法一定带括号
this是无法指向的，是默认指向调用它的那个对象 但是js中apply可以控制指向的对象
6.内部对象
typeof 判断对象类型
Date 日期 new Date();
.getFullYear() 年
.getMonth() 月
.getDate() 日
.getTime() 时间戳
...
JSON 任何js支持的类型都可以用JSON来表示
格式：对象{}，数组[]，键值对key:value
JSON.stringgi fy(js对象) 对象转换为json字符串
JSON.parse('{key:value,...}') json字符串转对象
7.面向对象
ES6引入class关键字
8.BOM对象操作
BOM：浏览器对象模型
window 代表浏览器窗口对象，可以得到浏览器窗口的一些信息，宽高等
navigator:封装了浏览器的信息，一般不使用改对象，因为会被认为修改
screen 代表屏幕尺寸
location 代表当前页面的URL信息
host
href
protocol
reload刷新网页
assign设置新网址
document 代表当前的页面，获取具体的文档树节点，可以直接获取cookie信息
9.DOM操作对象
DOM：文档对象模型
更新：遍历；删除；添加；
- 获得DOM节点，原生代码，后续尽量都是用jquery
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">段落一</p>
<p class="p">段落二</p>
</div>
<script>
//对应CSS选择器
let father = document.getElementById('father');
document.getElementsByTagName('h1');
document.getElementById('p1');
let p = document.getElementsByClassName('p');
let children = father.children;
let firstChild = father.firstChild;
let lastChild = father.lastChild;
</script>
</body>
- 更新节点
let father = document.getElementById('father');
father.innerText="father";//修改文本的值
father.innerHTML='<strong>123</strong>'//可以解析html标签
father.style.color='red';//颜色属性
father.style.fontSize='60px';//字体，-转驼峰命名
father.style.padding='10px';
- 删除节点
删除节点的步骤：先找到父节点，通过父节点删除自己，删除节点children是时刻变化的
<body>
<div id="father">
<h1>标题</h1>
<p id="p1">段落</p>
<p class="p2">段落二</p>
</div>
<script>
//对应CSS选择器
let father = document.getElementById('father');
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
//father.removeChild(h1);//参数不能接受标签选择器得到的对象
father.removeChild(p1);
</script>
</body>
- 插入节点
获得某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素，但是如果该节点本身存在元素，就不能这么做了，会产生覆盖！
追加
<body>
<p id="p">测试</p>
<div id="father">
<h1>标题</h1>
<p id="p1">段落</p>
<p class="p2">段落二</p>
</div>
<script>
//对应CSS选择器
let father = document.getElementById('father');
let p = document.getElementById('p');
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
father.appendChild(p);//已存在的节点
let p3 = document.createElement('p');//创建一个 节点
p3.id='p3';
p3.innerText='p3';
p3.setAttribute('class','newp');//万能的操作
father.appendChild(p3);
</script>
</body>
10表单操作
md5加密，使用隐藏域
<body>
<form action="#" method="post" onsubmit=myCheck()>
<span>用户名</span><input type="text" id="uname" name="username"> <br>
<span>密码</span><input type="password" id="input-pwd"> <br>
<input type="hidden" id="md5-password" name="password"><!--隐藏起来进行加密-->
<!--<input type="submit">-->
<button type="submit">提交</button>
</form>
<script>
function myCheck() {
let username = document.getElementById('uname');
let pwd = document.getElementById('input-pwd');
let md5pwd = document.getElementById('md5-password');
md5pwd.value=md5(pwd.value);//隐藏密码
}
</script>
</body>
11.Jquery
公式：$(selectot).acton()
cdn jquery：百度即可得到找到在线的，可进去复制下来
- jquery选择器
选择器就是CSS选择器
$('标签') 标签选择器
$('#id') id选择器
$('.class') ；类选择器
...css中的选择器全部都能用
- jquery事件
- jquery操作DOM对象
节点文本操作
.text();获得值
.text('设置值')
.html()
.html('设置值')
.attr("src") 获取src属性的值
.attr("key","value")或者.attr({"key1":"value","key2":"value2"}) 设置属性
css样式操作
.css("key","value")或者.css({"key1":"value","key2":"value2"}) 设置属性
,css("color") 获取属性的值
元素的显示和隐藏
.show()
.hide()
jquery中有attr()和css()两种方法，attr()主要是针对元素的属性进行操作，如img的src属性和alt属性，a链接的href属性等等;css()修改的是样式里面的属性，即是style里面的属性