[TOC]
### 1. 查看方法体（整个函数）
~~~
<script>
function test(){
console.log(1);
}
document.body.innerHTML = test;
</script>
~~~
### 2. onfocus-->获取焦点 onblur-->失去焦点
~~~
列1
<input type="text" id="txt">
<script>
var txt = document.getElementById("txt");
txt.onfocus = function(){
this.style.background = "red"
}
txt.onblur = function(){
this.style.background = "green";
}
</script>
列2 简书搜索框
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<input type="text" id="txt">
<script>
$("#txt").focus(function(){
$(this).animate({width:"300px"},1000)
})
$("#txt").blur(function(){
$(this).animate({width:"200px"},1000)
})
</script>
~~~
### 3. 内联事件
~~~
<p onclick="go()">hello world</p>
<script>
function go(){
alert(1);
}
</script>
~~~
### 4. onmouseover--鼠标移入 onmouseout--鼠标移除
~~~
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<p id="test" class="animated">hello world</p>
<script>
var test = document.getElementById("test");
test.onmouseover = function(){
this.classList.add("shake");
}
test.onmouseout = function(){
this.classList.remove("shake");
}
</script>
~~~
### 5. vue
~~~
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<div id="test" @click="handleClick">
{{msg}}
</div>
<script>
new Vue({
el:"#test",
data:{
msg:"hello"
},
methods:{
handleClick:function(){
alert(1);
}
}
})
</script>
~~~
### 6. 窗口加载完毕
~~~
通用的页面加载js有四种方式：
1.window.onload = function(){}; —-js
2.$(window).load(function(){});——Jquery
3.$(document).ready(function(){});–Jquery
4.$(function(){});———————Jquery
其中1和2为同一种，3和4为同一种
1、2表示：页面全部加载完成（引用文件，图片）在加载内部函数，且只能执行一个（当文件由多个onload或者load，只加载最后一个）。
3、4在window.onload执行前执行的，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。
PS：
DOM文档加载步骤：
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕，执行window.onload
<script>
// $(document).ready(
// )
window.onload = function(){
}
判断页面是否加载完毕
if(document.readyState == "complete"){
//coding
}
</script>
~~~
### 7. 1 onchange 输入框的内容发生改变时触发
~~~
<input type="text" id="txt">
<script>
/*
onchange 输入框的内容发生改变时触发
input输入框有value属性,可以读写
*/
var txt = document.getElementById("txt");
txt.onchange= function(){
this.value = "change"
}
</script>
~~~
### 8. onsubmit事件
~~~
<form id="submit">
<p><input type="text" id="user"></p>
<input type="submit" >
</form>
<script>
// 当表单的submit按钮被点击的时候,表单会触发onsubmit事件
var submit = document.getElementById("submit");
var user = document.getElementById("user");
submit.onsubmit = function(event){
if(user.value=="123"){
window.location.href = "https://www.baidu.com";
}
event.preventDefault();
}
</script>
~~~
### 9. event.preventDefault();
~~~
<a href="https://www.baidu.com" id="test">hello world</a>
<script>
/*
场景 a,form
阻止默认行为 return false event.preventDefault();
*/
var a = document.getElementById("test");
// 在ie9以下event事件作为window的属性 winddow.event()
// chrome,event作为事件的参数
a.onclick = function(event){
try{
//chrome
event = event;
}catch(err){
//ie9以下
event = window.event();
}
window.location.href="https://www.sogou.com/";
// return false;
event.preventDefault();
}
</script>
~~~
### 10. onresize
~~~
<script>
// onresize-->当浏览器的窗口大小发生改变的时候触发
// window.innerWidth-->获取浏览器窗口的width
window.onresize= function(){
alert(window.innerWidth)
}
</script>
~~~
### 11. onscroll
~~~
<script>
/*
onscroll-->窗口滚动的时候触发
document.documentElement.scrollTop滚动条距离顶部的高度
*/
window.onscroll = function(){
// var height = document.documentElement.scrollTop;
var height = window.scrollY;
console.log(height);
}
</script>
~~~
### 12. 获取 窗口宽度 和 距离顶部高度 的方法
~~~
window.innerWidth-->获取浏览器窗口的width
获取浏览器窗口的距离顶部高度
var height = document.documentElement.scrollTop;
var height = window.scrollY;
~~~
### 13. onkeydown
~~~
<script>
/*
onkeydown-->用户按下键盘上的一个键的时候发生
keyCode-->键盘对应的编码
*/
document.onkeydown = function(event){
alert(event.keyCode);
}
</script>
~~~
### 14. 事件冒泡
~~~
<div id="parent">
parent
<div id="child">child</div>
</div>
<script>
// 当子元素触发一个事件的时候,倘若父元素也有相同的事件,父元素的事件也会触发
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.onclick = function(){
alert("parent");
}
child.onclick = function(event){
alert("child");
// 阻止事件冒泡
event.stopPropagation();
}
</script>
~~~
### 15. confirm("msg") 弹出框 确定 取消按钮
~~~
<button id="btn">你是否想剁手</button>
<script>
// window.confirm("msg")-->boolean
var btn = document.getElementById("btn");
btn.onclick = function(){
var value = window.confirm("你确定要剁手吗");
if(value){
window.location.href = "https://www.taobao.com"
}else{
window.location.href="http://www.hudazx.cn"
}
}
</script>
~~~
### 16. prompt 友好的提示
~~~
<script>
var value = window.prompt("输入你的年龄");
if(value>18){
alert("能进网吧");
}
</script>
~~~
### 17. setInterval(func,time) 间隔一段的时间执行函数
~~~
<button id="btn">点我</button>
<script>
/*
setInterval(func,time)
间隔一段的时间执行函数
*/
var btn = document.getElementById("btn");
btn.onclick = function(){
setInterval(go,1000)
}
function go(){
alert("请下载")
}
</script>
~~~
### 18. clearInterval(name) 清除定时器
~~~
<script>
// num=0,max=10,每过一秒num++,当num>max清除定时器
//clearInterval(name)
var num = 0;
var max = 3;
var timer;
timer = setInterval(function () {
if (num > max) {
clearInterval(timer);
} else {
alert(num)
num++
}
}, 100)
</script>
~~~
### 19. setTimeout()-->间隔一定时间执行函数,并且只执行一次
~~~
<script>
// setTimeout()-->间隔一定时间执行函数,并且只执行一次
setTimeout(function(){
alert(1)
},1000)
</script>
~~~
### 20. clearTimeout() 清除超时调用
~~~
<script>
// clearTimeout()-->清除超时调用
var num = 0;
var max = 3;
var timer;
function go() {
num++;
alert(num);
if (num > max) {
clearTimeout(timer);
} else {
timer = setTimeout(go, 1000);
}
}
go();
</script>
~~~
- JavaScript介绍
- js基本语法
- 调试方法
- 标识符
- 数据类型(基本，引用）
- 基本数据类型
- 引用数据类型
- 严格模式.
- 全局变量和局部变量
- DOM 节点
- DOM 改变元素内容（样式 内容）
- 节点改变元素内容（通过父子节点找到元素然后操作）
- 添加元素
- 设置 移除 属性
- DOM下的事件
- 知识点整理
- 异步
- Ajax
- this指向问题
- 设备类型检测（手机 平板 电脑）
- 函数
- 函数的参数
- 重载
- 数据类型
- 构造函数
- 返回上一个网页
- 数组 （重点）
- 增加数组内容
- 删除数组元素
- 复制数组
- 修改数组元素（功能强大实现 增 删 改）
- 数组元素查询
- 数组遍历
- 最值
- 展开语法
- join
- 排序问题
- 求和
- 颠倒数组
- 判断是不是一个数组
- 二维数组
- 数组和字符串之间转换
- 数组去重
- 将jquery对象转为javascript对象
- 元素偏移量
- 获取一个元素距离顶部的距离
- 可视区域宽高
- 布局视口 （移动设备）
- 文档碎片
- 表格中的 thead tbody
- 获取元素宽度
- 滚动区域宽高
- div滚动条设置
- 使用 offsetWidth 设置父元素宽度和子元素宽度之和一样
- 字符串的方法
- js功能实现
- 点击显示 隐藏
- 点击变色 兄弟元素隐藏.
- 点击显示隐藏区域.
- 兼容性问题.
- 选择按钮,
- 获取外部样式
- 点击弹出下标
- 通过属性改变img 的src
- 小米登录 es6实现js
- try catch
- 小米登录es5实现js
- js实现导航栏点击加载多个页面
- js实现网页之间的跳转和在指定div加载页面
- iframe 高度实现自适应
- js 获取滚动条距离顶端的距离
- jQuery animate() 方法 动画效果
- fade（js实现遮罩层渐变色）
- js轮播实现
- 超哥轮播js
- 轮播动画原理
- 数组实现瀑布流
- 电子表计时器date
- 从豆瓣接口上取数据实现搜索功能（重点！！！！）
- 封装
- 不使用js-ajax 使用VueResource实现数据请求
- 需要常看的知识点
- 移动端响应布局rem
- rem+vw
- 原型
- JS的模块化如何解决
- ES5和ES6模块化写法
- js内置对象
- 结构赋值es6
- 字符串模板 分割字符串
- 谈基本数据类型中的方法（本不带有方法）
- Math
- date
- 正则
- 备选字符集
- 连号的备选字符集
- replace() 查找替换（过滤）
- 量词
- 不确定的数量
- search找下标
- test()检验是否包含正则表达式
- 实例
- 验证电话号码
- 邮箱验证
- 将指定内容过滤（天猫 淘宝）
- 预定义字符集（简化）
- 严格匹配 ^ $
- Ajax
- http get post
- $.get()和$.post()详解
- jquery-ajax 数据请求
- 使用Vue Ajax在网页中渲染数据
- axios向服务器端get，post数据（重点）
- 跨域
- 原生Ajax
- 原理步骤 json解析字符串
- 多态
- js中的面向对象
- js中的类和继承
- 原型和原型链
- 参数表达式
- 字符串中常用的方法
- mock.js
- scrollReveal 滚动显示
- Node.js模块里exports与module.exports的区别