asa

复习

"""
1、js变量：不写 | var | let | const
2、js的基本数据类型：值类型：number | string | boolean | undefined 引用类型：object | function 其它： null | Array | Date
3、随机数：parseInt(Math.random() * (n - m + 1)) + m
4、类型转换："" + number => string | +string => number | parseInt(string) => number
5、运算符：/ | ++ | === | &&、||、! | 条件? 结果1:结果2
6、类型的运用：string | [1, 2, 3] splice(index, count, args) | {}
7、流程控制
8、函数
function 函数名(){}
var 函数名 = function (){}
let 函数名 = () => {}
"""

今日内容

"""
1、js操作页面文档
选择器
页面内容
页面样式
页面事件

2、jq操作页面文档
http://jquery.cuishifeng.cn/
"""

js操作页面三步骤

操作页面的三步骤

box h1

js事件
鼠标事件

文档事件

hhhhh

键盘事件

键盘事件

表单事件

事件对象

js操作内容

标题

改标题

js操作样式

文本

页面转跳

自我刷新 转跳到9 ctrl新开转跳到9

屏幕有滚动条下的两种宽度
去除滚动条剩余的全部宽度

let html = document.querySelector('html');
console.log(html.clientWidth);

不去除滚动条剩余的全部宽度

function getHtmlWidth() {
let hidden = document.createElement('div');
hidden.style.width = '100vw';
html.appendChild(hidden);
width = parseInt(getComputedStyle(hidden, null).width);
html.removeChild(hidden);
return width
}
width = getHtmlWidth();
console.log(width);

案例：动态尺寸

1

2

jq内容操作

标题

改标题

jq样式操作

文本