1、JS概念:JavaScript:运行在浏览器端的一个解释型(不检查错误,直接运行,碰到错误就停止)弱类型(数据类型由数据来决定)面型对象脚本语言。
2、变量和常量 - 以后反复使用的数据都要先提前保存到变量中,以后使用变量名,相当于就是再使用变量的值
*变量:值可以改变的
var 变量名=值;
常量:一旦创建后,值不允许再次修改
const 常量名=值;
3、算术运算符:+ - * / %
%:取余 - 5%3 == 2
4、数据类型:
原始类型:Number/String/Boolean/Undefined/Null
引用类型:11个对象
5、数据类型的转换
1、算术运算符的隐式转换
1、默认转为数字,在运算
2、+运算,碰上一个字符串,则为拼接
3、-*/%,字符串也可以转为数字,前提是纯数字组成的字符串,包含非数字字符,则为NaN
true -> 1
false -> 0
undefined -> NaN
null -> 0
"1000" -> 1000
"1000x" -> NaN
4、NaN:不是一个数字,但是确实是数字类型,不是一个有效数字
1、参与任何算术运算结果都是NaN
2、参与任何比较运算结果都是false,问题,不能用普通的比较运算来判断是不是NaN
解决:!isNaN(x);
true->有效数字
false->NaN
2、强制转换
1、转字符串:var str=x.toString();//页面上的一切数据默认都是字符串类型
//x不能是undefined和null,undefined和null不能使用.
2、转数字:
var num=parseInt/Float(str);
var num=Number(x);//万能的,完全等效于隐式转换,还不如-0 *1 /1 %1
6、函数的基础:提前预定好,以后可以反复使用的代码段
1、创建函数
function 函数名(形参列表,...){
函数体;
}
2、调用函数
函数名(实参列表,...);
elem.οnclick=function(){
函数名(实参列表,...);
}
7、分支结构:根据条件,选择部分代码执行
1、比较运算符:> < >= <= == !=
作用:判断条件
结果:布尔值
2、逻辑运算符:&& || !
作用:综合比较
结果:布尔值
3、if(){} if(){}else{} if(){}else if(){}else{}
8、循环:根据条件,判断要不要再执行一次操作
var 循环变量=几
while(循环条件){
循环体;
循环变量的变化
}
for(var 循环变量=几;循环条件;循环变量的变化){
循环体;
}
死循环:while(1){循环体} for(;;){循环体}
死循环要搭配上break才能停止循环
9、数组:一个变量(内存空间)保存多个数据
创建:
var arr=[数据,...];
var arr=new Array(数据,...);
访问:
arr[i]
添加/替换:
arr[i]=新值;
数组三大不限制:
不限制类型/个数/下标越界(坏事)
数组的长度:arr.length
1、访问倒数第n个元素:arr[arr.length-n];
2、向末尾添加元素:arr[arr.length]=新值;
3、缩容:arr.length-=n;//删除arr倒数n个;
遍历数组:把数组中的每个元素拿出来执行 相同 或 相似的操作
for(var i=0;i<arr.length;i++){
arr[i];//当前次元素
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1、DOM:Document Object Model:文档对象模型,专门用于操作HTML(css)文档的
2、树根:document对象,浏览器的js解释器(运行环境)会自动创建,通过树根找到页面上我们想要找到的DOM元素/对象/节点
3、查找元素:
标签名/class名:var elems=document/已经找到的父元素.getElementsByTagName/ClassName("标签名");
特殊:
1、找到了:返回一个类数组集合,没找到:返回一个空集合;
2、DOM集合是不允许直接做操作的,要么下标找到某一个,要么遍历找到每一个
3、也不一定非要从document开始查找,也可以写一个自己已经找到的父元素,只会找到这个父元素下面的元素
通过关系获取元素:前提:至少要找到一个元素才能调用关系
父:elem.parentNode;
子:elem.children; - 集合
第一个儿子:elem.firstElementChild;
最后一个儿子:elem.lastElementChild;
前一个兄弟:elem.previousElementSibling;
后一个兄弟:elem.nextElementSibling;
4、操作元素:<标签名 id="" class="" title="" style="样式">内容</标签名> - 操作元素的前提就是要找到元素
1、内容:
innerHTML(识别标签)/innerText(纯文本)/value(input准备的);
获取:elem.innerHTML/innerText/value;
设置:elem.innerHTML/innerText/value="新内容";
2、属性:
获取属性值:elem.getAttribute("属性名");
设置属性值:elem.setAttribute("属性名","属性值");
无敌的
简化版:
获取属性值:elem.属性名;
设置属性值:elem.属性名="属性值";
缺陷:1、只能操作标准属性,不能操作自定义属性
2、class必须写为className
3、样式:
获取:elem.style.css属性名;
设置:elem.style.css属性名="css属性值";
特殊:1、内联样式:不会牵一发动全身,优先级最高
2、css属性名:如果出现了横线,去掉横线换成小驼峰命名法
3、获取时,只能获取到内联样式,样式表中的获取不到,暂时的一个小缺陷
4、绑定事件:
在js中绑定事件:符合我们的原则:内容(html)、样式(css)、行为(js)分离
elem.on事件名=function(){
要做的操作
this关键字:目前只能在事件之中使用,是一个指针,不同的场景,指向不同
单个元素绑定事件:this->这个元素
多个元素绑定事件:this->当前元素
}