一.概述
JavaScript是一个解释型，弱类型，面向对象的脚本语言
解释型：代码运行时，不需要检查语法是否正则，直接执行，碰到错误则停止代码执行
弱类型：变量类型是由数据来决定
面向对象：对象名.属性名； 对象名.方法名();
JavaScript组成部分： ECMAscript 核心语法 不管什么操作都离不开它
DOM 文档对象模型 可以用JS来操作HTML（CSS）
BOM 浏览器对象模型 可以用来操作浏览器
JS特点：
可以使用一切编译器来编写JS代码；解释型；弱类型；面向对象编程方式；可以做到一切CSS做不到的效果
二.变量/常量/数据类型
变量：变量可以随时改变它的值
变量命名建议使用下划线“_”或者驼峰命名法
var 变量名 = 值；
注意：变量名不能随意起
不能以关键字命名
不能以数字开头
常量：常量不可修改，只能有一个
const 常量名 = 值；
数据类型：
值类型：
数值型 Number 有无数个值
可以用来保存整形类型以及小数点类型（浮点型）
取整：Math.ceil 向上取整
取整：Math.ceil 向下取整
四舍五入：Math.round
固定精度：Math.toFixed
固定长度：Math.toPrecision
取整：Math.parseInt 位运算
字符串 String 有无数个值
在JS中推荐使用单引号
var str='我是一个"高富帅"';
var str="我是一个'高富帅';字符串转义字符：
\n 换行符
\\ 斜杠
\' 单引号
\'' 双引号
\t tab缩进
\b 空格布尔型 Boolean 2个值：true或者false
空 null 一个值：null释放变量/内存 可以节约内存空间
undefined 一个值：undefined创建一个变量但是没有赋值，默认为undefined
引用/对象型：11个引用类型对象
三.运算符
递增（++）递减（--）运算符
前置递增或者递减：先自加/减，后返回值
后置递增或者递减：先返回值，后自加/减
比较（关系）运算符
> 大于
< 小于
<= 大于等于
>= 小于等于
= 赋值
== 等于
=== 全等于（值和数据类型完全一致）
!= 不等于
!== 全不等于
结果一定是布尔值，用来做判断
逻辑运算符
&& 逻辑与（and）两边条件都满足，返回true，否则返回false
// 逻辑或（or） 两边任意一个条件满足，返回true，否则返回false
! 逻辑非（not）取相反值，如果是true则返回false
多个条件综合比较
赋值运算符
= 直接赋值
+=，-= 加，减后在赋值
*=，/=，%= 成，除，取模后在赋值
算术运算符：+加 -减 *乘 /除 %取余（取模）
判断奇偶性的固定写法：
for(var i = 1,s=0,n=0;i<=100;i++){
if(i%2==0){ //判断1-100的偶数并且进行相加
s+=i;
}else{ //判断1-100的奇数并且进行相加
n+=i;}
}
取一个三位数的个位，十位，百位
var a = 123，
b = a%10; //个位数 3
c = Math.floor(a/10)%10, //十位数 2
d = Math.floor(a/100); //百位数 1
//取三位数案例：水仙花数
for (i = 100; i <= 999; i++) {
var a = i % 10,
b = Math.floor(i / 100),
c = Math.floor(i / 10 % 10);
if ((Math.pow(a, 3) + Math.pow(b, 3) + Math.pow(c, 3)) == i) {
console.log(i);
}
}
1234%10 // 4
1234%100 // 34
1234%1000 // 234 算术运算符的特殊点：
算术运算符存在隐式转换的功能（强制转换）。如果我们需要其他的类型，要自己动手转换。
+ 当左右两边任意一边出现字符串，则会自己转换为字符串，并且不在有相加的效果，变成了拼接字符串的效果
- * / % 可以让字符串也转换成数字型，前提是字符串是纯数字的字符串；如果包含了字符串包含了其他字符，结果一定是NaN：不是一个数字，但类型是数值型
NaN 参与任何算术运算结果都为NaN；参与任何比较运算，结果都为false
如何利用NaN判断一个X是不是NaN？
！isNaN（x）; 返回值如果是true，是一个有效数字；返回值是false，是一个NaN
数据直接的转换：
var a = x.toString(), //转成字符串
b = x.parseInt(), //转出数值型，但不能转出小数位
c = x.parseFloat(), //转出数值型，可以转出小数位
d = x.Number()； //强制转换为数值型（垃圾用法）；等价于 var a = b+1； 运算符优先级
小括号()
一元运算符 ++,--,! !非最先运算
算术运算符 先算*,/后算+,-
关系运算符 >,>=,<,<=
相等运算符 !=,===
逻辑运算符 先看逻辑与在看逻辑或
赋值运算符 =
逗号运算符 ,
三.JS的使用
1.直接在HTML页面上写script标签，里面就可以书写js代码
<script></script>2.外部引入js---正式开发时使用方式
创建XX.js文件，里面书写js代码
在HTML页面引入
<script src="XX.js">
只要有了src属性，中间就不允许再写代码了</script>
输入框：
prompt（“提示信息”，“默认值”）；输出方式/打桩输出：帮助我们检查错误,3种
1.控制天输出日志：console.log（想要输出/查看的东西）； F12console显示日志
2.在页面上输出日志：document.write（想要输出/查看的东西）document当前文档 write写入：在页面上输出，而且支出识别标签——垃圾：如果绑定了点击按钮，会让之前的HTML页面消失，会影响html和css
3.弹窗输出：alert（想要输出/查看的东西）；在一个浏览器自带输出的弹出窗中输出日志，但是弹出框会卡住页面，用户只能看到一个白板-垃圾
四.Function：函数
称之为方法：需要提前预定义好的，以后就可以反复使用的代码段
函数定义（后面带有小括号的就是函数）例如：
rotate（360deg） 完成一个360度顺时针旋转的功能
url（图片路径） 一个根据路径来显示图片的功能
使用方式
function 函数名（）{
代码段；
}函数的调用和使用
1.要么在js中程序员直接写死，要执行几次：函数名（）；
2.要么交给用户绑定在某个元素上，写上点击事件，让用户来触发：
<elem onclick="sum（）">内容</elem> function sum（）{ 代码段； }3.何时使用：
不希望打开页面立即执行，而需要时在使用 或 由用户来触发
希望能够反复执行，不用刷新页面
以后任何 一个独立的功能体，都要单独封装为一个函数（你的每一个作业）
函数的地位非常高，函数是第一等公民地位，随时随地考虑能不能封装为一个函数，尤其是重复的代码
函数内的一切内存，函数调用完毕后都会自动释放
带参数的函数
创建：形参，形式参数
funciton 函数名（形参，形参,.....）{
函数体；
}使用：实参，实际的值，需要的时候再去调用使用
函数名（实参）；
funciton 函数名（形参，形参,.....）{
函数体；
}
例如：
pink（5,6）
funciton pink（x，y）{
console.log(x+y);
}特殊： 1.传实参顺序一定要和形参顺序和数量一一对应
2.不是一定要带参数的函数才是好函数，具体情况，需要具体分析：
如果你的函数体就是固定的一则普通函数。
如果你的函数体希望根据传入的实参不同，做的略微不同一则带有参数的函数
五.顺序/分支/循环
条件
格式： if（条件）{
操作；
}
使用：
if（条件）{ 一个条件，一件事情的时候，满足就做，不满足就不做
操作；
}
if（条件）{ 一个条件，两件事情的时候，条件满足就接着运行，条件不满足就跳过 运行else的操作
操作；
}else{
操作；
}
if（条件）{ 多个个条件，多件事情的时候，那个条件满足就运行那个条件
操作；
}else if(条件){
操作；
}......特殊：
1.else if 可以写多个，根据需求判断写多少
2.最后else可以省略不写，但是不推荐，如果条件都不满足，那么就不会执行任何语句
3.书写判断顺序，需要根据需求来写，不能打乱顺序写
while循环
格式：
var 循环变量；
while（循环条件）{
循环体
循环变量变化；
}
原理：先创建循环变量，然后判断循环条件，如果满足就执行循环体的内容，并且进行下次循环直到不满足循环为止；如果条件一开始就不满足，则不执行循环体的内容，直接跳过循环执行后面的语句
while的死循环
while（true）{
循环体；
break；
}
***for循环（重要）
格式：
for （var 循环变量；循环条件；循环变量变化）{
循环体；
}
for的死循环方式：
for（；；）{循环体；break；}
死循环一般搭配break执行；
面试题：for和while的区别？
1.语法上有区别，但两者都能做相同的操作
2.一般来说不确定循环次数的时候，用while循环---死循环
在确定循环次数的时候，使用for循环，更加简洁，方便 平时大部分都用for循环
六.****数组
数组：是多个数据的集合
数据都是线性排列，除了第一个元素，每个元素都有唯一的后继元素
****每一个数组都有自己的下标，数组的下边是从0开始到最大长度减一
创建数组的两种方法
1.直接量方式：
var arr=[];空数组
var arr=[数据1，数据2，数据3.....]；
2.构造函数方式：
var arr=new Array（）；空数组
var arr=new Array（数据1，数据2，数据3......）；
获取数组中的数据
数组名[下标]；
添加/替换数组
数组名[下标]=新值；
下标处没有元素，就会增加，如果下标处有元素，则会替换
数组具有三大不限制
1.不限制元素个数
2.不限制元素的类型
3.不限制元素的下标越界---不是好的限制
如果获取元素，下标越界，返回的一个undefined
如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多的undefinec 问题：自己数下标，是不科学的，很有可能就会数错
解决：数组中唯一的属性:
长度：数组名.length - 获取当前数组的长度：最大下标+1
三个固定套路: 1、获取倒数第n个元素：arr[arr.length-n]
2、始终向末尾添加元素：arr[arr.length]=新值;
3、缩容：删除倒数n个元素：arr.length-=n；
前面的下标好数，后面的下标也好数，中间的下标不好数
***往往很多情况，我们不会拿出某个元素来使用，而是拿出所有的每个元素来进行 相同或相似的操作
数组的遍历：
for（var i=0；i<数组名.length;i++){
console.log(数组名[i]);
}
七.DOM（Document Object Model：文档对象模型
作用
专用作HTML文档的，提供了一些属性和方法
DOM树的概念
DOM将我们的HTML看作了上一个倒挂的树状结构，但是树根不是html，而是document
docume
DOM作用:
可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
DOM会将页面上的每一个元素/属性/文本/注释都会当作一个DOM元素/节点/对象
nt对象：不需要我们创建，由浏览器的js解释器自动创建，一个页面只有一个document
查找元素：
通过ID值来查找元素 语法：
var x=document.getElementByid（“id值”);
特殊：
1.返回值，找到了返回的是一个当前找到的DOM元素，没找到的话，返回一个null，null进行操作会报错
2.找到了多个相同的id，只返回第一个id
3.一次只能回去一个元素，只能操作一个元素，麻烦，不建议使用
***通过标签名查找元素：语法
var elems=document.getElementsByTagName("标签名");
特殊:
1、返回值：找到了返回的一个是类似数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合
2、JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标享到某一个元素，要么使用通历掌到每一个元素
3.不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到该父元素下面的元
***通过关系查找元素：
前提：必须先找找到一个元素才可以调用关系网
父元素: elem.parentNode;
子元素：elem.children；- 集合
第一个儿子: elem.firstElementChild;
最后一个儿子：elem.lastElementChild;
前一个兄弟: elem.previousElementSibling;
后一个兄弟: elem.nextElementSibling;
操作元素
1.内容
**innerHTML：获取和设置开始标签到结束标签之间的内容-支持识别标签
获取emel.innerHTML;
设置emel.innerHTML=“新内容”;
innerText: 获取和设置开始标签到结束标签之间的文本一不支持识别标签
获取elem.innerText；
设置emel.innerText=“新内容”;
以上两个属性都是为双标签准备的，但是操作不了单标签input的内容
value:专门为input的value值准备的
获取: input.value; 设置: input.value="新值”;
2.***属性:
获取属性值:
elem.getAttribute("属性名");
设置属性值:
elem.setAttribute("属性名","属性值");
简化：
获取属性值：elem.属性名;
设置属性值：elem.属性值=“新属性值”；
例如： id名.className="bbb";
修改id值后，后面获取时要使用修改后的id值获取
简化版的 1.class必须写成className 例如：id值.className
2.不能操作自定义属性，只能操作标准属性
3.***样式
使用样式的方式: 1、*内联/行内样式 2、内部样式表 3、外部样式表
获取：
emel.style.css属性
设置：
emel.style.css属性=“css属性值”；
特殊：
1.css属性名有横向的地方，要取掉横线变为小驼峰命名法
例如：list-style-type ->listStyleType
2. 目前学习的，获取时，只能获取内联样式--小缺点，我们**可以忽略掉**，就算以后会了操作样式表，也不会去使用
4.绑定事件
elem.on事件名=function(){
操作;
***this关键字：目前只能用于事件内：
如果单个元素绑定事件：this==当前这个元素
如果单个元素绑定事件：this==当前触发事件的元素
}
总结：
获取就是用于判断或者比较
设置就是用于改变值
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
