JavaScript
一.引入方式
1.script标签内写代码:
在head标签里面可以写, 在body里面也可以写
<script>
# 在这里写你的代码
console.log("骑士计划!")
# f12 打开浏览器的调试窗口, 然后在console这个调试台就能看到这个内容
alert("骑士计划!")
# 这个是浏览器窗口一打开咱们这个文件, 就弹出一个窗口
<script>
2.引入额外的js文件:
<script src="myscript.js"></script>
二.JavaScript语言规范
1.注释
// 这是单行注释
/*
这是多行
注释
*/
2.结束符
JS中的语句要以分号(;)为结束符. 也就是说和缩进没关系
3.变量声明
JavaScript 的变量名可以使用 _ , 数字, 字母, $组成, 不能以数字开头
声明变量使用 var + 变量名 的格式来进行声明
var name = "Alex";
/* 也可以分两步, 声明变量var name; 然后name = "alex", 但是通常我们都是一步写完
var age = 18;
注意:
变量名是区分大小写的. 推荐使用驼峰式命名规则. 首字母大写. 保留字(关键字)不能用作变量名
三.JavaScript数据类型
1.JS拥有动态类型
var x;
# 此时 x 是undefined 静态语言比如c:创建变量的时候要指定变量的类型.
var x = 1;
# 此时 x 是数字.
var x = "Alex";
# 此时 x 是字符串.
2.数值(Number)
JS不区分整型和浮点型, 只有一种数字类型
var a = 12.34;
var b = 20;
var c = 123e5; //12300000
var d = 123e-5 //0.00123
还有一种NaN, 表示不是一个数字(Not a Number), 也就是说是一个值, 但不是数字.
# 转换成数值类型
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN, 代表非数字值的特殊值. 该属性用于指示某个值不是数字
# 转换成浮点数
parseFloat("123.456") //返回123.456
3.类型转换
布尔 有内容或0true
4.字符串(String)
var a = "Hello";
var b = "wworld";
var c = a + b;
console.log(c); // 得到Helloworld
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substr(from,length) | 截取字符串 |
| .substring(from, to) | 根据索引获取子序列，不包括尾 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
# 返回长度
var a = "asdfghjk"
a.length; // 8
# 移除两侧空白
var a = " asdfghjk "
a.trim(); // "asdfghjk"
# 移除左边/右边空白
var a = " asdf"
var b = "ghjk "
a.trimLeft(); // "asdf"
b.trimRight(); // "ghjk"
# 返回第n个字符
var a = "asdfghjk"
a.charAt(n) # n 类似索引, 从0开始, 超过最大值返回空字符串
# 字符串拼接
var a = "asdf"
var b = "ghjk"
a.concat(b) // "asdfghjk"
# 子序列位置
var a = "asdf"
a.indexOf("d",1) // 2
# 从索引 1 开始 查找字符串"d",如果找不到就返回 -1, 找到返回索引值
# 根据索引获取子序列
var a = "asdf"
a.substring(1,3) // "sd"
# 不支持负数, 所以一般不使用, 了解即可
# 切片
var a = "asdf"
a.slice(1,3) //"sd"
# 全部变小写/大写
var a = "asDF"
a.toLowerCase() //"asdf"
a.toUpperCase() //"ASDF"
# 分割
var a = "asdf"
a.split("s") //["a", "df"]
a.split("s",1) //["a"]
5.布尔值
var a = true;
var b = false;
数据类型都有布尔值: '',0,null,undefined,NaN...都是false
6.null和undefined
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
var a; -- undefined
null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。
7.object类型
var a = 'xx';
var b = new String('oo');
8.数组
var a = [11,22,33];
typeof a; -- "object"
var b = new Array([11,22,33,44]);
typeof b; -- "object"
for (var i in a)
{
console.log(i)
}
数组常用方法
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
var a = [11,22,33];
索引取值 -- a[0];
数组长度 -- a.length;
尾部追加 -- a.push(44);
尾部删除 -- a.pop()
示例:
var a = [11, 22, 33, 44];
var b = a.pop();
结果:
a -- [11, 22, 33]
b -- 44
头部添加 -- a.unshift('aa')
示例:
var a = [11, 22, 33];
a.unshift('aa')
a -- ["aa", 11, 22, 33]
头部删除 -- shift()
示例:
var a = ["aa", 11, 22, 33];
a.shift() -- 'aa'
a -- [11, 22, 33];
切片 -- slice()
var b = a.slice(0,3);
b -- [11, 22]
反转 reverse()
var a = [11,22,33];
a.reverse()
a -- [33,22,11]
数组元素拼接 join
示例:
var a = ['aa','bb','cc'];
var b = a.join('_');
b -- "aa_bb_cc";
数组合并 concat
var a = ["aa", "bb", "cc"];
var b = [11,22];
var c = a.concat(b);
c -- ["aa", "bb", "cc", 11, 22];
排序 sort 比较尬
示例:
var a = [12,3,25,43];
对a进行升序排列:
1 定义函数
function sortNumber(a,b){
return a - b
};
2 var b = a.sort(sortNumber)
b -- [3, 12, 25, 43]
sort 规则:
如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
删除 .splice()
示例:
var a = ['aa','bb',33,44];
单纯删除:a.splice(1,1)
a -- ["aa", 33, 44]
删除在替换新元素:
var a = ["aa", 33, 44];
a.splice(0,2,'hello','world');
a -- ["hello", "world", 44];
三个参数介绍:
参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)
自定义对象 -- python字典
索引取值
var a = {'name':'alex','age':48};
键可以不加引号:var a = {name:'alex',age:48};
a['age']; -- 48
a.age; -- 48
类型查询
四.运算符
1.算数运算符
+ - * / % ++ -- i++,是i自加1，i--是i自减1 i++的这个加1操作优先级低，先执行逻辑，然后再自加1，而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑
示例:
var a = 100;
a++;或者++a; -- 101 a自增1
a++和++a的区别,示例:
var a = 102;
a++ == 102; -- true
a -- 103;
++a == 103; -- false
a -- 104;
2.比较运算符
> >= < <= != == === !==
==(弱等于)和===(强等于)两者的区别:
示例:
var a = 11;
var b = '11';
a == b -- true
a === b; -- false
3.逻辑运算符
&& || ! #and，or，非（取反）!null返回true
示例:
var a = true;
var b = true;
var c = false;
a && b; -- true
a && c; -- false
a || c; -- true
!c; -- true
4.赋值运算符
= += -= *= /=
示例: n += 1其实就是n = n + 1
五.流程控制
1.if判断
简单if-else判断
var a = 4;
if (a > 5){
console.log('a大于5');
}
else{
console.log('小于5');
};
多条件判断
var a = 10;
if (a > 5){
console.log("a > 5");
}else if(a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
2.switch 切换
示例:
var a = 1;
switch (a++){ //这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break，如果没有加break，还会继续往下判断
case 1:
console.log('等于1');
break;
case 3:
console.log('等于3');
break;
default: case都不成立,执行default
console.log('啥也不是!')
}
3.for循环
for (var i=0;i<10;i++) { /*就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工作了，回头可以拿别人的电脑试试~~ */
console.log(i);
}
循环数组：
var l2 = ['aa','bb','dd','cc']
方式1
for (var i in l2){
console.log(i,l2[i]);
}
方式2
for (var i=0;i<l2.length;i++){
console.log(i,l2[i])
}
循环自定义对象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
console.log(i,d[i],d.i) #注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。
}
4.while循环
var i = 0;
var a = 10;
while (i < a){
i++;
console.log(i);
if (i>5){
continue;
break;
}
};
5.三元运算
var c = a>b ? a:b;
六.函数
1.定义函数
普通函数
function f1(){
console.log('111');
}
f1(); 执行函数
带参数的函数
function f1(a,b){
console.log('111');
}
f1(1,2);
带返回值的函数
function f1(a,b){
return a+b;
}
f1(1,2); -- 3
返回值不能有多个
function f1(a,b){
return a,b;
}
f1(1,2); -- 2
function f1(a,b){
return [a,b]; 想要多个返回值,需要换一种数据类型
}
f1(1,2); -- [1, 2]
匿名函数:
var f1 = function(){
console.log('111');
}
f1();
自执行函数
(function(a,b){
console.log(a+b);
})(1,2);
2.函数的全局变量和局部变量
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是*全局*变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
3.作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f();
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret();
闭包:
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
七.面向对象
function Person(name){
this.name = name;
};
var p = new Person('taibai');
console.log(p.name);
Person.prototype.sum = function(a,b){ //封装方法
return a+b;
};
p.sum(1,2);
3
1.date对象
//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString()); //当前2时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString())
常用方法
var d = new Date();
使用 d.getDate()
//getDate() 获取日
//getDay () 获取星期 ，数字表示（0-6），周日数字是0
//getMonth () 获取月（0-11,0表示1月,依次类推）
//getFullYear () 获取完整年份
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜),时间戳
2.json对象
var a = {"name":"太白", "age":89}
# 序列化:
var b = JSON.stringify(a)
# 反序列化:
var c = JSON.parse(b)
3.RegExp对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
# 简写方式:
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
reg2.test("a468468684")
# true
reg2.test("s1")
# false
# 坑:
reg2.test();
# 什么也不填写,会默认成reg2.test('undefined');如果'undefined'满足你的正则要求,就返回true
# 字符串使用正则是的一些方法:
var s2 = "hello world";
s2.match(/o/);
# 匹配元素
# ["o", index: 4, input: "hello world", groups: undefined]
s2.match(/o/g);
# 加上g是全局匹配
# (2) ["o", "o"]
s2.search(/o/);
# 找符合正则规则的字符串的索引位置
# 4
s2.split(/o/);
# 用符合正则的字符串进行分割
# (3) ["hell", " w", "rld"]
var s3 = 'Alex is A xiaosb';
s3.replace(/a/gi,'DSB');
# 替换,g全局替换,i不区分大小写
# "DSBlex is DSB xiDSBosb"
# 正则加g之后,进行test测试需要注意的问题
var reg3 = /a/g;
var s1 = 'alex is a xiaosb';
reg3.lastIndex
# 0
reg3.test(s1);
# true
reg3.lastIndex
# 1
reg3.test(s1);
# true
reg3.lastIndex
# 9
reg3.test(s1);
# true
reg3.lastIndex
# 13
reg3.test(s1);
# false
# 置零:
reg3.lastIndex = 0
4.Math对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="老板买吗" id="d1">
<script>
let in_event=document.getElementById('d1');
in_event.onfocus=function () {
in_event.value=''
}
in_event.onblur=function () {
in_event.value='No No'
}
</script>
</body>
</html>
Math.abs(x)
# 返回数的绝对值。
Math.exp(x)
# 返回 e 的指数。
Math.floor(x)
# 小数部分进行直接舍去。
Math.log(x)
# 返回数的自然对数（底为e）。
Math.max(x,y)
# 返回 x 和 y 中的最高值。
Math.min(x,y)
# 返回 x 和 y 中的最低值。
Math.pow(x,y)
# 返回 x 的 y 次幂。
Math.random()
# 返回 0 ~ 1 之间的随机数。
Math.round(x)
# 把数四舍五入为最接近的整数。
Math.sin(x)
# 返回数的正弦。
Math.sqrt(x)
# 返回数的平方根。
Math.tan(x)
# 返回角的正切。
八.BOM操作
BOM 浏览器对象模型 Browser Object Model js代码操作浏览器
DOM 文档对象模型 Document Object Model js代码操作标签
# window对象
window对象指代的就是浏览器窗口
window.innerHeight 浏览器窗口的高度 900
window.innerWidth 浏览器窗口的宽度 1680
window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px') # 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
# 扩展父子页面通信window.opener() 了解
window.close() 关闭当前页面
window子对象
window.navigator.appName "Netscape"
window.navigator.appVersion "5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
window.navigator.platform #平台 如果是window的子对象 那么window可以省略不写 "MacIntel"
window.navigator.userAgent 掌握 # 用来表示当前是否是一个浏览器 "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
1.扩展:仿爬措施
1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器
userAgent user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
如何破解该措施 在你的代码中加上上面的user-agent配置即可
2.history对象
window.history.back() 回退到上一页 window.history.forward() 前进到下一页 # 对应的就是你浏览器左上方的两个的箭头
3.location对象(掌握)
window.location.href # 获取当前页面的url
window.location.href = url # 跳转到指定的url
window.location.reload() # 刷新页面 浏览器左上方的小圆圈
4.弹出框
alert('你不要过来啊！！！') * 警告框 undefined
confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')* 确认框 false
confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...') true
prompt('手牌号给我看一下','22号消费888')* 提示框 "来宾三位"
5.计时器相关
setTimeOut() # 一段时间之后执行某个内容,执行一次
# 示例
var a = setTimeout(function f1(){confirm("are you ok?");},3000);
var a = setTimeout("confirm('xxxx')",3000); # 单位毫秒
# 清除计时器
clearTimeout(a);
setInterval() # 每隔一段时间执行一次,重复执行
# 示例
var b = setInterval('confirm("xxxx")',3000);单位毫秒
# 清除计时器
clearInterval(b);
* 过一段时间之后触发(一次) setTimeout
* 每隔一段时间触发一次(循环) setInterval
<script>
function func1() {
alert(123)
}
let t = setTimeout(func1,3000);
// 毫秒为单位 3秒之后自动执行func1函数
clearTimeout(t) // 取消定时任务 如果你想要清除定时任务 需要日前用变量指代定时任务
function func2() {
alert(123)
}
function show(){
let t = setInterval(func2,3000);
// 每隔3秒执行一次
function inner(){
clearInterval(t) // 清除定时器 }
setTimeout(inner,9000) // 9秒中之后触发 }
show()
</script>
九.DOM对象
1.直接查找(必须要掌握)
document.getElementById
# 根据ID获取一个标签
document.getElementsByClassName
# 根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName
# 根据标签名获取标签合集
# 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
</div>
<div class="c1 c2">
div2
</div>
</body>
</html>
# 操作:
var divEle = document.getElementById('d1');
# divEle
# 结果:
<div class="c1" id="d1">
are you ok?
</div>
var divEle = document.getElementsByClassName('c1');
# divEle
# HTMLCollection(2) [div#d1.c1, div.c1.c2, d1: div#d1.c1]
# divEle[0]
# 结果:
<div class="c1" id="d1">
are you ok?
</div>
var divEle = document.getElementsByTagName('div');
# divEle
# HTMLCollection(2) [div#d1.c1, div.c1.c2, d1: div#d1.c1]
# divEle[0]
# 结果:
<div class="c1" id="d1">
are you ok?
</div>
2.间接查找(熟悉)
parentElement # 父节点标签元素
children # 所有子标签
firstElementChild # 第一个子标签元素
lastElementChild # 最后一个子标签元素
nextElementSibling # 下一个兄弟标签元素
previousElementSibling # 上一个兄弟标签元素
# 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
# 操作:
var divEle = document.getElementById('d1');
# 找父级:
divEle.parentElement;
# 结果:
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
# 找儿子们:
divEle.children;
# 结果:
HTMLCollection(3) [span#s1, span#s2, span#s3, s1: span#s1, s2: span#s2, s3: span#s3]
# divEle.children[0]
# 结果:
<span id="s1">span1</span>
# 找第一个儿子:
divEle.firstElementChild;
# 结果:
<span id="s1">span1</span>
# 找最后一个儿子:
divEle.lastElementChild;
# 结果:
<span id="s3">span3</span>
# 找下一个兄弟:
divEle.nextElementSibling;
# 结果:
<div class="c1 c2">
div2
</div>
3.节点操作
通过DOM操作动态的创建img标签
并且给标签加属性
最后将标签添加到文本中
"""
let imgEle = document.createElement('img') # 创建标签
imgEle.src = '111.png' # 给标签设置默认的属性
"111.png"
imgEle
imgEle.username = 'jason' # 自定义的属性没办法点的方式直接设置
"jason"
imgEle
<img src="111.png">
imgEle.setAttribute('username','jason') # 既可以设置自定义的属性也可以设置默认的书写
undefined
imgEle
<img src="111.png" username="jason">
imgEle.setAttribute('title','一张图片')
imgEle
<img src="111.png" username="jason" title="一张图片">
let divEle = document.getElementById('d1')
undefined
divEle.appendChild(imgEle) # 标签内部添加元素(尾部追加)
<img src="111.png" username="jason" title="一张图片">
创建a标签
设置属性
设置文本
添加到标签内部
添加到指定的标签的上面
"""
let aEle = document.createElement('a')
aEle
<a></a>
aEle.href = 'https://www.mzitu.com/'
"https://www.mzitu.com/"
aEle
<a href="https://www.mzitu.com/"></a>
aEle.innerText = '点我有你好看!' # 给标签设置文本内容
"点我有你好看!"
aEle
<a href="https://www.mzitu.com/">点我有你好看!</a>
let divEle = document.getElementById('d1')
undefined
let pEle = document.getElementById('d2')
undefined
divEle.insertBefore(aEle,pEle) # 添加标签内容指定位置添加
<a href="https://www.mzitu.com/">点我有你好看!</a>
额外补充
appendChild()
removeChild()
replaceChild()
setAttribute() 设置属性
getAttribute() 获取属性
removeAttribute() 移除属性
4.innerText与innerHTML
divEle.innerText # 获取标签内部所有的文本
"div 点我有你好看!
div>p
div>span"
divEle.innerHTML # 内部文本和标签都拿到
"div
<a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div>p</p>
<span>div>span</span>
"
divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerHTML = 'hahahaha'
"hahahaha"
divEle.innerText = '<h1>heiheihei</h1>' # 不识别html标签
"<h1>heiheihei</h1>"
divEle.innerHTML = '<h1>hahahaha</h1>' # 识别html标签
"<h1>hahahaha</h1>"
5.获取值操作
# 获取用户数据标签内部的数据
let seEle = document.getElementById('d2')
seEle.value
"111"
seEle.value
"333"
let inputEle = document.getElementById('d1')
inputEle.value
# 如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value # 无法获取到文件数据
"C:\fakepath\02_测试路由.png"
fileEle.files
FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList
fileEle.files[0] # 获取文件数据
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}
6.class、css操作
let divEle = document.getElementById('d1')
undefined
divEle.classList # 获取标签所有的类属性
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]
divEle.classList.remove('bg_red') # 移除某个类属性
undefined
divEle.classList.add('bg_red') # 添加类属性
undefined
divEle.classList.contains('c1') # 验证是否包含某个类属性
true
divEle.classList.contains('c2')
false
divEle.classList.toggle('bg_red') # 有则删除无则添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
# DOM操作操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
"red"
pEle.style.fontSize = '28px'
"28px"
pEle.style.backgroundColor = 'yellow'
"yellow"
pEle.style.border = '3px solid red'
"3px solid red"
7.事件
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
示例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc1 {
width: 100px;
height: 100px;
background-color: red;
}
.cc2 {
background-color: green;
}
</style>
</head>
<body>
<div class="cc1 xx xx2" id="d1">
</div>
<script>
var divEle = document.getElementById('d1');
divEle.onclick = function () {
divEle.style.backgroundColor = 'purple';
}
</script>
</body>
</html>
绑定事件的方式
方式1:
<script>
# 找到标签
var divEle = document.getElementById("d1")
# 给标签绑定事件
divEle.onclick = function() {
divEle.style.backgroundColor = "purple";
}
</script>
方式2:
# 标签属性写事件名称 = 某个函数();
<div class = "cc1 xx xx2" id = "d1" onclick="f1()"></div>
# js里面定义这个函数
<script>
function f1(){
var divEle = document.getElementById("d1")
}
</script>
"""
# 绑定事件的两种方式
<button onclick="func1()">点我</button>
<button id="d1">点我</button>
<script>
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222)
}
</script>
"""
script标签既可以放在head内 也可以放在body内
但是通常情况下都是放在body内的最底部
# 等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222)
}
}
事例
1.开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width:400px;
height: 400px;
border-radius: 50%;
}
.bk_ground_green{
background-color: chartreuse;
}
.bk_ground_red{
background-color: firebrick;
}
</style>
</head>
<body>
<div id="d1" class="c1 bk_ground_green bk_ground_red"></div>
<button id="d2" class="c2">开关</button>
<script>
let btmEle=document.getElementById('d2')
let divcoler=document.getElementById('d1')
btmEle.onclick=function () {
divcoler.classList.toggle('bk_ground_red')
}
</script>
</body>
</html>
2.input框获取焦点
3.展示当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" id="d1">
</div>
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
let input_1=document.getElementById('d1')
let but_1=document.getElementById('b1')
let but_2=document.getElementById('b2')
let t=null
function showtime() {
now_time=new Date()
input_1.value=now_time.toLocaleString()
}
but_1.onclick=function () {
if(!t)
{
t= setInterval(showtime,100)
}
}
but_2.onclick=function () {
clearInterval(t)
t=null
}
</script>
</body>
</html>
4.模拟省市选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="d1"></select>
<select name="" id="d2"></select>
<script>
data={
"内蒙古":["巴彦淖尔"," 鄂尔多斯","包头"],
"山东":["济南"," 潍坊","烟台"],
"上海":["浦东"," 静安","黄埔"],
"北京":["南山"," 宝安","福田"]
}
let sec_1=document.getElementById('d1')
let sec_2=document.getElementById('d2')
for (let key in data)
{
let opt1=document.createElement('option')
opt1.innerText=key
opt1.value=key
sec_1.append(opt1)
}
sec_1.onchange=function () {
let pro = sec_1.value
let citylist = data[pro]
// ["济南", " 潍坊", "烟台"]
sec_2.innerHTML=''
for (let i = 0; i < citylist.length; i++) {
city = citylist[i]
let opt2 = document.createElement('option')
opt2.innerText = city
opt2.value = city
sec_2.append(opt2)
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号