前端第六天

js属于编写运行在浏览器上的脚本语言

采用ECMAScript语法,来操作BOM及DOM

操作BOM:浏览器对象模型

操作DOM:文档对象模型

如:使用浏览器的历史记录,使用浏览器的弹出框,修改页面内容,修改页面样式,响应用户交互事件等

js引入:

1.行间式:存在于行间事件中

2.内联式:存在于页面script标签中

3.外联式:存在于外部JS文件中,通过script标签src属性链接

由src链接外部js的script标签相当于单标签,会自动屏蔽标签内部代码块

index.js文件

body.style.color = 'red';

index.html文件

变量的定义:

关键字变量名 = 变量值;

var num = 10;

命名规范:

由数字字母,_,$组成,不能以数字开头(可以包含中文字符)区分大小写,不能出现关键字及保留字

了解:

const num = 10;(常量)

查看变量值的方式:

print(num);调用浏览器使用打印机

弹出框查看:alert(num);

浏览器控制台查看:console.log(num);

将内容写到页面:document.write(num);

四种调试方式:

alert()

console.log()

document.write()

浏览器断点调试

三种弹出框:

alert():普通弹出框

confirm:确认框

prompt:输入框

数据类型:

数字类型Number:var a = 10;

字符串类型String:var a = "sb";

布尔类型boolean:var a = true;

未定义类型undefined:var a = undefined;

函数类型:var a = function(){};

对象类型Object:var a = {};

空对象Null:var a = null;

typeof()可以查看数据类型

引用类型:

Object:var obj = {};(可以被视为字典)

Function:var func = function(){};

Null:var n = null;

数组类型:Array:var a =new Array(1,2,3);使用语法糖方式可省略为var a = (1,2,3)

事件对象:var a = new Date();(默认为当前时间)

// a = new Date("2019-3-1 12:00:00"); // 设定的时间
console.log(a, typeof(a));
var year = a.getFullYear();
console.log(year)
console.log(a.getDay()) // 周几
console.log(a.getMonth()) // 月份(从0)
console.log(a.getDate()) // 几号

正则类型:

var re = new RegExp('\\d{3}','g');

var res = "ABC23asdv123".match(re)

console.log(res);

可简写为:

re = /[abc]/gi;

res = 'abc'.match(re);

console.log(res);

总结:

正则:/正则语法/ 参数g为全文匹配参数i 表示为不区分大小写

字典中所有的key都是string类型,value可以为任意类型

字典中key可以通过中括号及.语法访问值,当key命名规则不符合css命名规范时只能使用中括号语法

类型转换:

转换为字符串:String()|.toString()|" "+

转数字:Number(a)|parseFloat()|parseInt()|

转布尔值:Boolean(a)

非数字:NaN;

运算符:

算数运算符: + - * / % ++ --;

赋值运算符:+= -= *= /= %=;

比较运算符:> < >= <= == === != !==

逻辑运算符: && || !

三目运算符:结果 = 条件表达式 ? 结果1 :结果2;

分支结构:

if(表达式1){}

else if(表达式2){}

...

else{}

循环结构:

for (循环变量1;条件表达式2;循环变量增量3){代码块;}

while(条件表达式){代码块;}

do{代码块;}

while(条件表达式);

break:结束本层循环

continue:结束本次循环进入下一次循环

函数

定义:

function 函数名(参数列表){函数体;}

调用

var res = 函数名(参数列表)

匿名函数需要自调用

(function(形参列表){函数体:})(实参列表);

参数讲解:

1.个数不需要统一

2.可以任意位置具有默认值

3.通过...语法接收多个值

返回值讲解:

1.可以空return操作,用来结束函数

2.返回值可以为任意js类型数据

3.函数最多只能拥有一个返回值

js选择器:

参数采用的是id名或类名或标签名,不需要带符号

id虽然可以重复但是js中无法识别,所以禁止

页面中如果有相同id,则无法匹配任意一个

getElement系列:

只能得到第一个相同id对象,

document.getElementById('id名');

时间绑定函数地址,使用激活事件,就会通过函数地址找到函数主体完成指定功能

document.getElementsByClassName('class名');(结果为数组类型)

document.getElementsByTagName('tag名');(结果为数组类型)

querySelect系列:

document.querySelector('css语法选择器');只能检索到第一个满足条件的标签(元素对象)

document.querySelectorAll('css语法选择器');

JS操作页面内容:

innerText:普通标签内容(自身文本与所有子标签文本)

innerHTML:包含标签在内的内容(自身文本及子标签的所有)

JS操作页面样式:

行间式:div.style.backgroundColor = 'red';

计算后样式:(内联式和外联式书写的样式都叫计算后样式)

内联或外联设置的(行间式设置getComputedStyle也能获取到)

getComputedStyle(页面元素对象,伪类);

getPropertyValue('background-color');

类名:

页面元素对象.className = "";//清除类名;

页面元素对象.className = "类名";//设置类名

页面元素对象.className += "类名";//添加类名;

事件:

元素.on事件名 = function(){}

box.onclick = function(){}

操作页面文档:

1.通过选择器获取页面元素对象(指定的标签)

2.为该对象绑定事件

3,通过事件中的功能操作元素对象(修改内容:innerText|innerHTML 修改样式修改类名)

其中修改的样式是行间式,优先级高于所有内联外联样式(未设!important)

当修改类名时,会丢失之前类名下的属性,可以在原类名基础上增加类名.

多类名之间用空格隔开,所有做字符串拼接时一定需要添加空格

清除类名就是将类名置空

猜你喜欢