JavaScript复习——B站

本文深入讲解了JavaScript的面向对象编程,包括创建对象、继承、多态,以及如何操作DOM元素和使用jQuery简化开发。涵盖了变量作用域、函数、构造函数、Map和Set等关键概念,以及BOM、DOM、事件和浏览器对象的详细实例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 简介

一种浏览器脚本语言

ECMAScript时JavaScript的标准,目前已经到6了,但是目前主流浏览器只支持5,所以需要转换工具将6的语法转换成5的

2 QuickStart

html中的<script>中,或者js文件中直接写,然后使用<script>引入。注意:该标签没有自闭合
注意:引入的js编码是否和项目相同,不相同则出现乱码问题。
注释同java一样

3 类型、运算、变量

  1. number:所有的数字,整数、小数、科学计数法等,特殊:NaN(不是数字)、Infinity(无穷大)
  2. 字符串:使用单引号或者双引号
  3. 布尔:true|false
  4. 逻辑运算:&& || !(无短路运算)
  5. =、==、===(保证类型一样)、>、<、!=
  6. null(空)
  7. undefined(没定义)
  8. 数组(任意类型)
  9. 对象:{},键值对行式,逗号分隔

注意:NaN参与逻辑运算都是false,只有isNaN()才会使true
注意:判断小数是否相等时,可以使用差值小于一定值方法判断,不可使用==判断
注意:数组下标越界为undefined

变量:数字、字母、下划线、$组成,不能以数字开头,如果变量以var开头为局部变量,否则为全局变量,注意:var是伪局部变量(作用域会穿透函数!),可以使用let来定义真局部变量。

var/let区别
var:只有两个作用域:全局和函数
let:新增块级作用域
const区别:定义和赋值同时!一旦赋值不可改变,引用数据类型不可改变指向,可以改变指向对象中的属性

typeof可用来判断变量类型

3.1 字符串

转义字符:\

\'
\n
\t
\u4e2d \u#### Unicode编码
\x41 Ascll字符

长字符串:

var a = `abc
mn
ooo`

模板字符串(es6):

var name = "xiaopi3"
var b = `你好${name}`

字符串方法:

1. indexOf(src,indexFrom)   //从_位置开始往后找src首次出现的位置
2. replace(src,dst) //将src替换成dst
3. charAt(i)   返回第i索引字符
4. indexOf(str)返回第一个子串位置,无-1
5. lastIndexOf(str)
6. split(str)
7. substring(st_i,ed_i)返回索引间字符串
8. toLowerCase()
9. toUpperCase()

注意:对一个字符串的下标取值是只读的,赋值虽然不报错,但是无效

3.2 数组

可以包含任意类型,长度可变,多出来的是undefined,少的直接消失,数组遍历也可以用for of

数组定义:

  1. 变长:var arr=new Array();
  2. 定长:var arr2=new Array(3); 注意:定长后只能写三个

数组方法:

var arr = [1,2,3,4,5]
// 取值
arr[0]
// 查找元素
arr.indexOf(2)
// 切片,需要返回值
var x = arr.slice(0,2)
// 尾部添加元素
arr.push(9)
// 尾部删除元素
arr.pop()
// 头部添加
arr.unshift(5)
// 头部删除
arr.shift()
// 排序,需要返回值
var x = arr.sort()
// 反转
var x = arr.reverse()
// 拼接
var x = arr.concat([1,2,4])
// 转换成字符串,可指定连接符
var x = arr.join("-")

3.3 对象

赋值:对象名.key=value,key和value都是之前不存在的
删除:delete 对象名.key
继承:对象的继承通过原型

注意:对象中试图获取不存在的属性,不会报错,但是可以用if判断,如果属性不存在,则为false,但要注意value为false的情况,更推荐使用:"key" in 对象去判断该对象是否存在key属性,但是要注意该属性有可能是继承得来的,如果需要判断当前对象中是否存在自身本对象的某个属性:对象.hasOwnProperty("key")

对象遍历:可以使用for in

3.4 Map和Set

es6新特性

Map:相当于键值对集合

