第一周笔记

用户7853288436903
102 阅读4分钟

1，JavaScript：由三部分组成，简称JS，是一个运行在客户端浏览器的【解释型】【弱类型】【面向对象】脚本语言 ECMAScript - 核心语法，以后JS不管做什么操作可能都离不开它（算法题/逻辑题) DOM - Document Object Model - 文档对象模型，可以用JS来操作HTML和CSS了（明天） BOM - Browser Object Model - 浏览器对象模型，可以用来操作浏览器

2、如何使用JS 1，在HTML页面使用， 2，外部js，内部进行引用 3，打桩输出：console.log(想要输出/查看的东西); - 会在F12的console显示日志

3，函数Function （1）定义函数： function 函数名(){ 若干的代码 } （2）调用函数：<elem on事件名="js代码">内容 （3）带参数的函数： function 函数名(形参,形参,...){ 函数体; } 使用：实参：实际参数，真正的值，需要再你调用时再传入 函数名(实参,实参,...) 形参和实参一一对应

3， 数据类型转换 （1）算术运算符的隐式转换： 默认：悄悄的将左右两边的东西，转为一个数字，在运算 特殊：1、+运算，碰上一个字符串，左右两边都会悄悄的转为字符串，+运算不再是+运算，而是字符串拼接操作 2、原来别的数据类型其实也可以转为数字 true->1 false->0 undefine 包含非数字的字符串会转换为NaN （2）强制转换 1、转字符串：var str=x.toString();默认页面上的一切都是一个字符串 2、转数字： 整数，parseInt(str/num); parse->解析 Int->整型 小数，parseFloat(str); parse->解析 Float->浮点型

4，分支结构： 1、顺序执行 - 默认，从上向下的依次执行 2、分支结构 - 通过条件的判断，选择部分代码执行 3、循环结构 - 通过条件的判断，选择要不要重复执行某些代码

5，循环结构： （1）、while循环： 语法： var 循环变量=几; while(循环条件){ 循环体; 循环变量变化; } 执行原理：首先创建了循环变量，然后判断条件，如果条件满足，则做【一次】循环体操作，并不会退出循环，回过头继续判断条件满足吗，如果满足，则再做【一次】循环体操作....... 直到循环条件不满足，才会退出循环 宏观上感受循环一瞬间就结束了，但是微观上来说其实是【一次一次】执行的

    特殊：
        1、有的时候真可能不知道从何开始，到何处结束，死循环：永远不会停下来的循环
	何时使用：不确定循环次数的时候
		while(true){
			循环体;
		}
	
        2、退出循环语句：break - 只能在循环中使用，多半都是搭配死循环使用的

（2）for循环
	语法：for(var 循环变量=几;循环条件;变量的变化){
			循环体;
	           }

	死循环：   for(;;){
			循环体;
		}

	面试题：while 和 for 的区别？
		语法上有区别，但两者都能做到相同的操作
			一般来说我们不确定循环次数的时候，会使用while循环 - 死循环
			一般来说我们确定循环次数的时候，就用for循环 - 更漂亮更简洁，大部分情况都会使用它

6，查找元素： 1、通过ID查找元素 语法：var elem=document.getElementById("id值");

2、通过标签名查找元素
	语法：var elems=document/已经找到了的父元素.getElementsByTagName("标签名");
3、通过class名查找元素
	语法：var elems=document/已经找到了的父元素.getElementsByClassName("标签名");
4、通过关系查找元素：前提条件：必须先找到一个元素才可以调用关系网
	父元素：elem.parentNode; 
	子元素：elem.children; - 集合
	第一个儿子：elem.firstElementChild;
	最后一个儿子：elem.lastElementChild;
	前一个兄弟：elem.previousElementSibling;
	后一个兄弟：elem.nextElementSibling;

7，操作元素： （1）内容 innerHTML： innerText： value：专门为input的value值准备的

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

	简化版：
	
	获取属性值：elem.属性名;
	设置属性值：elem.属性名="新属性值";
		缺陷：
		    1、class必须写为className - 2015年过后，ES6诞生过后，class变成了一个关键字
		    2、不能操作自定义属性，只能操作标准属性
（3）样式：
	使用样式的方式：
		1、*内联/行内样式
		2、内部样式表
		3、外部样式表

	二阶段我们就是要用js来操作【内联样式】
		1、不会牵一发动全身
		2、优先级最高

	获取：elem.style.css属性名;
	设置：elem.style.css属性名="css属性值";
	特殊：
		1、css属性名，有横线的地方，去掉横线，变为小驼峰命名法
			border-radius   ->	borderRadius
（4）绑定事件：
	elem.on事件名=function(){
		操作;
		*****this关键字：目前只能用于事件内：
			如果单个元素绑定事件：this->这个元素
			如果多个元素绑定事件：this->当前触发事件的元素
	}
avatar
文章
阅读
粉丝