JS第一周（数组，操作元素，绑定事件）

最新推荐文章于 2023-12-29 21:15:01 发布

不@变

最新推荐文章于 2023-12-29 21:15:01 发布

阅读量109

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44394867/article/details/128599351

版权

输出方式：

   console.log();F12控制台输出
   document.write();页面输出
   alert();页面弹窗输出

变量（可以变化）和常量（一旦创建不能变化）

变量：var 变量名=值;
常量：const 常量名=值;

算数运算符：+ - * / % - 默认具有隐式转换

    算术运算具有隐式转换，默认为转为数字，再运算
		   特殊：+运算，如果碰到了一个字符串，那么两边都会悄悄的转为一个字符串，
		              然后+运算也不再是+运算，变为拼接操作

数据类型：

原始/基本/值类型：String/Number/Boolean/Undefined/Null
引用/对象类型：11个对象 - 你已经见过两个了（Function、Array）
JS里面不是原始类型就是引用类型

数据类型的转换

 一、隐式转换：
  算术运算的隐式转换：默认转为数字，在运算
	   true->1
	   false->0
	   undefined->NaN
	   null->0
特殊：   1、+运算，碰上一个字符串，则两边都会悄悄变成字符串，变为了拼接操作
         2、-*/%，字符串也可以转为数字，前提是纯数字组成的字符串，包含了非数字字符，则为NaN
		         "100"   ==>   100
		         "100px"  ==>  NaN
        3、NaN：Not a Number 不是一个数字，但确实是数字类型，不是一个有效数字
		           a、参与任何算术运算结果仍为NaN
		           b、参与任何比较运算结果都为false - 不能用普通的比较运算判断是不是NaN
			             解决：!isNaN(x);判断x是不是一个数字
			                       true    ==>   有效数字
			                       false   ==>   NaN

二、强制转换：隐式出来的结果不是我们想要的，我们可以手动调用一些方法转换数据类型，再去做运算
	转字符串：var str=x.toString();//x不能null和undefined，null和undefined不能使用.去做任何操作
	页面上一切的数据类型，都是字符串

	转数字：
		var num=parseInt/Float(str);
		执行原理：从左向右，依次读取每个字符，碰到非数字字符，则停止，如果一来就不认识则为NaN，Int不认识小数点，Float认识第一个小数点

		Number(x);//虽然是万能的，任何人都可以转为数字，完全等效于隐式转换，绝对不要手动使用，还不如-0 *1 /1

函数：提前预定义好的，一段可以反复使用的代码段

1、创建：
	function 函数名(形参列表){
		操作
	}

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

分支结构：

1、比较运算符：> < >= <= == !=
	结果都是一个布尔值，正好用于判断条件

2、逻辑运算符：综合比较
	&&：全部条件满足，才满足，只要一个不满足，则不满足 
	||：全部条件不满足，才不满足，只要一个满足，则满足  
	!：颠倒布尔值
3、语法：
	if(条件){操作}
	if(条件){操作}else{默认操作}
	if(条件1){操作1}else if(条件2){操作2}else{默认操作}

循环结构：

var 循环变量=几;
while(循环条件){
	循环体;
	变量的变化
}

for(var 循环变量=几;循环条件;变量的变化){
	循环体;
}

死循环：while(true){}			for(;;){}

退出循环：break;

数组：

创建：var arr=[数据,...];
          var arr=new Array(数据,...);

访问：arr[i];

添加/替换：arr[i]=新值;

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];
	}

获取元素：

1、通过 HTML 的特点
	1、ID：不准用，甚至ID根本不需要查找，可以直接使用
	2、标签/class名：var elems=document/parent.getElementsByTag/ClassName("标签/class名");
		特殊：1、找到了是一个集合，集合不能直接做操作，要么下标拿某一个，要么遍历拿每一个
		           2、没找到返回的是一个空集合
		           3、parent - 你已经找到的某个父元素

2、通过 关系：前提：必须先找到一个元素才可以用
	父：elem.parentNode
	子：elem.children - 集合
	第一个儿子：elem.firstElementChild
	最后一个儿子：elem.lastElementChild
	前一个兄弟：elem.previousElementSibling
	后一个兄弟：elem.nextElementSibling

操作元素：

内容：innerHTML(识别标签)/innerText(纯文本)/value(input专属)
	获取：elem.以上三个中的其中一个;
	设置：elem.以上三个中的其中一个="新内容";

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

	简化：
	获取属性值：elem.属性名;
	设置属性值：elem.属性名="属性值";
	小缺陷：
		1、class必须写为className
		2、只能操作标准属性，不能操作自定义属性

样式：内联样式
	获取：elem.style.css属性名;
	设置：elem.style.css属性名="css属性值";
	特殊：css属性名有横线的地方，去掉横线，换为小驼峰命名法

绑定事件：
	单个元素绑定
	elem.onclick=function(){
		this->elem
	}

	多个元素绑定
	for(var i=0;i<elems.length;i++){
		elems[i].onclick=function(){
			this->当前触发事件的元素
		}
	}