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);
网友评论