var map = new Map([["a",1]["b",4]["c",0]])
// 获取值
map.get("a")
// 赋值
map.set("a",12)
// 删除
map.delete("a")
// 遍历,拿到的是一个键值对,注意:只适用于实现了迭代器的对象,array|{}没有实现,所以不能使用
for(let x of map){}

Set:相当于去重集合

var set = new Set([4,11,1,11,4])
// 添加
set.add(12)
// 删除
set.delete(4)
// 判断包含
set.has(3)
// 遍历
for(let x of map){}

4 严格检查模式

在js代码最开始,第一行,书写:'use strict'可以用作代码检查,前提是编辑器使用es6语法

5 流程控制

判断、循环等都和java一样,特别的:
遍历:

// 如果xxx为数组,则遍历的索引
// 如果为对象,则遍历key
for(var num in xxx){}
// 遍历数组,打印值
for(var num of xxx){}
// 或
xxx.forEach(function(){})

6 函数

定义:

var x = function(){}
// 或
function x(){}

函数参数:
函数内部arguments是一个关键字,表示函数的传入的参数列表。函数参数列表不一定要和传入的参数列表长度相同!!
可变长度参数:...变量(es6)

function f(x,y,...a){console.log(a}

全局函数:全局函数不属于任何一个内置对象。
JS 包含以下 7 个全局函数,用于一些常用的功能:

escape()
unescape()
eval()    执行代码
isNan()
isFinite()
parseFloat()
parseInt()

var s="1+2+3";
eval(s);//只能计算可计算的,数字与字符相加不可计算。
 
setTimeout("func()",1000);系统调用函数,每隔特定事件触发函数

6.1 变量作用域

在函数内定义的变量是独立的,无法穿透到外部,除非使用闭包

作用域提升:在相同作用域下,var定义的变量会被提升到顶部,但是赋值不会,所以会导致一些奇怪的现象。使用let不会,定义处之前的调用都报不存在错误。

所有全局变量都会绑定到window对象上,该对象中的方法和属性可以直接使用。为了防止变量冲突,建议定义一个唯一的全局变量,其他的都定义在这个变量里即可

var all = {}
all.a=123
all.func1=function(){}

6.2 构造函数

构造函数用来构造一个对象,包括属性和方法

function person(name,age){
	this.name=name;
	this.age=age;
	function speak(something){
	...
	}
	this.func=speak;
}
 
var p1=new person("jack",12);
p1.func("asdfads");

7 this

this的指向于调用者有关,谁调用this,this就指向谁

apply:可以修改this的指向,所有函数都有这个方法

// 将需要this指向的目标对象传进去就可以了
fun1.apply(目标对象)

8 常用对象

typeof关键字可以用来判断一个对象的类型:

typeof 123  // 'number'
typeof true  // 'boolean'

8.1 Date

日期类,可以获取当前时间日期,可以设置时间日期

1. getTime()方法,返回 197011 日至今的毫秒数。
2. getFullYear() 从 Date 对象以四位数字返回年份。
3. getMonth() 从 Date 对象返回月份 (0 ~ 11)**需要+1**
4. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)5. getHours() 返回 Date 对象的小时 (0 ~ 23)6. getMinutes() 返回 Date 对象的分钟 (0 ~ 59)7. getSeconds() 返回 Date 对象的秒数 (0 ~ 59)8. getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)**星期日:0**

new Date(时间戳) // 获取时间戳代表的日期对象

该类没有格式化方式

8.2 JSON

格式:
对象:{}
数组:[]
所有的key都是字符串

对象转json:JSON.stringify(对象)
json转对象:JSON.parse(json字符串)

8.3 Math

Math对象包括以下方法:

PI
abs(x)
cos(x)/sin(x)
exp(x)
floor(x)小于等于的最大整数
ceil(x) 大于等于的最小整数
log(x)
max(x)
min(x)
pow(x,y)
random()
sqrt(x)

8.4 Function

示例:

function say(name,age){
    alert(name+" "+age);
}
say("pp",3);

直接new Function对象:

