基本概念
javascript三大组成部分
BOM:操作浏览器发生变化——全称-Browser Object Model
DOM:操作文档流发生变化【html+css】——全称-Documnt Object Model
ECMAScript：JS的书写语法与书写规则
DOM树概念：
DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象
1. document对象：不需要我程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document
2. 作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
3. DOM会将页面上每个元素、属性、文本、注释都会当作一个DOM元素/节点/对象
javascript:运行在客户端浏览器的【解释型【弱类型【面型对象 的脚本语言
编译型语言：运行前需要检查脚本语言，检查出错误全不运行——java/c++
解释性语言：运行前不需要检查脚本语言，运行至错误处自动停止——PHP/js
var a=1;；数字
var a="1";字符串
弱类型：变量保存的数据可以是随意的，数据类型由数据自身决定
强类型：变量保存的数据由据类型决定——java
面向对象：对象名：属性名
对象名：方法名（）
特点
1.可以使用一切编辑器编辑
2.解释性
3.弱类型
4.面向对象编程
5.完成css完成不了的效果
js使用
使用方式
1.HTML中`<script></script>`
2.外部js——`<script src=“地址”>只要有了src属性，此处再写代码不生效</script>`【在body底部引入
输出方式/打桩输出：帮助检查错误
1.控制台日志：console.log(想要输出或者查看的)——出现在控制台
2.页面日志：document.write(想要输出或者查看的)——出现在页面，支持识别标签，绑定点击事件后，会造成页面消失，仅显示日志
3.弹出框日志：alert(想要输出或者查看的)——出现在浏览器自带弹窗中，在没弹完之前会卡住页面
变量与常量
*变量：创建值可修改
syntaxerrow——语法错误——>变量名/标点符号出错
var 变量名=变量值，变量名=变量值...；
变量的命名
1.变量由数字 字母 下划线 美元符组成
2.不能以数字开头，变量名大小写敏感
3.不能是关键字，比如var、for
4.最好还是语义化
建议: 下滑线命名法 apple_banana 或者 小驼峰命名法appleBanana
#一个变量只能保存一个值
特殊：若变量名为name，则所有输出数据将强制变为字符串
常量：创建后值不可修改
const 常量名=值
*数据类型
原始/基本/值类型
number:数字 无数个
String:字符串 无数个
Boolean:布尔 ture/false
Null:空值 null 释放变量，节约内存
undefined:取值 undefined 创建一个变量但是没有赋值，默认为 undefined （底层本源错误
引用/对象类型：11个引用类型的对象{很多很多的属性和方法}【待学习】
数据类型转化：不同的数据类型做操作可能出来的结果是不一样的
Number + Number = Number
Number + String = String
JS获取页面数据类型默认字符串
查看数据类型：typeof();
运算符的隐式转换
特殊
1、+运算，碰上一个字符串，左右两边都会悄悄的转为字符串，+运算不再是+运算，而是字符串拼接操作
2、别的数据类型其实也可以转为数字
true->1
false->0
undefined->NaN
null->0
3、其实-*/%，字符串也可以转为一个数字，前提要是一个纯数字组成的字符串才行，但凡包含一个非数字字符就转为NaN
"1000"->1000
"1000px"->NaN
若不是纯数字，输出NaN
1.参与任何算数运算，结果永远是NaN
2.参与任何比较运算，结果永远是false
4、NaN：Not A Number：不是一个有效数字，但是是数字类型
问题：如何使用普通的比较运算来判断x是不是NaN
解决：isNaN(x)
显示/强制转换
1、转字符串：var str=x.toString();//x不能是undefined或null，因为undefined和null不能使用任何的 “.” 操作 ，页面上的一切东西，数据类型默认都是一个字符串
2、转数字：
1、parseInt(str/num);
执行原理：字符串和小数转为整数，依次读取每个字符，碰到非数字字符，停止转换， 开始就碰到了不认识的，则为NaN
2、parseFloat(str);
执行原理：类比parseInt，识别小数
3、Number(x);//此方法是万能的，任何类型都可以转为数字，完全等效于隐式转换
运算符
*算式运算符
+、-、*、/ 加减乘除
*% 取模（取余
1.判断奇偶 num % 2
2.取倒数几位 123 % 100=23
算术运算符具有隐式类型转换，默认转为数字类型
比较运算符：> < >= <= == !
用于做判断/比较的
结果：布尔值
逻辑运算符
&&：与，并且
||：或
!：颠倒布尔值
function定义函数【重点】
定义/声明/创建函数：
function 函数名(){
若干的代码
}
调用/使用函数：
1、要么在js中程序员直接写死，要执行几次：函数名();
2、交给用户绑定在某个元素上，写上点击事件，让用户来触发：<elem onclick="js代码">内容</elem>
函数的意义：
1、不希望打开页面立刻执行，而需要时再使用 或 由用户来触发
2、希望能够反复执行，不用刷新页面
3、函数的地位非常高，函数是第一等公民地位，随时随地考虑封装函数
4、函数内的一切内存，函数调用完毕后都会自动释放
带参数的函数：
创建：形参：形式参数，其实就是一个变量，但是不需要写var，而且默认也没有保存任何值，默认值为undefined
function 函数名(形参,形参,...){
函数体;
}
使用：实参：实际参数，真正的值，需要再你调用时再传入
函数名(实参,实参,...)
特殊：1、传实参的顺序一定要和形参的顺序一一对应，并且数量也要对应
2、不是一定要带参数的函数才是好函数，具体情况，需要具体分析：
程序的流程控制语句：3种
1、顺序执行 - 默认，从上向下的依次执行
2、分支结构 - 通过条件的判断，选择部分代码执行
3、循环结构 - 通过条件的判断，选择要不要重复执行某些代码
循环结构：
反复执行 【相同 或 相似】的操作
循环三要素：
1、循环条件：开始 - 结束，循环的次数
2、循环体：做的操作是什么
3、循环变量：记录着我们当前在哪一次，而且他会不断的变化，往往都会向着不满足循环条件进行
while循环：
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化;
}
执行原理：首先创建了循环变量，然后判断条件，如果条件满足，则做【一次】循环体操作，并不会退出循环，回过头继续判断条件满足吗，如果满足，则再做【一次】循环体操作....... 直到循环条件不满足，才会退出循环
特殊：
死循环：
何时使用：不确定循环次数的时候
while(true){
循环体;
}
1、有的时候真可能不知道从何开始，到何处结束，死循环：永远不会停下来的循环
2、退出循环语句：break - 只能在循环中使用，多半都是搭配死循环使用的
*for循环
语法：for(var 循环变量=几;循环条件;变量的变化){
循环体;
}
死循环： for(;;){
循环体;
}
while 和 for 的区别？
语法上有区别，但两者都能做到相同的操作
一般来说不确定循环次数的时候，会使用while循环 - 死循环
一般来说确定循环次数的时候，就用for循环 - 更漂亮更简洁
数组【函数中相当重要的一部分】
创建数组：2种
*直接量方式：
var arr=[];//空数组
var arr=[数据1,....];
构造函数方式：可能出错
var arr=new Array();//空数组
var arr=new Array(数据1,....);
获取数组中的数据——数组名[下标];
添加/替换——数组名[下标]=新值;下标处有没有元素，如果没有则为添加，如果有了就为替换
数组具有三大不限制
1、不限制元素的个数
2、不限制元素的类型
3、不限制元素的下标越界
如果获取元素，下标越界，返回的一个undefined
如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，
属性：长度：数组名.length - 获取当前数组的长度：最大下标+1【固定格式熟练使用】
1、获取倒数第n个元素：arr[arr.length-n]
2、始终向末尾添加元素：arr[arr.length]=新值;
3、缩容：删除倒数n个元素：arr.length-=n
4、遍历数组：把数组中的每个元素拿出来执行相同相似的操作
公式：
for(var i=0;i<数组名.length;i++){
console.log(数组名[i]);//当前次元素，要干什么，看你的
}
查找元素——用与判断比较
通过ID查找元素【不推荐】
语法：var elem=document.getElementById("id值");
特殊：
1、返回值，找到则返回DOM元素，没找到返回null，
2、找到了多个相同的id，那么只会返回第一个
3、一次只能获取一个元素，也只能操作一个元素
4、其实根本不需要使用此方法，直接写ID也可以找到元素，为了方便后端一般不用
通过标签名查找元素
语法：var elems=document/已经找到了的父元素.getElementsByTagName("标签名");
特殊：
1、返回值：找到即返回类数组DOM集合，没找到返回空集合
2、JS不能直接操作DOM集合，只能直接操作DOM元素，解决：使用下标拿到某一个元素，或者遍历拿到每一个元素
3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了
通过class名查找元素
语法：var elems=document/已经找到了的父元素.getElementsByClassName("标签名");
特殊：
1、返回值：找到即返回类数组DOM集合，没找到返回空集合
2、JS不能直接操作DOM集合，只能直接操作DOM元素，解决：使用下标拿到某一个元素，或者遍历拿到每一个元素
3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了
通过关系查找元素
前提条件：必须先找到一个元素才可以调用关系网
父元素：elem.parentNode;
子元素：elem.children; -特殊： 返回一个集合
第一个儿子：elem.firstElementChild;
最后一个儿子：elem.lastElementChild;
前一个兄弟：elem.previousElementSibling;
后一个兄弟：elem.nextElementSibling;
操作元素——添加/修改
前提：找到元素才能操作元素：<标签 属性名="属性值" style="样式">内容</标签>
内容：
1、*nnerHTML：获取 和 设置 开始标签到结束标签之间的内容 - 支持识别标签
获取：elem.innerHTML;
设置：elem.innerHTML="新内容";
2、innerText：获取 和 设置 开始标签到结束标签之间的文本 - 不支持识别标签
获取：elem.innerText;
设置：elem.innerText="新文本";
3、value：专服务于input
获取：input.value;
设置：input.value="新值";
属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
简写【有缺陷】：
获取属性值：elem.属性名;
设置属性值：elem.属性名="新属性值";
缺陷： 1、class必须写为className
原因： 2015年过后，ES6诞生过后，class变成了一个关键字
2、不能操作自定义属性，只能操作标准属性
样式
使用样式的方式：
1、内联/行内样式
2、内部样式表
3、外部样式表
用js来操作【内联样式】
优点
1、操作方便
2、优先级最高
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊：
1、css属性名，有横线的地方，去掉横线，变为小驼峰命名法border-radius -> borderRadius
2、目前学习的方法只能获取内联样式
4、绑定事件：
elem.on事件名=function(){
操作;
*****this关键字：目前只能用于事件内：
如果单个元素绑定事件：this->这个元素
如果多个元素绑定事件：this->当前触发事件的元素
扫一扫
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
