js属于编写运行在浏览器上的脚本语言
采用ECMAScript语法,来操作BOM及DOM
操作BOM:浏览器对象模型
操作DOM:文档对象模型
如:使用浏览器的历史记录,使用浏览器的弹出框,修改页面内容,修改页面样式,响应用户交互事件等
js引入:
1.行间式:存在于行间事件中
<div id="div" onclick="this.style.color='red'">文本内容</div>
2.内联式:存在于页面script标签中
<script type="text/javascript">div.style.color="red";</script>
3.外联式:存在于外部JS文件中,通过script标签src属性链接
由src链接外部js的script标签相当于单标签,会自动屏蔽标签内部代码块
index.js文件
body.style.color = 'red';
index.html文件
<script src="./js/index.js"></script>
变量的定义:
关键字 变量名 = 变量值;
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(){}
操作页面文档:
js
1.通过选择器获取页面元素对象(指定的标签)
2.为该对象绑定事件
3,通过事件中的功能操作元素对象(修改内容:innerText|innerHTML 修改样式 修改类名)
其中修改的样式是行间式,优先级高于所有内联外联样式(未设!important)
当修改类名时,会丢失之前类名下的属性,可以在原类名基础上增加类名.
多类名之间用空格隔开,所有做字符串拼接时一定需要添加空格
清除类名就是将类名置空