var sayFunc=new Function("name","age","alert(name+' '+age)");
sayFunc("pp",5);

Function属性:
返回参数个数:sayFunc.length
返回方法:sayFunc.toString() or sayFunc.valueOf()

9 面向对象

9.1 创建对象

对象初始化器

    var m={
        name:"m",
        age:2,
        shout:function(){
            alert(name+" "+age);
        },
        action:function(){
            alert("吃");
        }
    };
 
    alert(m.name);
    m.shout();

构造方法

    function m(name,age){
        this.name=name;
        this.age=age;
        this.shout=function(){
            alert("wo"+this.name+" "+this.age);
        };
        this.action=function(){
            alert("吃");
        };
    }
 
    var m=new m("m",2);
    alert(m.name);
    m.shout();

9.2 对象属性

  • 对象属性
    必须new出来才能调用

  • 私有属性
    只能用闭包取出来

  • 类属性
    类似java静态变量,可以用类名调用

function C(){
    this.objPro="对象属性";
    C.prototype.objPro2="对象属性2";
    var privatePro="私有属性";
}
C.classPro="类属性";
 
alert(C.classPro);
var c=new C();
alert(c.objPro);
alert(c.objPro2);

方法

function C(){
    var privateFunc=function(){
        alert("私有方法");
    };
    privateFunc();
    this.objFunc=function(){
        alert("对象方法");
    };
    C.prototype.objFunc2=function(){
        alert("对象方法2");
    };
}
C.classFunc=function(){
    alert("类方法");
};

9.3 继承

传统继承分为两种:
一种是相当于方法和属性的拷贝,在调用时是直接访问父类方法和属性;
一种是原型的继承,在访问时是调用子类的方法

// 原对象
function Animal(name,age){
    this.name=name;
    this.age=age;
    this.shout=function(){
        alert("我是:"+this.name+",今年:"+this.age);
    };
    this.action=function(){
        alert("会吃");
    };
}
// 拷贝,new Dog("pp",12)会发现就是拷贝了
function Dog(name,age){
    Animal.apply(this, [name,age]);
}
// 原型
Dog.prototype=new Animal();

原型继承的其他写法:
对象1.__proto__=对象2:对象1继承了对象2,可以调用对象2中的属性和方法,遵循就近原则
如果是函数:func1.prototype.新方法 = 方法体可以给func1新增一个方法

class继承(es6引入):

class A extends B{
	constructor(name,grade){
		super(name);
		this.grade = grade;
	}
	myGrade(){}
}
// 使用
new A()

9.4 多态

function Animal(){
    this.say=function(){
        alert("我是动物");
    };
}
 
function Dog(){
    this.say=function(){
        alert("我是狗");
    };
}
Dog.prototype=new Animal();
 
function Cat(){
    this.say=function(){
        alert("我是猫");
    };
}
Cat.prototype=new Animal();
 
function say(animal){
    if(animal instanceof Animal){
        animal.say();
    }
}
 
var dog=new Dog();
var cat=new Cat();
say(dog);
say(cat);

9.5 对象增强写法

es6后支持这种方式定义对象,name会获取外部name的值作为对象的值,方法也不用写function了

let obj = {
	name,
	age,
	run(){}
}

10 BOM

浏览器对象:
window______document:文档
|___history :浏览历史
|___location:地址栏

10.1 Window对象

window是js中默认对象,所有对其引用可以省略
Window.location=url;直接改变浏览器当前地址,相当于跳转

1. alert()   //弹出消息框
2. confirm()   弹出确认对话框
3. prompt()
4. setTimeout("func",ms) //定时执行一次
5. setinterval("func",ms)//执行多次
6. open(url,windowName,paras)  打开JS小个窗口
7. window.onload=... //发生在文档全部下载完毕的时候。
8. window.onresize=... //发生在窗口大小发生变化的时候。
9. close() 关闭当前窗口
10.showModalDialog(url,windowName,paras)   模式对话框,阻塞线程
11.returnValue 对话框返回值
12.dialogArguments 对话框参数 

onload事件和onresize事件是标签属性,同时window也支持该事件

10.2 navigator对象

