javascript 初始笔记

2020-11-29 本文已影响0人马铃薯a

JavaScript 笔记

1.对象

delete：动态删除
xxx in xxx :判断属性值是否在这个对象中

例:
```
// age: 属性
// person: 对象
age.in person
```
hasOwnProperty:判断一个属性是否是这个对象自身拥有的

2.forEach 循环

var age = [1,2,3,4,5,6]
// js 对应 java 方法
for in{}  -- java1
for of{}  -- java2

// java1
for(var in age){}
// java2
for(User user : users){}

3.ES6 新特性

Map

var map = new map();
// 新增
map.set('admin',123456)
// 删除
map.delete
// 查 key - vlaue
var name = map.get("-")
// 遍历 Map
var map = new map([["tom",100]["cat",100]])
for(let x of map){
    console.log(x);
}

set: 无序不重复的集合

// 添加 .add
var set = new set();
// 删除 .delete
// 去重输出
Arrage.from(set)
// 判断是否包含
set.has
// 遍历 set
var set = new set([5,6,7])
for(let x of set){
    console.log(x)
}

4.函数

规则:

查找函数, 由 "内" 向 "外" 查找.
js 执行引擎, 自动提升了 y 的声明, 不会提升 y 的赋值
默认所有的全局变量, 都会自动绑定在 windows 对象下
js 实际上只有一个全局作用域, 任何变量 ( 函数也可以视为变量 ) , 假设没有在函数作用范围内找到, 就会向外查找: 如果在全局作用域没有找到, 报错: RefrenceError.
常量: const
在 js 中可以控制 this 的指向: -apply

getAge.apply(kuang.[])

arguments:代表传递进来的所有参数, 是一个数组

rest:获取除了参数之外的所有参数

5.Date 日期和时间

// 获取当前时间 new Date
var new = new Date();
// 年
new.getFullYear();
// 月 0-11月
new.getMonth();
// 天
new.getDate();
// 星期几
new.getDay();
// 时
new.getHours();
// 分
new.getMinutes();
// 秒
new.getSeconds();
// 时间戳
new.getTime();
// 时间戳传时间
new Date(now.getTime())
// 本地时间
new.toLocaleString

6.json

// 对象转化为Json字符串
var jsonUser = JSON.Stringify('-');
// Json 字符串转化为对象
var obj = JSON.parse('-');
// 例 类似java中的继承
var a = {};
var b = {};
b._proto_ = a

7.class继承

ES6 之前

funtion student(name){
    this.name = name;
    // 给 student 新增一个方法
    student.prototype.hello = funtion(){
        alert('hello')
    }
}

ES6

class student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}
var xiaoming = new student("xiaoming") // 引用
class ??? extend student. // 继承

8.操作BOM对象 BOM:浏览器对象模型

windows: 代表浏览器的窗口

navigator: 封装了浏览器的信息(不建议使用)

screen: 屏幕的属性, 屏幕尺寸:

例:screen.width:

location: 代表当前页面的 URL 信息

reload: ???.reload 刷新网页

location.assign("地址"): location : 设置心的地址

document: 代表当前的页面, 可以选择结点 HTML, DOM 文档树

document.cookie: 获取 cookie

服务器设置 cookie:httpOnly 保护 cookie

history: 代表浏览器的历史记录

history.back: 后退

history.forword():前进

9.DOM 文档对象模型

// 标签选择
document.getElementByTagName();
// Id 选择器
document.getElementById();
// class 选择器
document.getElementsByClassName();
// 获取父节点下的所有节点
father.children;
// 第一个节点
father.firstchild
// 最后一个节点
father.lastchild

<div id="id1"></div>
<script>
    // 修改文本的值
    id1.innerText = '456';
    // HTML 标签文本 覆盖原本的
    id1.innerHTML = '-';
    // 文本变成红色
    id1.style.color = 'red'
</script>

删除节点

<div id="farther">
    <h1>
        title
    </h1>
    <p id="id1">
        p1
    </p>
    <p id="id2">
        p2
    </p>
</div>
<script>
    var self = doucument.getElementSyId("p1");
    var father = p1.prentElemnt;
    // removeChild(self): 数组
    father.removeChild(self)
</script>

10. 插入节点

<div>
    <p id='1'>
        js1
    </p>
    <p id='2'>
        js2
    </p>
    <p id='3'>
        js3
    </p>
</div>
<sprict>
    var js = document.getElementById("js");
    var list = docunment.getElementById("1");
    // 追加到后面 (1)
    list.appendchild(js);
</sprict>

// 创建一个新的标签进行插入
var newp = document.createElement('p');  // 创建一个 P 标签
new p.id = 'new';
new.innerText = 'hello';

// 呈现
<p id="new">
    hello
</p>

11. 操作表单

???.value: 修改输入框的值

单选框与多选框用 ???.value 只能取到固定的值.

???.checked: 查看返回结果, 是否为 true, 如果为true, 则被选中;

???.checked = true 赋值

12. MD5 加密

<script src="https://cdn.bootcss.com/blaeimp-md5/2.10.0/js/md5.min.js"></script>
pwb.value=md5(pwd.value);