js总结

js的用法

    js的用法和css大致相同都是为了让页面更加的完美，不过js的功能相比于css的功能更加的强大，用法也更加的多变，在位置方面比css多了一种更加灵活的方法，能够在HTML页面中随意放置，不过仍需要遵循顺序结构；

js的基本输出语句和注释方法

（1）警告框：
            alert();数字可以直接使用，其他需加引号。
(2) 在文档中输出
            document.write();
(3)在控制台输出
            console.log();黑色日志
            console.warn();黄色警告
            console.error();输出红色错误
            console.info();黑色信息
(4)弹出输入框
            prompt(“请出入：”);
(5）确认框
            confirm();
(6)js中有两种注释方法:
            单行注释 //
            多行（文档）注释/* */
注释规则
            1.行注释可以嵌套行注释
            2.行注释中可以嵌套文档注释
            3.文档注释中可以嵌套行注释

js中数据的传递和存储

       js中一般用变量来存储数据，也有一些直接量可以不用定义直接使用，比如：字符串 (被单双引号包裹的内容数值 )；数字(1，2，3，4，1.1，1.11，-1)
变量的命名规则：
       1.必须以字母或者_或者KaTeX parse error: Expected 'EOF', got '&' at position 4: 开头 &̲nbsp; &nbs…和数字组成
       3.变量名不能使用关键字和保留字
       4.变量名区分大小写
规范：
       1.变量需要先定义再使用
       2.若变量由多个单词组成，驼峰命名法
              ：从第二个单词开始首字母大写

js中数据类型重要分为基础类型和引用类型：

基础类型
       string 字符串类型 ’ ’ " " “123” “ture”
       number 数值类型 所有数字
       boolean 布尔类型 true（真）false（假）
       null 空
       undefined 未定义
引用类型
       内置5种：
              Object Array Date Function RegExp
注意
       js是一种弱类型语言，js中的变量在定义的时候没有类型
       变量的类型取决于变量中保存的内容
       不能重复定义

js中的运算符

js中运算符根据操作数和功能的不同有不同的分类；
       根据操作数不同：一元运算符、二元运算符、三元运算符
       根据功能不同：
              1）算术运算符
                + - * / % ++(自增） --（自减）
              （NaN not a number）
              结论：1.自增自减运算符，运算符前置和后置对自身无影响
                         2.出现在赋值语句中：
              运算符后置 先赋值，再运算
              运算符前置 先运算，再赋值
              2）关系（比较）运算符
              运算结果一般情况下是布尔类型（true，false）
               > < == >= <= != === (全等) !==
              注意：>= <=只有有一个成立即可
               == 只比较数值
               === 和==区别
               ===不仅比较数值，还比较数据类型
               3) 赋值运算符
               = += -= *= /= %=
               4) 逻辑运算符
               一般情况下，运算结果为布尔类型 ture false
               &&:并且 逻辑与
               运算规则：
               若两边操作数均为真，则结果为真；其它均为假
               ||：或者 逻辑或
               运算规则：
               两边操作数有一个为真，则结果即为真；若两边均为假，则结果未假
               ！：非 取反
               1).若逻辑运算符的操作数不是布尔类型，则运算结果也不一定是布尔类型
               2).运算规则扩充：
               （1）&&
                              若第一个操作数为真，则整体运算结果即第二个操作数
                              若第一个操作数为假，则结果为第一个操作数
               （2）||
                              若第一个操作数为真，则结果是第一个操作数
                              若第一个操作数为假，则结果是第二个操作数
               5）条件运算符（三元运算符）
               表达式1？ 表达式2：表达式3
               运算规则：
               若表达式1的结果为true，则运算结果为表达式2
               若表达式1的结果为false，则运算结果为表达式3

js中主要的流程控制语句

分支结构：只会执行其中一条分支；
if语法：

		if（条件）{
				代码块；
		}

执行规则：
若条件成立（true），则执行代码块;
if…else 语法：

		if（条件）{
			代码块；
		}else{
			代码块2；
		}

执行规则：若条件成立，则执行代码块1，否则执行代码块2;
if…else if…else 语法：

		if(条件1){
			代码块1；
		}else if（条件2）{
			代码块2；
		}else{
			代码块3；
		}

switch语法：

	switch(条件){
		case 值：
		break;//结束
		case 值：
		break;
		...
		case 值：
		break;
		default:
		break;
	}

执行规则：使用条件分别和case后面的值作比较，若相等则执行case的语句
若均不成立，则执行default中的代码
注意：该结构只能用于值的比较，不能用于范围比较
该结构是===比较
省略break/switch穿透
循环结构
循环结构分三种for循环，while循环和do…while循环；
for循环：

		for（循环变量的初始化；循环判断；循环迭代）{
						循环体；
		}

while循环：

		while(条件){
				循环体；
		}