浏览器相关信息,可以被人为修改,不建议使用该对象

10.3 screen对象

获取屏幕相关信息

10.4 location(重要)

代表当前页面的url信息

host // 网址
href // 域名+网址
protocol // 协议 https
location.assign(网址) // 重定向

10.5 document

document.cookie可以获取网页的cookie
服务端可以设置cookie:httpOnly,这样就不能取出来

10.6 history

代表浏览器的历史记录
window.history.go(n):n为当前页的偏移量,正负零,需要存在浏览历史。
history.back() :后退
history.forward():前进

10.7 模态对话框

str=window.showModalDialog("a.html","sss","dialogTop:100;dialogLeft:100;dialogWidth:20;dialogHeigh:5,scroll 1;status:0");
解释:
1–url
2–浏览器传递给对话框的一个对象数据,对话框可以通过window.dialogArguments取得
3–特征参数,由逗号分割

常用特征参数

dialogHeight>=100px
dialogWidth
diaologLeft
diaologTop
center:{yes|no|1|0} yes
help:{yes|no|1|0}   yes
resizable:{yes|no|1|0}  no
status:{yes|no|1|0} yes(modeless)   no(model)
scroll:{yes|no|1|0|on|off} yes

11 DOM

document_________links[]:超链接
|______anchors:锚点
|______images :所有标记
|______forms :所有form标记
|_____form elements :form中所有控件集合

HTML标记对象
任何标记都是DOM对象,具备:nodeName/innerHTML/innerText等属性

常用操作dom的方式:

// 通过id来获取dom节点
var id1 = document.getElementById("id1")
// 获取父节点
var parent = id1.parentElement;
// 获取第一个子节点
var child = parent.childern[0]
// 移除一个节点(自己不能移除自己)
parent.removeChild(id1)
// 插入节点
parent.appendChild(id1)
// 创建节点,创建一个p标签,然后可以将这个标签放到其他标签里
var p = document.createElement('p')
p.id = "pid"
p.innerText = "hello p"
// 自定义赋值标签属性,将p这个元素的属性名为xxx的值赋为yyy
p.setAttribute("xxx","yyy")

12 事件

click事件
除button外,超链接、submit按钮、reset按钮都有click事件,但有内置事件处理,同时也可以添加事件。【自定义事件若返回true则执行默认事件,否则取消】。

鼠标事件
onMouseOver 进入范围触发
onMouseOut 离开范围触发
onMouseMove 移动鼠标触发
onchange 主要针对文本框类标记,textbox textarea select 等,当内容改变,则触发事件。

键盘事件
主要针对与字符输入相关的标记,如文本框
onKeyDown
onKeyUp
onKeyPress

表单提交事件
form上的提交属性:onsubmit
onsubmit="return false"时,表单提交被拦截!!

对于使用前端做md5加密时,可以设置隐藏域,因为md5加密后密码变长,会在页面密码框中显式看出边长,不利于用户体验。使用隐藏域来,将变长的密码放在隐藏域,然后name=password,显式的密码框不设name,这样是最优的解决方案

13 JQuery

JavaScript方法库

相关文档参考:http://jquery.cuishifeng.cn

可以选择引入静态文件,也可以选择引入CDN

百度的CDN:<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

使用格式:$(选择器).动作(函数)

// 绑定到按钮bt
$(#bt).click(function(){alert("click"})

13.1 入口函数

$(document).ready(function(){})
// or
$(function(){})

13.2 操作DOM

<ul id = "test>
	<li class = "js">abc</li>
	<li name = "py">py</li>
</ul>

// 操作里面的文本
// 获取值
var a = $('test li[name=py]').text();
// 设置值
$('test li[name=py]').text("js");
// 操作html
$('test li[name=py]').html(...);
// 操作css
$('test li[name=py]').css({"color":"red"});
// 显隐
$('test li[name=py]').show()
$('test li[name=py]').hide()
// 显隐切换
$('test li[name=py]').toggle()
$(window).width()

学习参考:
源码之家可以看游戏源码
Layui(Layer可以学习以下)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值