js总结

js 同时被 2 个专栏收录
3 篇文章 0 订阅
2 篇文章 0 订阅

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) 将字符串(对象格式)转化为对象

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值