执行规则：若条件成立，则执行循环体；
do…while循环：

		do{
				循环体；
			}while(条件)；

执行规则：
先执行循环体一次，判断若条件成立，则继续执行循环体；
ps：break 结束整个循环；continue 结束本次循环，继续下一次循环；

js函数

函数：“封装”一次可以执行多次，任意时间的js代码；
注意：函数需要被调用才可以执行

	function 函数名(){
			函数体；
		}

js中主要分为有参函数，无参函数，带有返回值的函数，和匿名函数；
有参函数

	function cal( r ){
			函数体
		}

若函数有多个参数，参数之间使用逗号隔开
理论上，函数可以有无限个参数
函数定义时：形参
函数使用时：实参
函数的参数类型是可变的
带有返回值的函数

	function cal( r ){
			函数体
			return 表达式；
		}

return语句：
1）返回结果
2）结束函数
return 只能返回一个值。
匿名函数

	function （）{
			代码；
		}

匿名函数的使用：
(1)将其赋值给一个变量

	var show=function   (){
			代码；
		};

(2)匿名函数的自我执行

	（function （）{
			代码；
		})();

匿名函数常用在Dom中的事件模块
回调函数：
满足某个条件自动执行的函数；
闭包：
有权在函数内访问另一个函数作用域中的变量，并且将该函数返回；

DOM

DOM中的层级节点属性
        1).chidNodes//获取所有孩子的（直接后代）节点(包含文本节点和元素节点)
                集合： 索引
                NodeList length 元素个数 从零开始
                HTMLCollection
        2).firstChild//第一个孩子
        3).lastChild//最后一个孩子
        4).parentNode //父节点
        5).previousSibling 上一个兄弟节点
        6).nextSibling 下一个兄弟节点
        7).children 直接后代的元素节点
        //连缀
        o.firstChild.nextSibling .nextSibling .nextSibling .innerHTML="";
DOM :通过js操作HTML 增删改查
        1.查：属性 和getElementById 通过id找元素
                getElementsByTagName 通过标签名找元素
                注意：此方法不仅可以使用document调用，还可以使用节点对象调用
                getAttribute 通过元素节点的属性名称获取属性的值；只能通过元素节点对象调用的函数。
                （ie8以下不支持）document.getElementsByClassName(cls) 通过类名找元素 （集合）
                getElementsByName 通过属性name找元素
                setAttribute(name,value) 把一个现有的属性设定为指定的值；增加一个指定名称和值的新属性；只能通过元素节点对象调用的函数。
                根据选择器查找元素：
                querySeletor(selector) 只取第一个
                querySelectorAll(selector)

                参数：selector：css选择器
2.增
                createElement(tagname) 创建元素节点对象
                appendChild() 以子节点的形式追加到指定节点中
                createTextNode() 创建文本节点
                insertBefore(newNode，oldNode) 在oldNode前插入newNode
3.替换
                repalceChild(newNode，oldNode) 新节点替换旧节点
                cloneNode() flag 默认为false不复制子节点 true 复制子节点
4.删除节点
父节点.removeChild(自身)
DOM中属性的操作：
1.属性值的修改
        1).obj.属性名=值；
        注意：针对特殊属性需要变形 class–>className
        2).setAttribute(属性名，属性值)；
        注意：不需要变形
        3).对象[属性名]=值
        注意：要变形
2.属性值的获取
        1).obj.属性名
        2).getAttribute(属性名)；//图片src是相对路径
        3).对象[属性名]
注意
js中属性的名字和html中大致相同，只有class对应className和for对应htmlFor；

数组

数组：Array 能够保存多个数据
语法：
        new Array()
索引：
        从0开始
长度：
        lenght 数组中元素的个数
数组赋值:
        数组名[索引]=值
数组取值：
        数组名[索引]
内置方法
1）栈方法
        push(item,item,item) 压栈 向数组末尾添加元素
        pop() 出栈 删除数组末尾元素
2）队列方法：
        push() 进队
        shift() 出队 删除数组头部元素
3）数组操作方法：
        concat(arr,arr,arr) 合并数组 产生新数组
        unshift(item,item) 在数组头部插入元素 修改原数组
        splice(index，howmany)//删除指定位置的元素： 修改元素组
        splice(index,howmany,item…item)在指定位置删除元素后，在添加元素
        有返回值（删除的元素）
        slice(start,end) 截取数组[start,end) 产生新数组
        有返回值（截取的元素）
        var arr0=arr.slice(0)//赋值数组
        var arr0=arr.concat()//赋值数组
4）排序方法：
        sort() 对数组进行排序（升序）
        注意：默认情况按照字符串（ASCII）排序
        其他排序：
        需要将排序算法(函数形式)传入方法
        升序：

			 arr.sort(function(a,b){
				 return a-b;
			 })

        降序：

					 arr.sort(function(a,b){
							return b-a;
					 })

        reverse() 颠倒数组 修改原数组
