js高级_面向对象&&内置对象&&BOM&&封装
JavaScript 面向对象
一 类的定义和使用
定义格式:
class 类名{
constructor(){
变量赋值;
}
方法名(参数列表){
方法体;
return 返回值;
}
}
使用格式
let 对象名 = new 类名(实际变量值);
对象名.方法名();
简单案例
<script>
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
show(){
document.write(this.name + "," + this.age + "
");
}
eat(){
document.write("吃饭...");
}
}
let p = new Person("张三",23);
p.show();
p.eat();
</script>
二字面量定义类和使用
定义格式:
let 对象名 = {
变量名:变量值,
变量名:变量值,
...
方法名:function(参数列表) {
方法体;
return 返回值;
}
}
使用格式
对象名.变量名
对象名.方法名();
例如
<script>
let person = {
name : "张三",
age : 23,
hobby : ["听课","学习"],
eat : function() {
document.write("吃饭...");
}
};
document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "
");
person.eat();
</script>
三 继承
继承:让类与类产生子父类的关系,子类可以使用父类有权限的成员
继承关键字:extends
顶级父类:Object
例如
<script>
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
eat(){
document.write("吃饭...");
}
}
class Worker extends Person{
constructor(name,age,salary){
super(name,age);
this.salary = salary;
}
show(){
document.write(this.name + "," + this.age + "," + this.salary + "
");
}
}
let w = new Worker("张三",23,10000);
w.show();
w.eat();
</script>
JavaScript 内置对象
一 Number
方法名 |
说明 |
parseFloat() |
将传入的字符串浮点数转为浮点数 |
parseInt() |
将传入的字符串整数转为整数 |
<script>
document.write(Number.parseFloat("3.15ba45")+"
")
document.write(Number.parseInt("20.5a2b3c4")+"
")
script>
二 Math
方法名 |
说明 |
ceil(x) |
向上取整 |
floor(x) |
向下取整 |
round(x) |
把数四舍五入为最接近的整数 |
random() |
随机数,返回的是0.0-1.0之间范围(含头不含尾) |
pow(x,y) |
幂运算 x的y次方 |
<script>
document.write(Math.ceil(4.4) + "
");
document.write(Math.floor(4.4) + "
");
document.write(Math.round(4.1) + "
");
document.write(Math.round(4.6) + "
");
document.write(Math.random() + "
");
document.write(Math.pow(2,3) + "
");
script>
三 Date
构造方法 |
说明 |
Date() |
根据当前时间创建对象 |
Date(value) |
根据指定毫秒值创建对象 |
Date(year,month,[day,hours,minutes,seconds ,milliseconds]) |
根据指定字段创建对象(月份是0~11) |
成员方法
成员方法 |
说明 |
getFullYear() |
获取年份 |
getMonth() |
获取月份 |
getDate() |
获取天数 |
getHours() |
获取小时 |
getMinutes() |
获取分钟 |
getSeconds() |
获取秒数 |
getTime() |
返回据1970年1月1日至今的毫秒数 |
toLocaleString() |
返回本地日期格式的字符串 |
<script>
let d1 = new Date();
document.write(d1 + "
");
let d2 = new Date(10000);
document.write(d2 + "
");
let d3 = new Date(2222,2,2,20,20,20);
document.write(d3 + "
");
document.write(d3.getFullYear() + "
");
document.write(d3.getMonth() + "
");
document.write(d3.getDate() + "
");
document.write(d3.getHours()+"
");
document.write(d3.getMinutes()+"
");
document.write(d3.getSeconds()+"
");
document.write(d3.toLocaleString());
</script>
四 String
构造方法 |
说明 |
String(value) |
根据指定字符串创建对象 |
let s = “字符串” |
直接赋值 |
成员方法
成员方法 |
说明 |
length属性 |
获取字符串长度 |
charAt(index) |
获取指定索引处的字符 |
indexOf(value) |
获取指定字符串出现的索引位置,找不到为-1 |
substring(start,end) |
根据指定索引范围截取字符串 (含头不含尾) |
split(value) |
根据指定规则切割字符串,返回数组 |
replace(old,new) |
使用新字符串替换老字符串 |
<script>
let s1 = new String("hello");
document.write(s1 + "
");
let s2 = "hello";
document.write(s2 + "
");
document.write(s2.length + "
");
document.write(s2.charAt(1) + "
");
for (let i = 0; i <s1.length; i++) {
document.write(s1.charAt(i) + "
");
}
document.write(s2.indexOf("l") + "
");
document.write(s2.substring(2,4) + "
");
let s3 = "张三,23,男";
let arr = s3.split(",");
for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + "
");
}
let s4 = "你会不会跳伞啊?让我落地成盒。你妹的。";
let s5 = s4.replace("你妹的","***");
document.write(s5 + "
");
let s6 = s4.replace(s4,"*****");
document.write(s6+"
");
</script>
五 RegExp
构造方法 |
说明 |
RegExp(规则) |
根据指定规则创建对象 |
let reg = /^规则$/ |
直接赋值 |
成员方法 |
说明 |
test(匹配的字符串) |
根据指定规则验证字符串是否符合 |
规则
表达式 |
说明 |
[a] |
只能是a |
[abc] |
只能是abc中的某一个 |
[1] |
只能是1 |
[123] |
只能是123中的某一个 |
[a-z] |
可以是a到z中的某一个 |
[A-Z] |
可以是A到Z中的某一个 |
[0-9] |
可以是0到9中的某一个 |
{5} |
只能出现5次 |
{4,6} |
只能出现4到6次 |
拓展
[a-z] 这个字符必须是小写字母
[abc] 字符必须是abc
[0-9] 这个字符必须是数字
[a-zA-Z0-9] 这个字符必须是字母或者是数字
[^a-z] 这个字符不是小写字母
[\d] 等同于[0-9]
[\w] 等同于[a-zA-Z_0-9] 字母、数字、下划线
[\D] 等同于[^0-9]
[\W] 等同于[^a-zA-Z0-9_]
. 代表匹配任意字符, 若只是想代表普通数据. 需要使用转义字符来表示\.
X* X这个字符可以出现零次或者多次[0-9]*
X? X这个字符可以出现零次或者一次[0-9]?
X+ X这个字符可以出现一次或者多次 [0-9]+
X{m} X这个字符出现次数正好m次
X{m, } X这个字符出现次数至少m次
X{m, n} X这个字符出现次数至少m次,最多n次
(X)+ ()括号代表X所表示的内容作为一组数据出现;()括号后面的+号,代表这组数据可以出现一次或者多次
^X ^匹配开头
X$ $匹配结尾
<script>
let reg1 = /^[1][358][0-9]{9}$/;
document.write(reg1.test("18688888888") + "
");
let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
document.write(reg2.test("zhang_san123"));
</script>
六 Array
成员方法 |
说明 |
push(元素) |
添加元素到数组的末尾 |
pop() |
删除数组末尾的元素 |
shift() |
删除数组最前面的元素 |
includes(元素) |
判断数组是否包含给定的值 |
reverse() |
反转数组中的元素 |
sort() |
对数组元素进行排序 |
<script>
let arr = [1,2,3,4,5];
arr.push(6);
document.write(arr + "
");
arr.pop();
document.write(arr + "
");
arr.shift();
document.write(arr + "
");
document.write(arr.includes(2) + "
");
arr.reverse();
document.write(arr + "
");
arr.sort();
document.write(arr + "
");
</script>
七 Set
JavaScript 中的set集合 ,元素唯一,存取顺序一致
成员方法 |
说明 |
add(元素) |
向集合中添加元素 |
size属性 |
获取集合长度 |
keys() |
获取迭代器对象 |
delete(元素) |
删除指定元素 |
<script>
let s = new Set();
s.add("a");
s.add("b");
s.add("c");
s.add("c");
document.write(s.size + "
");
let st = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st.next().value + "
");
}
document.write(s.delete("c") + "
");
let st2 = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st2.next().value + "
");
}
</script>
八 Map
JavaScript 中的 Map 集合,key 唯一,存取顺序一致
成员方法 |
说明 |
set(key,value) |
向集合中添加元素 |
size属性 |
获取集合长度 |
get(key) |
根据key获取value |
entries() |
获取迭代器对象 delete(key) 根据key删除键值对 |
delete(key) |
根据key删除键值对 |
<script>
let map = new Map();
map.set("张三",23);
map.set("李四",24);
map.set("李四",25);
document.write(map.size + "
");
document.write(map.get("李四") + "
");
let et = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et.next().value + "
");
}
document.write(map.delete("李四") + "
");
let et2 = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et2.next().value + "
");
}
</script>
九 JSON
json介绍
JSON(JavaScript Object Notation):是一种轻量级的数据交换格式
它是基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于计算机解析和生成,并有效的提升网络传输效率
拓展...
json字符串是一种规范 在不同语言中都对应有实现
没有方法 function
Json | js对象 | java map | java对象
1.json字符串,kv形式的字符串
{
"name":"张三丰",
"age":18,
"hobby":["sing","dance"]
}
2.js对象 多了方法部分
{
id: 22,
account: "123456",
run:function() {
console.log("run")
}
}
3.java中的hashmap,也是key - value形式
{
"key": "value"
}
4.java对象
class 类名{
String name = "zhangsan";
Integer age = 18;
}
JSON常用方法
成员方法 |
说明 |
stringify(对象) |
将指定对象转换为json格式字符串 |
parse(字符串) |
将指定json格式字符串解析成对象 |
<script>
let weather = {
city : "北京",
date : "2088-08-08",
wendu : "10° ~ 23°",
shidu : "22%"
};
let str = JSON.stringify(weather);
document.write(str + "
");
let weather2 = JSON.parse(str);
document.write("城市:" + weather2.city + "
");
document.write("日期:" + weather2.date + "
");
document.write("温度:" + weather2.wendu + "
");
document.write("湿度:" + weather2.shidu + "
");
</script>
十 案例 表单提交
表单
<div class="login-form-wrap">
<h1>黑马程序员</h1>
<form class="login-form" action="#" id="regist" method="get" autocomplete="off">
<label>
<input type="text" id="username" name="username" placeholder="Username..." value="">
</label>
<label>
<input type="password" id="password" name="password" placeholder="Password..." value="">
</label>
<input type="submit" value="注册">
</form>
</div>
<script>
document.getElementById("regist").onsubmit = function() {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let reg1 = /^[a-zA-Z]{4,16}$/;
if(!reg1.test(username)) {
alert("用户名不符合规则,请输入4到16位的纯字母!");
return false;
}
let reg2 = /^[\d]{6}$/;
if(!reg2.test(password)) {
alert("密码不符合规则,请输入6位纯数字的密码!");
return false;
}
return true;
}
</script>
JavaScript BOM
BOM介绍
BOM(Browser Object Model):浏览器对象模型。
将浏览器的各个组成部分封装成不同的对象,方便我们进行操作
Navigator 浏览器对象
History 历史记录对象
Window 窗口对象
Location 地址栏对象
Screen 显示器屏幕对象
一 Window 窗口对象
定时器
唯一标识 setTimeout(功能,毫秒值):设置一次性定时器。
clearTimeout(标识):取消一次性定时器
唯一标识 setInterval(功能,毫秒值):设置循环定时器
clearInterval(标识):取消循环定时器
加载事件
window.onload:在页面加载完毕后触发此事件的功能。
<script>
function fun(){
alert("该起床了!");
}
let d1 = setTimeout("fun()",3000);
clearTimeout(d1);
let d2 = setInterval("fun()",3000);
clearInterval(d2);
window.onload = function(){
let div = document.getElementById("div");
alert(div);
}
</script>
二 Location 地址栏对象
href 属性
就是浏览器的地址栏。我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容
let url = location.href;
<body>
<p>
注册成功!<span id="time">5</span>秒之后自动跳转到首页...
</p>
</body>
<script>
let num = 5;
function showTime() {
num--;
if(num <= 0) {
location.href = "index.html";
}
let span = document.getElementById("time");
span.innerHTML = num;
}
setInterval("showTime()",1000);
</script>
三案例 动态广告
<script>
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "block";
},3000);
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "none";
},6000);
</script>
JavaScript 封装
封装思想
封装:将复杂的操作进行封装隐藏,对外提供更加简单的操作
获取元素的方法
document.getElementById(id值):根据 id 值获取元素
document.getElementsByName(name值):根据 name 属性值获取元素们
document.getElementsByTagName(标签名):根据标签名获取元素们
我们之前的操作都是基于原生 JavaScript 的,比较繁琐。
JQuery 是一个前端框架技术,针对 JavaScript 进行了一系列的封装,使得操作变得非常简单!
案例
my.js
这里将一些方法稍作封装在my.js里,做一个简单的封装
底层还是调用原生方法
function getById(id){
return document.getElementById(id);
}
function getByName(name) {
return document.getElementsByName(name);
}
function getByTag(tag) {
return document.getElementsByTagName(tag);
}
function removeself(el){
let parent = el.parentElement;
parent.removeChild(el);
}
<body>
<div id="div1">div1</div>
<div name="div2">div2</div>
</body>
<script src="my.js"></script>
<script>
let div1 = getById("div1");
alert(div1);
let divs = getByName("div2")
alert(divs.length);
let div2 = getByTag("div");
alert(div2.length);
removeself(div1);
</script>