JS基础(ES6)
引入
- HTML5默认的脚本语言就是javaScript，所以可以不用写type = 'text/javaScript'
变量
let为ES6新增
JS中采用类似python的弱类型变量，不过定义变量时需要给定通用的变量名let或var；
函数参数则不需要指定类型
- 全局变量，作用于全局
var PI = 3.14;
var为数据类型名，全局变量一般使用大写字母
- 局部变量，作用于本层{}内
let i=3;
数据类型
数组
- 空数组:
let arr = [] - 混合数组:
let arr1 = ['a', 1, 'xiaobai']
字符串
let str = 'Hello'
对象
- 类似python的字典:
let obj = {'name': 'naoxiaobai'} - 访问:
obj.name
函数基础
运算符
- 算术运算
+,-,*,/
- 逻辑运算
与: '&&',或:
||, 非: '!'
document
获取标签对象
- querySelector(argument)
- 获取一个指定的标签，返回标签对象
argument同HTML中的各种选择器
例：获取类名为mark的标签对象
document.querySelector('.mark')
- querySelectorAll(arg)
- 获取同一类所有的标签对象，返回对象数组
argument同HTML中的各种选择器
设置标签属性值
- 方式1: setAttribute(name, value)
name: 标签的属性名
value: 属性值
let img = document.querySelector('img');
img.setAttribute('class', 'light');
- 方式2: 通过document获取的标签对象可以直接设置或修改该标签属性的值
例：获取img对象，设置宽度值
let img = document.querySelector('img');
img.style.height = 200+'px';
移除标签属性值
- removeAttribute(argument)
argument: 要移除的标签的属性值（class,style）
注意： 不能移除标签属性下的属性值（style下的color...）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移除标签的属性值</title>
<style type='text/css'>
.mark{
font-size: 50px;
}
</style>
</head>
<body>
<h1 class='mark' style="color:red">Hello World</h1>
<p id="demo">点击下面的按钮删除上面的标题的样式属性</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
document.getElementsByTagName("H1")[0].removeAttribute("class");
};
</script>
</body>
</html>
window
onload
- 监听网页是否加载完成，加载完成后执行其后的函数
一般后跟一个函数，确保网页全部加载完毕，以防标签获取或设置属性时，网页未加载完成而导致出错。
例：
`window.onload = function (ev) {
;
} `
getComputedStyle
- 获取标签对象的所有style属性值，返回对象类型
注意：返回的对象中的键值如果由多个单词组成，使用的是小驼峰结构
例：获取标签对象img的宽度
let img = document.querySelector('img');
let height = window.getComputedStyle(img).height;
onresize
- 监听浏览器窗口的大小是否发生了变化
类似onload，后跟一个函数，如果窗口发生变化，则执行该函数
例：window.onresize = function () { ; }
定时器
setInterval
- setInterval(fun,delay[, param1, param2, ...])
fun为指定时间所要执行的函数
delay延迟执行的时间（单位为毫秒）
params向延迟函数传递而外的参数，IE9以上支持
例：延迟1s的时间后修改mark标签的宽度为原来的两倍
let mark = document.querySelector('.mark');
//获取mark标签的宽度和高度
let style_mark = window.getComputedStyle(mark);
let width = parseInt(style_mark.width);
let timer1 = setInterval(function () {
width *= 2;
//修改标签的宽度和高度(行间样式修改)
mark.style.width = width+'px';
}, 1000)
clearInterval
- 关闭打开的定时器对象
例：
let timer = setInterval(function(){});
clearInterval(timer);
setTimeOut
基于刷新的动画
- requestAnimationFrame根据浏览器自身的刷新频率来完成动画
requestAnimationFrame(callBack):
该方法作用是告诉浏览器在执行下一次页面绘制时提前调用一下callBack，
注意每一次调用requestAnimationFrame,该方法都会为本次调用函数返回一个唯一的id，
本次id可以作为取消本次调用的依据，取消方法为window.cancelAnimationFrame(id)
第三方框架
bootstrap
- 栅格系统,一种轻便的web页面框架
Swiper
- 移动端常用的滑动插件，由于IE低版本不兼容，PC端慎用
Vue
- 适用于自定义组件,利于头部和脚部的定义
网友评论