5）与字符串相关的方法：
        join(sp) 使用指定字符将数组拼接成字符串
新增方法：
every(fn):
        fn(item,index,arr) return 条件 判断每一个元素是否满足条件 要有返回值(true false)
some(fn):
        fn(item,index,arr) return 条件 校验数组中是否有满足条件的元素 要有返回值(true false)
filter(fn):筛选数据 return 条件 返回数组元素
forEach(fn)
        遍历数组；fn：回调函数 item(元素),index(索引),arr(数组)(三个参数)
indexOf()
        判断元素在数组中的位置 index -1
map()：筛选数据 return 条件 返回bollean型数组
reduce(fn):计算
        参数：fn(total(总和),item,index,arr)
        初次状态：total值为第一个元素
        其他：total为运算结果
reduceRight()

 var arr=[10,20,30,400,500,6000];
        var a=arr.every(function(a){
            return a>30;
        })
        console.log(a);

        var b=arr.some(function(a){
            return a>30;
        })
        console.log(b);

        var c=arr.filter(function(a){
            return a>30;
        })
        console.log(c);

        var sum=0;
        var d=arr.forEach(function(a){
            console.log(a);
            sum+=a;
        })
        console.log(sum);

        var e=arr.map(function(a){
            return a>30;
        })
        console.log(e);

        var f=arr.reduce(function(num,a){
            console.log(num);
            return num+a;
        })
        console.log(f);

DOM事件

1.事件：
        事件三要素：
                1）事件对象 ：事件的绑定对象
                2）事件名称 ：事件的种类 on+事件名
                3）事件处理函数 ：事件触发之后要做什么
        事件的写法：
                1）HTML事件
                将事件以属性的形式写入到页面标签中
                优点：简单易懂
                缺点：js代码与HTML耦合度太高，不利于多人协作
                2）脚本模型（现代事件绑定）
                在js中完成事件的绑定

                obj.on-事件=fn;
                3）w3c事件
                添加事件：addEventListener(事件名,fn,flag)
                flag: true 捕获 false 冒泡
                移除事件：removeEventListener(事件名,fn,false)
                注意：确保删除事件时，时间函数与添加时是同一个函数
2.鼠标事件：
        click(点击) dblclick(双击)
        mouseover(经过) mouseout(离开)
        mouseenter(经过) mouseleave(离开)（性能好）
        mousedown(按下) mouseup(松开) mousemove(移动)
3.其他事件：
        load(加载) change(改变) resize(尺寸改变)
4.焦点：
        focus(获焦) blur(失焦)
5.键盘事件：
        keydown keyup keypress

        keyCode:键盘编码

js对象

1.声明对象：
        var s={} 代表空对象
        var s=new Object(）； 创建对象
2.自定义对象：
        函数：
        （隐式原型对象）
        ——proto—— 属性 实例
        函数对象有如下属性：
        arguments
        prototype 原型 对象
        prototype对象的属性和方法均为公有的
        constructor 构造器
        在ES5中，this指作用域对象
3.工厂模式
优点：批量创建对象
缺点：会为每一个对象均添加方法，会造成内存浪费

			function  student(no,age){
				var obj=new Object();
				obj.no=no;
				obj.age=age;
				obj.run=function(){
				...
				}
				return obj;
			}
		var a=student(no,age);
		console.log(a.no);

4.构造函数模式创建函数

		var arr =new Array()//构造函数
		//当构造函数被new关键字调用时，系统会自动的创建一个Object，为该对象绑定核心和方法
		//并调用结束时，将对象返回
		function  Student(no,age){
				this.no=no;
				this.age=age;
				this.run=function(){
				...
				}
		}
		//构造函数需要使用new调用
		var  s=new Student();

5.混合模式：
将属性的声明在构造函数中完成
将方法的声明放入原型中

		function  Student(no,age){
			this.no=no;
			this.age=age;
			//属性
		}
		//将方法放入原型中
		Student.prototype.say=function(){
		....
		}

6.json格式创建对象
json：是一种数据格式
键值对：key：value；
{“name”:“李四”,“age”:“20”}
//创建对象实例

			var obj={
					name:"jack",
					age:"22",
					say:function(){
					console.log(this.name);
					}
			};

jsweb存储

1.web存储：
        locationStorage: 用于永久性保存数据
        sessionStorage: 用于临时存储数据(关闭页面时，数据丢失)
2.用法：（两个对象用法一致）
        setItem(key,value) 存储数据
        getItem(key) 取出数据
        removeItem(key) 删除数据
        clear() 清空数据
        注意：key 和value均为字符串类型
3.属性：
        length
4.JSON对象：
        stringify（obj） 将obj转为字符串类型
        parse（str） 将字符串(对象格式)转化为对象