这是我参与「第五届青训营 」伴学笔记创作活动的第13天
今天针对JS前期学习的内容进行查漏补缺
1.第一個JavaScript程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- JS代码需要编写到script标签中 -->
<script>
/* 弹出警告框 */
alert("HelloJavaScript!")
/* 在页面中的body输入一个内容 */
document.write("Hello~~~")
/* 向控制台输入一个内容 */
console.log("here is JavaScript!");
</script>
</head>
<body>
</body>
</html>
2.script标签使用
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/firstjs.js"></script>
<script>alert("一个script引入后不能再写只能重新创建一个scrip")</script>
</head>
<body>
<button onclick="alert('你~干嘛~哎哟~');">点我一下</button>
<a href="javascript:alert('只因你太美~')">再来一下</a>
</body>
</html>
3.变量和标识符
严格检查模式 "use strict";
<script>var代表变量
"use strict"; 严格检查模式，必须写在JavaScript的第一行
var s =123;
var a="hello";
let str=`长字符串${a}`; ``飘号可以引入长字符串并带入${} EL表达式
var str="我说："今天天气不错""
\斜杠在js中代表转译字符 如:" ' \n换行 \t制表符...
str.substring(1,5) 截取第一个后面的字符串到第五个
</script>
Number
typeof用于数据类型的检测
最大值Number.MAX_VALUE
最小值Number.MIN_VALUE
Boolean
Infinity无穷
Map:HashMap键质对
var map=new
Map([[“tom”,123],[“Hase”151]…])
map.get(“tom”)
map.set(“key”,“value”)
Set:无序不重复集合 set.add()
强制数据类型转换
<script>
var a=123;
var b=a.toString(); -------有返回值 NULL/Undefiend类型的无法用toString转换
a=String(b); -------NULL/Undefiend可用toString
var n=Number(a); -------Other--->Number非数字内容转为NaN 空格转为0
a="123abc";
a=parseInt(a,10); 10表转为10进制 -------仅对String有效 提取数字 转为123 还有parseFloat转Float类型
a=123;
a=Boolean(a); -------除了0以外的其他数值的为true
字符串除了空格其余都是true
null和undefined都是false
</script>
其他进制的数据表示
0x ————十六进制
0 ————八进制
0b ————二进制 部分浏览器不支持
运算
除了字符串的加法转为String，其他的字符串运算均转为num运算
任何值做 / * -都会转为Number
运算符
一元运算符可以使用 +号 a=+a;将其他类型转为Number
自增自减
a++—–>a+1之前的值 a=10 a++ a++-->10 a++ a++—>11 b=a++ b==a
++a—> a+1之后的值 a=10 a++ ++a-->11 a++ ++a—>12 b=++a b==a+1
减减与加加一样 a- -==a - -a=a-1
无论什么形式的自增或自减都会使得原变量+1
逻辑运算符
与&&运算只要有一个false结果就是false
判断时第一个为false就直接返回第一个否则返回第二个值 a=4&&0 a==0 b=5&&4 b=4
或||运算只要有一个true就是true
判断时第一个为false就直接返回第一个否则返回第二个值 a=4||0 a==4 b=4||5 b=4
与或运算均为短路运算
比较运算符在比较两个字符串时，是一位一位比较的，比较编码大小
NaN不与任何值相等包括本身 可以使用isNaN()函数进行判断
===全等与 ==不同的是全等不会进行自动类型转换
字符串在与数字比较时转换成NaN
Unicode编码使用
在JS中：\u四位十六进制编码
在中： &#十进制编码；
条件运算符 （三元运算符）
条件表达式？语句1：语句2
var a = prompt(“请输入一个值：”) 接收的值为String类型
质数练习
<script>
console.time("begin");
for(var i=2 ;i<1000;i++){var flag=true;
for(var j=2;j<=Math.sqrt(i);j++){
if(i%j==0){
flag=false;
break;
}
}
if(flag){
console.log(i);
}
}
console.timeEnd("begin");
</script>
遍历数组：for(letnum of arr){
}
4.对象
1.内建对象
由ES标准中定义的对象，在任何的ES的实现中均可使用
比如：Math String Number Boolean Function Object….
2.宿主对象
由JS运行环境提供对象，目前来讲主要指由浏览器提供支持的对象
比如BOM DOM
3.自建对象
开发人员自己创建
4.属性名和属性值
JS的属性名不要求遵守标识符的规范
对象.属性名=属性值；
特殊的属性名：
对象[“属性名”]=属性值;
var n="属性名";
对象[“属性名”]=属性值;
父类.属性值=子类；
in运算符
“属性名” in 对象 ——检查该属性是否存在对象中
独立的：单独的变量var会被保存在栈当中，每个变量都是相互独立的，互不影响
抱团的：对象是保存到堆当中的，每个对象会有对应的一个堆的内存地址，同一个对象中的属性会相互影响，同一个对象会存入同一个堆地址
对象字面量
var 对象名 = {
属性名1 : 属性值,
属性名2 : 属性值
};
等价于 var 对象名 = new Object();
数组
//数组的字面量
var arr = [1,2,3,4];
arr.slice(1,4) //截取 -->2,3,4 1是开始4是结束
arr.push() //压入到数组中
arr.pop() //弹出最后一个数
arr.concat() //连接数组
arr.splice(0,1,"value1","value2"...) //删除数组中的指定元素,并返回被删的值生成一个新 的数组 0是开始的位置，1是数量,value1值将从 0的位置开始替换,value2在value1后面，以此类推，会导致原来数组长度增加
arr.jion(); //数组变Srting
arr.forEach(function(value,index,all){
//遍历,这里的forEach函数需要调用另外一个函数，称为回调函数，IE8以上才支持
alert("value=>"+value);//元素值
alert("index=>"+index);//索引
alert("all=>"+all);//数组本身
});
//等价于
var arr = new Array();
arr.sort(function(a,b){
return a-b;
});
正则表达式
计算机根据正则表达式，来检查一个字符串是否符合规则，获取将字符串符合规则的内容提取出来
var reg = new RegExp("正则表达式","匹配模式"); //创建正则表达式的对象
var reg = new RegExp("@","i(g)"); //i表示忽略大小写 g表示全局匹配模式
reg.test("str"); //用于检查字符串是否符合正则表达式，return->true or->false
正则字面量语法：
var reg = /正则表达式/匹配模式;
var reg = /@&com/i
var reg = /@|c/g == var reg = /[@c]/g //[abcdf]在这里表示或abcdf、[a-z]表示a-z、[^a]除了a
// g 全局匹配就是遍历全部内容
var str = "1s3l3a4k5s";
str.match(/[a-z]/gi); //找出全部字母无论大小写
var str = "aasss";
var reg = /a{3}/ //a出现3次
var reg = /a{1,3}/ //a出现1-3次
var reg = /a{3,}/ //a出现3次以上
var reg = /^a/ //a开头
var reg = /a*/ //0个a或者多个a
var reg = /a？/ //0或1个a
var reg = /a$/ //a结尾
var phone = /^1[3-9][0-9]{9}$/ //手机号正则表达式
/\b/ 空格
var str2 = str.replace(/^\b*|\b*$/,"") //去空格
var mail = /^\w*{3,}(.\w+)*@[A-z0-9]+(.[A-z]{2,5}{1,2})$/ //电子邮箱
5.函数
构造函数：var fun = new Function(“方法体”); 调用fun();
函数声明：function 函数名 ([形参1，形参2….]){
• 语句2;
}
var fun = function([形参1，形参2….]){
语句1;
}
函数的实参可以是任何值包括函数，函数本身也是一个对象
arguments
argument是一个JS免费赠送的关键字,代表传递进来的所有参数，是一个数组，包含所有传入的参数
var fun2 = function(x,y,z,argument){
console.log("a=>"+x);
console.log("b=>"+y);
console.log("c=>"+z);
console.log(argument);
}
fun2(1,5,6,5,6,4);
17:11:14.647 a=>1 at js/Object.html:20
17:11:14.648 b=>5 at js/Object.html:21
17:11:14.651 c=>6 at js/Object.html:22
17:11:14.652 5 at js/Object.html:23
rest则是接收除了已定义参数以外的全部参数
var fun = function(x,y,z,...rest){
console.log("a=>"+x);
console.log("b=>"+y);
console.log("c=>"+z);
console.log(rest);
};
fun(1,5,6,5,6,4);
17:05:28.155 a=>1 at js/Object.html:14
17:05:28.158 b=>5 at js/Object.html:15
17:05:28.159 c=>6 at js/Object.html:16
17:05:28.167 {"0":5,"1":6,"2":4,"length":3} at js/Object.html:17
全局变量window
默认所有的全局变量都会自动绑定在window对象下
window.alert(window.x) ——— window对象可以调用任何函数、属性
变量的作用域
函数内的变量只在函数内作用
单独的变量var会被保存在栈当中，每个变量都是相互独立的，互不影响
对象是保存到堆当中的，每个对象会有对应的一个堆的内存地址，同一个对象中的属性会相互影响，同一个对象会存入同一个堆地址
假设在函数作用域范围内没有找到指定的变量，就会往外查找直至全局变量
var的作用域会超出定义的作用域，ES6以后可以使用 let 定义变量
不用var 或let 声明的变量会定义为全局变量 var定义变量时作用域会提前
垃圾回收：只需要将不在使用的变量赋值为null
var clear = 123;
clear = null; //回收
常量const
const PI = 3.1415; -----不可再修改
方法
方法一：
var yok = {
name:"xiaoming",
brith:2000,
age:function(){
return 2022-this.brith;
}
console.log(yok.age());
方法二：
var getAge = function(){
return 2022-this.brith;
}
var yok = {
name:"xiaoming",
brith:2000,
age:getAge
}
console.log(yok.age());
==getAge.apply(yok,[]) -----让this指向yok这个对象，参数[]为空
this 关键字为调用的方法进行传参
call()和apply()
function fun(){}
==fun.call(对象,参数，参数...);
==fun.apply(对象,[参数，参数...]);
==参数.fun();
Math
工具类
Math.abs(-1) //绝对值
Math.ceil(1.54654) //向上取整 2
Math.floor(1.545) //向下取整 1
Math.round(1.54) //四舍五入
Math.round(1.4) //四舍五入
Math.random() //0 到1 随机生成一个数
Math.max() //最大值
Math.min() //最小值
Math.pow(x,y) //x的y次幂
Math.sqrt(9) //开方 3
7.JSON
一种轻量级的数据交换格式
易于阅读和编写，同时也易于机器解析和生成，有效地提升网络传输效率
在Java中一切皆对象，任何js支持的类型都可以用json来表示
格式：
对象用{}
数组用[]
所有的键值对用key:value
JSON字符串和JS对象的转化
<script>
"use strcit"
var user = {
name: "xiao",
age:3,
sex:'1'
}
对象转为json字符串
var jsonUser = JSON.stringify(user);
console.log(jsonUser);
json字符串转为对象
var obj = JSON.parse('{"name":"xiao","age":3,"sex":"1"}');
console.log(obj);
</script>
8.面向对象编程
什么是面向对象
类：模板
对象：具体实例
JavaScript中用 通过 子类.proto ==父类；来找到原型对象 proto在JavaScript中称为原型
通过原型对象创建隐式函数、属性
简单来说原型就是在创建对象时给该对象产生一个单独的公共区域
function CreatePerson(name) = {
constructor(name){ //构造函数，用于构造属性
this.naem = name;
}
}
PerSon.prototype.sayName(){
alert(this.name);
}
var sb = new CreatePerson("sb");
sb.sayName();
Class继承构造对象
<script>
var stu = {
name : "name",
hello : function(){
alert("hello");
}
}
console.log(stu.name);
//以上代码是以前的方法
// 以下代码是ES6以后的方法
class student{
constructor(naem){ //构造函数，用于构造属性
this.naem = name;
}
hello(){
alert('hello');
}
}
//创建对象时
let xiaoming = new student("xiaoming")
//使用extends继承原型（父类）对象
class xiaoxuesheng extends student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myName(){
alert("我TM是"+this.name)
}
}
var xiaohong =new xiaoxuesheng("小红",'女');
//工厂方法创建对象
function createperson(name,age,sex){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sex = sex;
obj.sayName = function(){
alert(this.name);
}
return obj;
}
var obj1 = createperson("小明",1,0);
var obj2 = createperson("小红",2,1);
var obj3 = createperson("小成",3,0);
alert(JSON.stringify(obj1));
//构造函数创建对象
function createperson(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.sayName = function(){
console.log(this.name);
}
}
var obj1 = createperson("小明",1,0);
var obj2 = createperson("小红",2,1);
var obj3 = createperson("小成",3,0);
alert(JSON.stringify(obj1));
</script>
原型链：在JavaScript中每个函数都有一个prototype属性，这个属性指向函数的原型对象
9.操作BOM对象-重点
BOM：浏览器对象模型
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
251内高
window.outerHeight
1057外高
window.setInterval(fun(){},1000 ); //定时器 fun函数每1000毫秒执行一次 会反复执行
window.clearInterval(定时器的唯一标识); //关闭定时器 定时器的唯一标识var a = setInterval(fun(){},1000)
window.setTimeout(fun(){},1000 ); //延时调用 只会执行一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#movediv{
width: 100px;
height: 100px;
background: pink;
border: 1px skyblue solid;
position: absolute;
}
</style>
<script>
window.onload = function(){
document.onkeydown =function(e){
var div = document.getElementById("movediv");
e = e||window.e;
var speed = 10;
if(e.ctrlKey){
speed = 50;
}else{
speed = 10;
}
console.info(e.keyCode);
var time = setInterval(function(){ //开启定时器 让方块移动的事件没30毫秒执行一次
clearInterval(time); //关闭定时器 否则将反复启动多个定时器
switch(e.keyCode){
case 37:
console.log("向左");
div.style.left = div.offsetLeft -speed+"px";
break;
case 38:
console.log("向上");
div.style.top = div.offsetTop -speed+"px";
break;
case 39:
console.log("向右");
div.style.left = div.offsetLeft +speed+"px";
break;
case 40:
console.log("向下");
div.style.top = div.offsetTop +speed+"px";
break;
}
},30)
}
};
</script>
</head>
<body>
<div id="movediv">
</div>
</body>
</html>
Navigator（浏览器信息）
Navigator封装了浏览器信息
navigation.appName
undefined
navigator.appName //浏览器名字
'Netscape'
navigator.appVersion //版本
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36'
navigator.userAgent //浏览器代理
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36'
//
screen（屏幕信息）
代表屏幕
screen.width
1920
screen.height
1080
location(URL信息)–重要
location 代表当前页面的URL信息
location = "url" //跳转到url
host: "www.bilibili.com" //主机名
hostname: "www.bilibili.com"
href:"https://www.bilibili.com/video/BV1YW411T7GXp=55&spm_id_from=pageDriver&vd_source=18829613b4479a8ea50fddbca3270560"
localtion.reload(true) //重新加载网页
localtion.replace(url) //替换当前文档 无历史
search: "?p=55&spm_id_from=pageDriver&vd_source=18829613b4479a8ea50fddbca3270560"
localtion.toString()
localtion.assign('http://www.baidu.com') //加载新的网站有历史
history
history.back() //网页后退
history.forword() //网页前进
history.go(1) //加载到某个历史页面 2向前2个页面跳转 -2向后2个页面跳转
history.length() //当前历史访问的页面数
10.操作DOM对象-重点
核心
DOM：文档对象模型
document
document.title
'55.尚硅谷_JS基础_返回值的类型_哔哩哔哩_bilibili'
document.title='小蔡还没睡' //修改页面标题
'小蔡还没睡'
document.getElementById("id名"); /通过id找到元素
document.getElementByname("标签名"); / 通过id找到元素
document.cookie; /获取当前网页的Cookie
cookie不可泄露，浏览器cookie泄露后他人可登录我们的账号码
操作：
- 更新DOM节点 ---->更改各个标签
- 遍历DOM节点
- 删除DOM节点
- 增加DOM节点
//获得dom节点的方法
<body>
<div id="father">
<h1>1</h1>
<h2 class="two">2</h2>
<h3 id="three">3</h3>
</div>
<script>
document.getElementsByTagName('h1');
document.getElementsByClassName("two");
document.getElementById("three");
var father = document.getElementById('father');
var children = father.children; //这里把script标签放在header里的话会无法获得对象,放在body最底下就可以
father.firstChild;
father.lastChild;
</script>
</body>
1.更新DOM节点
var h3 = document.getElementByTagName("h3");
var h3 = document.getElementsByName("name");
var h3 = document.getElementsById("id"); //更新文本
h3.innerText = '5';
'5'
h3.innerHTML = '<h1>5</h1>'; //更新样式
'<h1>5</h1>'
h3.style.color = 'red';
"red"
可以通过document获取网站组件样式
document.getElementsByClassName("bg s_btn");
HTMLCollection [input#su.bg.s_btn, su: input#su.bg.s_btn]
2.删除节点
删除步骤：先找到父节点，再删除子节点
父节点
var h3 = document.getElementById('three');
var father = h3.parentElement;
father.removeChild(three)
<h3 id=•"three">•3•</h3>•
子节点
var chile = father.children;
3.节点详解
4.事件
就是用户和我们浏览器之间的交互行为，比如：按钮、鼠标移动、点击输入框….
<body>
<div id="father">
<button id="btn1">please push me</button>
</div>
<script>
"use strict"
var btn = document.getElementById("btn1");
btn.ondblclick = function(){ //单击响应函数
alert("你~~~~干嘛~~~~~哎哟~~~~~~~")
}
</script>
</body>
5.文档加载
onload事件会在整个页面加载完成后才触发
window.onload = function(){ //写在window.onload下可以确保文档加载完毕再运行
var btn = document.getElementById("btn1");
btn.ondblclick = function(){ //单击响应函数
alert("你~~~~干嘛~~~~~哎哟~~~~~~~")
}
}
6.Button图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0%;
padding: 0%;
}
#outerimg{
width: 140px;
margin: 50px auto;
padding: auto;
border: 1px solid lightblue;
text-align: center;
}
#info{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: pink;
}
</style>
<script>
window.onload = function(){
var imgArr = ["img/1.png","img/2.png","img/3.png"];
var infoArr = ["第一张图片","第二张图片","第三张图片"];
var img = document.getElementsByTagName("img")[0];
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var page = 0;
var info = document.getElementById("info");
info.innerText= "第一张图片";
prev.onclick =function(){
if(page>0){
page--;
}else{
page = imgArr.length-1;
}
img.src = imgArr[page];
info.innerText= infoArr[page];
};
next.onclick =function(){
if(page<imgArr.length-1){
page++;
}else{
page = 0;
}
img.src = imgArr[page];
info.innerText= infoArr[page];
};
};
</script>
</head>
<body>
<div id="outerimg">
<p id="info"></p>
<img src="img/1.png" alt="黄色">
<br>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
7.全选操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var Idclick = function(btn , fun){
var btn1 = document.getElementById(btn);
btn1.onclick = fun;
};
var items = document.getElementsByName("items");
var items1 = document.getElementsByName("items1");
// 全选按钮
var fun1 = function(){
items1[0].checked = true;
for (let i in items) {
items[i].checked = true;
}
};
Idclick("all",fun1);
// 全不选按钮
var fun2 = function(){
items1[0].checked = false;
for (let i in items) {
items[i].checked = false;
}
};
Idclick("no",fun2);
// 反选按钮
var fun3 = function(){
var items = document.getElementsByClassName("check");
for (let i in items) {
if(items[i].checked){
items[i].checked = false;
}
else{
items[i].checked = true;
}
}
};
Idclick("other",fun3);
// 提交按钮
var fun4 = function(){
for (let i=0;i < items.length;i++) {
if(items[i].checked){
console.log(items[i].value);
alert(items[i].value);
}
}
};
Idclick("summit",fun4);
// 全选/全不选框
var fun5 = function(){
for (let i=0;i < items.length;i++) {
if(items1[0].checked){
items[i].checked = true;
}else{
items[i].checked = false;
}
}
};
Idclick("checkdAllBox",fun5);
for(let i=0;i < items.length;i++) {
items[i].onclick = function(){
for (let j=0;j < items.length;j++) {
console.log(items[j].value);
console.log(items[j].checked);
if(items[j].checked == false){
items1[0].checked = false;
break;
}else{
items1[0].checked = true;
}
}
};
}
};
</script>
</head>
<body>
<form method="POST">
<div>
两年半能学会什么？
<br>
<input class="check" name="items" type="checkbox" id="sing" value="唱歌"/>唱歌
<input class="check" name="items" type="checkbox" id="dance" value="跳舞"/>跳舞
<input class="check" name="items" type="checkbox" id="RAP" value="RAP"/>RAP
<input class="check" name="items" type="checkbox" id="basketball" value="篮球"/>篮球
<br>
<input class="check" name="items1" type="checkbox" id="checkdAllBox" value="全选/全不选"/>全都会/全不会
<br>
<input type="button" id="all" value="全选">
<input type="button" id="no" value="全不选">
<input type="button" id="other" value="反选">
<input type="button" id="summit" value="提交">
</div>
</form>
</body>
</html>
8.Dom更多操作
var body = document.body; //body标签
var html = document.documentElement; //html标签
var all = document.all; //所有元素标签
document.querySelector(".check li"); //类似css元素选择器找到对应的标签，只会找到第一个
document.querySelectorAll(".check li"); //类似css元素选择器找到对应的标签，能找到全部
//dom增删改查
var liText = document.createTextNode("广州"); //创建一个文本节点
var li = document.createElement("li"); //创建一个li节点
li.appendChild(liText); //向父节点添加一个子节点
父节点.removeChild("li"); //删除一个li节点
父节点.replaceChild("li","ul"); //修改一个li节点
实现增删改查
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#employeeTable,tr,th{
border: 1px black solid;
}
#employeeTable{
margin: 20px auto;
}
#form{
width: 300px;
height: auto;
border: 1px black solid;
margin: 100px auto;
text-align: center;
}
</style>
<script>
"use strict"
window.onload = function(){
var allA = document.getElementsByTagName("a");
var delAll = function(){ //删除键的绑定方法
var tr = this.parentNode.parentNode;
if(confirm("Are You Read?")) //confirm用于弹出一个带有取消按钮的提示框
tr.parentNode.removeChild(tr);
return false; //超链接取消跳转
};
for(var i=0;i<allA.length;i++){
allA[i].onclick = delAll;
};
var summit = document.getElementById("summitbutton");
var table = document.getElementById("employeeTable");
summit.onclick = function(){
var infor = document.getElementsByClassName("infor");
var tr = document.createElement("tr"); //创建tr
for(var i = 0 ;i<infor.length;i++){
tr.innerHTML = tr.innerHTML+"<th>"+infor[i].value+"</th>"; //注入文本
};
var tbody = table.querySelector("tbody"); //获取tabody
tr.innerHTML = tr.innerHTML+ "<th><a href='javascript:;'>Delete</a></th>";//加入a标签
var a = tr.getElementsByTagName("a")[0];
a.onclick = delAll;
tbody.appendChild(tr); //向tbody插入tr(一列)
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<th>111</th>
<th>111</th>
<th>111</th>
<th><a href="deleteEmp?id=001" class = "deleteemp">Delete</a></th>
</tr>
<tr>
<th>222</th>
<th>222</th>
<th>222</th>
<th><a href="deleteEmp?id=001">Delete</a></th>
</tr>
</table>
<div id="form">
<h4>添加新员工</h4>
<form method="POST">
name: <input class="infor" type="text" name="text" id="text" /><br>
email: <input class="infor" type="email" name="email" id="email" /><br>
salary: <input class="infor" type="text" naem="salary" id="salary"/><br><br>
<input type="button" id="summitbutton" value="提交"/> <br><br>
</form>
</div>
</body>
</html>
9.使用domc操作css
js修改的style都是内联样式，无法读取样式表中的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var btn = document.getElementById("boxbtn");
btn.onclick = function(){
var box = document.getElementById("box1");
box.style.background = "red";
}
};
</script>
<style>
#box1{
width: 100px;
height: 100px;
background: aliceblue;
}
</style>
</head>
<body>
<button id="boxbtn">改变底色</button>
<div id="box1">
</div>
</body>
</html>
通过.getcomputedStyle()可以获得当前生效的样式
其他样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var btn = document.getElementById("boxbtn");
btn.onclick = function(){
var box = document.getElementById("box1");
box.style.background = "red";
console.log(box.clientHeight); //返回元素当前的可见宽（width）高**数值**
console.log(box.offsetParent); //返回距离当前元素最近的祖先元素，如果没有，则返回body
console.log(box.offsetLeft); //返回距离当前元素最近的祖先元素的水平偏移量
console.log(box.offsetTop); //返回距离当前元素最近的祖先元素的垂直偏移量
console.log(box.scrollHeight); //返回元素当前可以的滚动的最大宽（width）高**数值**
console.log(box.scrollLeft); //返回水平滚动条滚动的距离
console.log(box.scrollTop); //返回垂直滚动条滚动的距离
}
};
</script>
<style>
#box1{
width: 200px;
height: 200px;
background: aliceblue;
overflow: auto;
}
#box2{
width: 100px;
height: 400px;
background: red;
}
</style>
</head>
<body>
<button id="boxbtn">改变底色</button>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
滚动操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var rule = document.getElementById("divrule");
var iputs = document.getElementsByTagName("input");
rule.onscroll = function(){
console.log("ss");
//整个滚轮的高度 滑动的垂直距离 当前可见的高度
if(rule.scrollHeight - rule.scrollTop < rule.clientHeight + 1){
//谷歌不能用的是因为那两个值只是接近但不相等，试一下这个条件info.scrollHeight - info.scrollTop < info.clientHeight + 1
iputs[0].disabled = false;
}
iputs[0].onclick = function(){
iputs[1].disabled = false;
}
};
};
</script>
<style>
#divrule{
width: 300px;
height: 500px;
overflow: auto;
background: aliceblue;
}
</style>
</head>
<body><h3>亲爱的</h3>
<div id="divrule">
<p id="rule">请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册
请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册
请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册
请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册
请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册
请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册
请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册
请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册
请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册
请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 请阅读协议，否则无法注册 </p>
</div>
我已仔细阅读<input type="checkbox" id="rluecheck" disabled ><br>
<input style="text-align: center;" type="submit" id="rluesummit" disabled value="提交">
</body>
</html>
鼠标移动定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#divGPS1,#divGPS2{
border: 1px solid black;
width: 400px;
height: 200px;
text-align: center;
}
</style>
<script>
window.onload = function(){
var d1 = document.getElementById("divGPS1");
d1.onmousemove = function(event){ //event这里event代表函数调用时自动传入的参数
//与arguments有异曲同工之妙
var d2 =document.getElementById("divGPS2");
var x = event.clientX; //通过事件获得当前鼠标所在的X坐标 PageX是相对页面
var y = event.clientY; //Y坐标 event.PageY对象是相对可视页面
d2.innerText = 'x='+x+'px y='+y+'px';
}
}
</script>
</head>
<body>
<div id="divGPS1">
</div><br>
<div id="divGPS2">
</div>
</body>
</html>
event.target //表示出发事件的对象 用于判断被触发标签是否是我们需要的
事件监听器
浏览器不兼容
事件传播U型传播
拖拽练习
鼠标和组件的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#boxt{
background: red;
width: 100px;
height: 100px;
position: absolute;
}
#boxt2{
background: skyblue;
width: 100px;
height: 100px;
position: absolute;
left: 200px;
}
</style>
<script>
window.onload = function(){
var d = document.getElementById("boxt");
d.onmousedown = function(e){ //当鼠标点击时 事件开始
var ol = e.clientX -d.offsetLeft; //用鼠标的坐标减去标签距离最近父标签的距离
var ot = e.clientY -d.offsetTop;
document.onmousemove = function(e){ //移动鼠标时 事件持续
e = e || window.e;
var X = e.clientX;
var Y = e.clientY;
d.style.left = X-ol+"px"; //-ol让鼠标居于点击时的位置
d.style.top = Y-ot+"px";
};
document.onmouseup = function(e){ //鼠标松开时，事件结束
document.onmousemove = null; //取消事件
document.onmouseup = null;
}
}
}
</script>
</head>
<body>
<div id="boxt">
</div>
<div id="boxt2">
</div>
</body>
</html>
滚轮事件
<div id="box" style=" width: 400px;height: 1500px;border: solid 1px black;">
1
</div>
<script>
let box = document.getElementById("box");
window.addEventListener("wheel",function(e){
let evt = e || window.event;
evt.preventDefault();
if( evt.deltaY>0 ){
console.info("向下滚动");
}else{
console.info("向上滚动");
}
console.info( evt.type, evt.deltaX,evt.deltaY,evt.deltaZ );
},{ passive: false });
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#srcoll2{
width: 300px;
height: 1900px;
overflow: auto;
border: 1px solid black;
background: aliceblue;
}
</style>
<script>
window.onload = function(){
var scroll2 = document.getElementById("srcoll2");
var scrolldiv = document.getElementById("srcolldiv");
document.onwheel = function(e){
let evt = e || window.event;
evt.preventDefault(); //取消浏览器默认行为
console.log(evt.wheelDelta);
console.log(scroll2.style.height);
scroll2.style.height = scroll2.clientHeight -evt.wheelDelta+"px";
console.log(scroll2.style.height);
};
}
</script>
</head>
<body>
<div id="srcoll2">
</div>
</body>
</html>
键盘事件
document.onkeydown //按键按下
document.onkeyup //按键松开
event.keyCode //按键的编码
event.ctrlKey //Ctrl键被按下为true
event.altKey //ALT键被按下为true
event.shiftKey //Shift键被按下为true
移动方块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#movediv{
width: 100px;
height: 100px;
background: pink;
border: 1px skyblue solid;
position: absolute;
}
</style>
<script>
window.onload = function(){
document.onkeydown =function(e){
var div = document.getElementById("movediv");
e = e||window.e;
console.info(e.keyCode);
switch(e.keyCode){
case 37:
console.log("向左");
div.style.left = div.offsetLeft -10+"px";
break;
case 38:
console.log("向上");
div.style.top = div.offsetTop -10+"px";
break;
case 39:
console.log("向右");
div.style.left = div.offsetLeft +10+"px";
break;
case 40:
console.log("向下");
div.style.top = div.offsetTop +10+"px";
break;
}
}
};
</script>
</head>
<body>
<div id="movediv">
</div>
</body>
</html>
