js语法
js选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js选择器</title>
</head>
<body>
<div id="d" class="box"></div>
<input type="text" id="d2" class="box" />
<h3 class="h3"></h3>
</body>
<script>
// 1、标签id名会存放到页面的名称空间中，在js内可以直接访问该名称空间，如果有同id的，多个对象都会获取，放在一个列表里
// console.log(d);
// 2、getElement系列
// 根据id获取，如果有同id，会有阻隔机制，只会获取第一个
var d1 = document.getElementById('d');
console.log(d1);
var d2 = document.getElementById('d2');
console.log(d2);
// 根据类名获取，可以有相同类名，会全部获取放在列表里
var boxs = document.getElementsByClassName('box');
console.log(boxs[0]);
// 不管结果是几个(0~n)，都用列表来存放查询的结果
let h3 = document.getElementsByClassName('h3')[0];
console.log(h3);
// 根据标签名获取，同类名
h3 = document.getElementsByTagName('h3')[0];
console.log(h3);
// 3、querySelector系列
// 获取一个
// document.querySelector('css选择器语法')
// var b2 = document.querySelector('.box:nth-child(2)');
var b2 = document.querySelector('body .box ~ input.box');
console.log(b2);
// 获取多个
// var boxs = document.querySelectorAll('body .box ~ input.box');
var boxs = document.querySelectorAll('.box');
console.log(boxs);
// 了解：该系列的查询结果取决于css选择器的结果(无逻辑)，同id如果只获取一个，是最先定义的，获取多个则可以都被获取，
// console.log(document.querySelectorAll('#d'));
</script>
</html>
js操作页面三步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作页面的三步骤</title>
</head>
<body>
<h1>操作页面的三步骤</h1>
<div class="box">
<h1>box h1</h1>
</div>
</body>
<script>
// 1、获取页面标签
// 2、设置操作的激活条件 - 事件
// 3、具体的操作方式 - 内容 | 样式 | 事件 | 文档结构
// 1
let body = document.querySelector('body');
let box = document.querySelector('.box');
// 父级调用选择器方法，只完成自己内部的检索
let body_h1 = body.querySelector('h1');
console.log(body_h1);
let box_h1 = box.querySelector('h1');
console.log(box_h1);
// 2
body_h1.onclick = function () {
// console.log('你丫点我了')
// 3
if (box_h1.style.color != 'red') {
box_h1.style.color = 'red';
box_h1.style.backgroundColor = 'orange';
} else {
box_h1.style.color = 'black';
box_h1.style.backgroundColor = 'white';
}
}
</script>
</html>
js事件
鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
let box = document.querySelector('.box');
// 单击
// this就是python中对象的self，在全局则是window
box.onclick = function () {
console.log('单击了', this)
};
// 双击
box.ondblclick = function () {
console.log('双击了')
};
// 右键
box.oncontextmenu = function () {
console.log('右键了');
// 有些事件有默认样式，如果返回值为True或undefined(函数默认返回undefined)，则会在运行完你的函数后运行默认的，如果是false，则不会运行默认的。
return false;
};
// 悬浮
box.onmouseover = function () {
console.log('悬浮了');
};
// 移开
box.onmouseout = function () {
console.log('移开了');
};
// 了解：除了over和int，还有enter和leave，区别在于当父级和子级都有这个事件的时候，over会冒泡(触发子级影响父级) enter不会
// 移动
box.onmousemove = function () {
console.log('移动了');
};
// 左键右键中键都会触发
// 按下
box.onmousedown = function () {
console.log('按下了');
};
// 抬起
box.onmouseup = function () {
console.log('抬起了');
};
</script>
</html>
文档事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档事件</title>
<style>
body {
height: 3000px;
}
</style>
<script>
// 页面加载成功
window.onload = function () {
console.log(h1)
}
</script>
</head>
<body>
<h1 id="h1">hhhhh</h1>
</body>
<script>
let body = document.querySelector('body');
// 页面滚动事件
document.onscroll = function (ev) {
console.log('滚动了');
// 会传进来一个事件
console.log(ev);
// 滚动的值，不要用==判断，而要用>=，因为你抓不到那个点
// console.log(window.scrollY);
if (window.scrollY >= 500) {
body.style.backgroundColor = 'red';
} else {
body.style.backgroundColor = 'white';
}
}
</script>
</html>
键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
</head>
<body>
<h1>键盘事件</h1>
<input type="text">
</body>
<script>
let inp = document.querySelector('input');
inp.onkeydown = function () {
console.log('按下')
};
inp.onkeyup = function () {
console.log('抬起')
}
</script>
</html>
表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单事件</title>
<style>
/*表单的内外边框*/
input {
border: 2px solid pink;
}
input:focus {
outline: 2px solid yellow;
}
</style>
</head>
<body>
<form action="">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="登录">
</form>
</body>
<script>
let form = document.querySelector('form');
let submit = document.querySelector('[type="submit"]');
let usr = document.querySelector('[type="text"]');
// 表单提交事件：表单默认也有提交数据的动作，也可以取消
form.onsubmit = function () {
console.log('提交了');
return false;
};
// 获取焦点
// 焦点：正处于活跃状态的内容
usr.onfocus = function () {
console.log('获取焦点')
};
// 失去焦点
usr.onblur = function () {
console.log('失去焦点')
};
</script>
</html>
事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件对象</title>
</head>
<body>
<input type="text" class="inp">
</body>
<script>
inp = document.querySelector('.inp');
inp.onkeydown= function (ev) {
console.log(ev);
// console.log(ev.keyCode);
if (ev.keyCode === 13) {
console.log('回车了')
}
// 和python一样，'&&'相当于乘法
if (ev.ctrlKey && ev.keyCode === 13) {
console.log('消息发送了')
}
};
document.onclick = function (ev) {
console.log(ev);
// 鼠标点击点的x，y坐标
console.log(ev.clientX, ev.clientY);
}
</script>
</html>
js操作内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容操作</title>
</head>
<body>
<h1 class="title">标题</h1>
<input type="text" class="title">
<button class="btn">改标题</button>
</body>
<script>
let h1 = document.querySelector('h1.title');
let inp = document.querySelector('input.title');
let btn = document.querySelector('.btn');
// 内容操作：value | innerText | innerHTML
btn.onclick = function () {
// 拿到输入框的内容
inp_value = inp.value;
if (inp_value) {
// inp_value = ''; // 改的只是一个内存变量
inp.value = ''; // 清空输入框
// 将内容赋值给h1 innerText | innerHTML
// console.log(h1.innerText);
// console.log(h1.innerHTML);
// Text：纯文本
// h1.innerText = inp_value;
// HTML：文本中的标签会被解析
h1.innerHTML = inp_value;
}
}
</script>
</html>
js操作样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式操作</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
.sup-box {
/*width: 400px;*/
height: 100px;
background-color: orange;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<!--<div class="box" style="background-color: deeppink;"></div>-->
<div class="box">文本</div>
</body>
<script>
let box = document.querySelector('.box');
// 需求1：单击获取标签的之前背景颜色
/*
box.onclick = function () {
// 注：this.style 本质操作的是行间式（只能获取和设置行间式）
// bgColor = this.style.backgroundColor;
// console.log(bgColor);
// 注：在内联和外联中书写的样式称之为 计算后样式
// 注：getComputedStyle 能获取计算后样式，也能获取行间式，但是只读
// getComputedStyle(标签, 伪类).样式;
bgColor = getComputedStyle(this, null).backgroundColor;
console.log(bgColor);
width = getComputedStyle(this, null).width;
console.log(width, parseInt(width));
// 只读，会报错
// getComputedStyle(this, null).backgroundColor = 'rgb(255, 20, 147)';
}
*/
// 需求2：点击修改标签的宽高背景颜色
/*
box.onclick = function () {
// js修改的是行间式
this.style.backgroundColor = 'orange';
this_style = getComputedStyle(this, null);
// console.log(parseInt(this_style.width) * 2);
// 宽放大两倍，高缩小两倍
this.style.width = parseInt(this_style.width) * 2 + 'px';
this.style.height = parseInt(this_style.height) / 2 + 'px';
}
*/
// 需求3：操作计算后样式 - 提取写好计算后样式，通过类名将 js 与 css 建立关联
box.onclick = function () {
console.log(this.className);
// this.className = 'sup-box';
/*
if (this.className === 'box') {
this.className = 'sup-box';
} else {
this.className = 'box';
}
*/
// 注：有个空格：空格sup-box
// this.className += ' sup-box';
if (this.className === 'box') {
this.className += ' sup-box';
} else {
this.className = 'box';
}
};
</script>
</html>
页面转跳
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面转跳</title>
</head>
<body>
<button class="b1">自我刷新</button>
<button class="b2">转跳到9</button>
<button class="b3">ctrl新开转跳到9</button>
</body>
<script>
window.owen = 'Owen';
let b1 = window.document.querySelector('.b1');
// 自我刷新
b1.onclick = function () {
// console.log(owen);
// '' 代表当前页面链接
// window.location.href = '';
// 默认是_self，也就是本页面跳转
location.reload();
};
let b2 = window.document.querySelector('.b2');
// 转跳到9*.html
b2.onclick = function () {
// 在自身所在标签替换
window.location.href = '9、样式操作.html';
};
// ctrl新开转跳到9
let b3 = window.document.querySelector('.b3');
b3.onclick = function (ev) {
// open('转跳路径', '默认就是_blank')
// 但open是函数，可以改，而href只是参数，不能改
if (ev.ctrlKey) {
window.open('9、样式操作.html');
} else {
window.open('9、样式操作.html', '_self');
}
}
</script>
</html>
屏幕有滚动条下的两种宽度
去除滚动条剩余的全部宽度
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);
案例：动态尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态尺寸</title>
<style>
body {
margin: 0;
height: 3000px;
}
.box {
/*width: 200px;*/
/*height: 200px;*/
/*width: 100%;*/
background-color: orange;
position: fixed;
top: 0;
left: 0;
min-width: 900px;
max-width: 1100px;
width: 90%;
margin-left: 5%;
/*vw viewwidth vh viewheight*/
/*width: 90vw;*/
/*margin-left: 5vw;*/
}
</style>
</head>
<body>
<div class="hidden" style="width: 100vw"></div>
<div class="box"></div>
</body>
<script>
let html = document.querySelector('html');
// 去除滚动条的宽度
console.log(html.clientWidth);
// 包含滚动条的宽度
// let hidden = document.querySelector('.hidden');
// width = parseInt(getComputedStyle(hidden, null).width);
// console.log(width);
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);
function resizeBox() {
box_width = parseInt(getComputedStyle(box, null).width);
box.style.height = box_width / 6 + 'px';
if (box_width >= 1100) {
box.style.marginLeft = (html.clientWidth - 1100) / 2 + 'px'
}
}
let box = document.querySelector('.box');
resizeBox();
window.onresize = function () {
resizeBox();
};
</script>
</html>
jq API
http://jquery.cuishifeng.cn/
jq初始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq初始</title>
</head>
<body>
<h1>jQuery就是js的工具库 - 一系列功能的集合体</h1>
<h2>jq内部语法采用的就是原生js</h2>
<h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2>
<h2>jq就是优化了原生js与页面进行交互的逻辑</h2>
</body>
<!-- CDN 连接 外部资源 -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
<!-- 本地连接 -->
<script src="js/jquery-3.4.1.js"></script>
<script>
// jQuery对象
console.log(jQuery);
console.log($);
console.log(Owen);
console.log($('h1'));
$('h1').click(function () {
$('h1').css('color', 'red')
})
</script>
</html>
jq选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="d" class="box"></div>
<input type="text" id="d2" class="box" />
<h3 class="h3"></h3>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// jq选择器：$('css选择器语法')
let $div = $('#d');
console.log($div);
let $boxs = $('.box');
console.log($boxs);
// jq对象如何转换为js对象 - jq对象可以理解为装有js对象的数组
// 就是通过索引取值
let div = $div[0];
console.log(div);
console.log(document.getElementsByClassName('box')[0]);
console.log(document.querySelectorAll('.box')[0]);
console.log($div[0]);
console.log($boxs[0]);
console.log($boxs[1]);
// js如何转换为jq对象
let $newDiv = $(div);
console.log($newDiv);
</script>
</html>
jq事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq事件</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
let $box = $('.box');
// $box.click(function () {
// // this就是被点击的标签 - js对象
// console.log(this);
// console.log($(this));
// });
// jq对象可以完成事件的批量绑定
$box.on('click', function () {
console.log(this);
console.log(this.innerText);
console.log($(this));
});
// js必须手动循环 绑定
// let boxs = document.querySelectorAll('.box');
// for (box of boxs) {
// box.onclick = function () {
// console.log(this);
// console.log($(this));
// }
// }
</script>
</html>
jq内容操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq内容操作</title>
</head>
<body>
<h1 class="title">标题</h1>
<input type="text" class="title">
<button class="btn">改标题</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// js - jsObj.value | jsObj.innerText | jsObj.innerHTML
// jq - jqObj.val() | jqObj.text() | jqObj.html()
// 取值：jqObj.text() | jqObj.text('新值') | jqObj.text(fn)
let $btn = $('.btn');
let $inp = $('input.title');
let $h1 = $('h1.title');
$btn.click(function () {
let val = $inp.val();
if (val) {
// $h1.text(val);
$h1.html(val);
$inp.val(function (index, oldValue) {
// return oldValue.toUpperCase()
return ''
})
}
})
</script>
</html>
jq样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq样式操作</title>
<style>
.box {
/*width: 200px;*/
height: 200px;
background-color: pink;
}
.sup-box {
/*width: 400px;*/
height: 100px;
background-color: orange;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="box" style="width: 600px">文本</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
let $box = $('.box');
$box.click(function () {
// 获取
let width = $box.css('width');
console.log(width);
// 单个设置
$box.css('background-color', function (i, o) {
console.log(o);
return 'red'
});
// 多条设置
$box.css({
width: '100px',
height: '100px',
backgroundColor: 'blue',
});
if ($box.hasClass('sup-box')) {
$box.removeClass('sup-box')
} else {
$box.addClass(function (i, o) {
console.log(i, o);
return 'sup-box'
})
}
})
</script>
<script>
// localStorage['name'] = 'owen';
// sessionStorage['age'] = 18;
</script>
</html>
说明
document
- 指的是当前这个文档，用来表示作用域，也可以换成其他的标签
window
- window对象是一个虚拟的对象，可以把它看做是你所使用浏览器的窗口，其地位很高，因为他是浏览器脚本引擎中的globalobject，他的方法可以隐藏window不写
vw：
- 只在css3中更有，是一个视口单位。
视口：
在桌面端，视口指的是在桌面端，浏览器的可视区域；而在移动端，它涉及三个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
那么这里的视口单位，指的就是布局视口。
根据css3规范，视口单位主要包括以下4个：
- vw：1vw等于视口宽度的1%
- vh：1vh等于视口高度的1%
- vmin：选择vw和vh中最小的那个
- vmax：选择vw和vh中最大的那个
-
在windows系统中，vw会包含滚动条宽度，MAC会隐藏滚动条所以没有影响
-
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
-
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
-
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。
举例：https://www.cnblogs.com/luxiaoxing/p/7544375.html
其他
- 事件名都是小写的，注意
- 在使用this时，不要使用=>方式定义函数，因为这样定义的函数就是个函数，函数里面是没有this的，会往上找，找window，而用function定义的函数是基于对象的（类似于类）
