JavaScript第一周知识点回顾

79 阅读3分钟

1、概念:

   JavaScript,简称js,是一个运行在客户端浏览器端的一个解释型弱类型面向对象脚本语言
   解释型:直接运行,碰到错误就停止
   弱类型:变量保存任何数据类型都可以
   面向对象:xx.xx 或 xx.xx()

2、变量和常量:

变量:内存,是可以修改的
	var 变量名=值;

常量:一旦创建后不允许修改
	const 常量名=值;

3、数据类型:

原始类型:StringNumberBooleanUndefinedNull

引用类型:11个对象

4、算术运算符:+ - * / %

特殊:% 读作取余,俗称模

5、数据类型的转换:

1、隐式转换:程序员看不见,但确实在发生

	算术运算符的隐式转换:默认转为数字,再运算(前提是纯数字组成的字串,但凡包含了非数字字符则为NaN)
		特殊:
			1、+运算,碰上一个字符串,则为拼接操作
			2、其实别的数据类型也能转为数字
				true->1
				false->0
				undefined->NaN
				null->0
			3、-*/%字符串也可以转为数字,前提是纯数字组成的字串,但凡包含了非数字字符则为NaN
				"100"->100
				"1p00"->NaN
			4、NaN:不是一个数字,但是确实是数字类型,不是一个有效数字
				缺点:1、参与任何算术运算,结果都为NaN
					2、参与任何比较运算,结果都为false,带来了一个问题,如何判断NaN:!isNaN(x)

2、强制转换:

	1、parseInt/Float(str);原理:从左向右依次读取每个字符,碰到非数字字符则停止,如果一来就不认识则为NaN,Float认识小数点

	2Number(x); 原理:完全等效于隐式转换,还不如-0 *1 /1 %1

6、函数的基础:需要提前创建好的,以后可以反复调用的代码段

1、创建函数
	function 函数名(形参列表){
		函数体;
	}

2、调用函数
	函数名(实参列表);
	elem.onclick=function(){
		函数名(实参列表)
	}

7、分支结构:根据条件,选择一部分代码执行

一个条件一件事,满足就做,不满足就不做
	if(){}

一个条件两件事,满足就做第一件,不满足就做第二件
	if(){}else{}

多个条件,多件事,满足谁就做谁
	if(){}else if(){}else if(){}else if(){}else if(){}else{}

8、循环结构:根据条件,要不要再做一次这些操作

while循环

var 变量名=值;
while(条件){
	操作;
	变量变化;
}

for循环

for(var 变量名=值;条件;变量变化){
	操作
}

死循环

死循环:不确定循环次数的时候使用,多半都有结束的一天,用break结束;
	while(1){)
	for(;;){}

9、数组的基础

一个变量名可以保存多个数据,节约了我们的内存空间,而且一个好的数据结构,能够极大的提升我们程序员的开发效率

创建:var arr=[东西,...];
     var arr=new Array(东西,...);

访问:arr[i];

添加/替换:arr[i]=新东西;

数组有3大不限制:
	1、不限制个数
	2、不限制类型
	3、不限制下标 - 不好了

length属性:arr.length - 得到此数组的长度
	    套路:
		1、末尾添加:arr[arr.length]=新东西;
		2、访问倒数第n个:arr[arr.length-n];
		3、缩容:删除数组倒数n个元素 arr.length-=n

遍历数组:拿每个做操作
	for(var i=0;i<arr.length;i++){
		arr[i]
	}

10、DOM

全称Document Object Model - 文档对象模型,用于操作html文档的

1、查找元素

id查找

    var elem=document.getElementById("id");
    找到了返回DOM元素,没找到返回null

tagName/className查找

	var elems=document.getElementsByTagName/ClassName("标签名/class名 ");
	找到了返回DOM类数组集合,没找到返回[]
	集合不能直接做操作,要么下标拿某个,要么遍历拿所有
	不一定非要从树根document开找,可以写你已经找到的某个父元素

关系查找

       前提是至少有一个已经找到的元素
            
	父:elem.parentNode;
	子:elem.children;
	第一个儿子:elem.firstElementChild;
	最后一个儿子:elem.lastElementChild;
	前一个兄弟:elem.previousElementSibling;
	后一个兄弟:elem.nextElementSibling;

2、操作元素:

	内容:innerHTML(识别标签)/innerText(纯文本)/value(input专用)
		获取:elem.以上的操作
		设置:elem.以上的操作="新内容"

	属性:
		获取:elem.getAttribute( "属性名")
		设置:elem.setAttribute( "属性名","属性值");

		简化:
		获取:elem.属性名
		设置:elem.属性名 ="属性值";
		缺点:1、class写为className
		     2、不能操作自定义属性

	样式:操作内联样式:
		获取:elem.style.css属性名;
		设置:elem.style.css属性名="css属性值";
		特殊:
			1、border-radius -> borderRadius
			2、获取时切记只能获取到内联样式

3、绑定事件:

	elem.onclick=function(){
		this
		单个元素绑定事件,this->这个元素
		多个元素绑定事件,this->当前触发事件的元素
	}

解析字符串:脱衣服 eval(str);