前端三剑客之对象
1、Object对象
1)创建Object实例对象创建和访问方式
//方式一
var person=new Object();
person.name="kang";
person.age=23;
//方式二 假如对象内部属性比较多，就需要这种方式,属性可加引号，也可不加
var person={
name:"kang",
age:23
};
//Object对象可以通过.和[]进行访问,并且[]访问必须是引号引起来
console.log(person.name);//kang
console.log(person["age"]);//23
for(var attr in person){
console.log(attr,person[attr]);
}
/*name kang
age 23*/2)序列化和反序列化
var data = {
name: "xiaoming",
age: 22,
say: function(){
alert(123);
}
};
// 把json对象转换成json字符串，序列化
var ret = JSON.stringify(data);
console.log(ret);//{"name":"xiaoming","age":22}
// 把json字符串转换成json对象，反序列化
var str = `{"name":"xiaoming","age":22}`;
var ret = JSON.parse(str);
console.log(ret);//{name: 'xiaoming', age: 22}2、Date对象
1）时间字符转换
var now1=new Date();
console.log(now1);//Tue Mar 29 2022 17:42:48 GMT+0800 (中国标准时间)
console.log(now1.toLocaleString());//2022/3/29 17:44:09
//参数为字符串
var d2=new Date("2004/3/20 11:12");
console.log(d2.toLocaleString( ));//2004/3/20 11:12:00
var d3=new Date("04/03/20 11:12");
console.log(d3.toLocaleString( ));//2020/4/3 11:12:00
//参数为毫秒
var d4=new Date(5000);
console.log(d4.toLocaleString( ));//1970/1/1 08:00:05
console.log(d4.toUTCString());//Thu, 01 Jan 1970 00:00:05 GMT
//方法4：参数为年月日小时分钟秒毫秒
var d5=new Date(2004,2,20,11,12,0,300);
console.log(d5.toLocaleString( ));//毫秒并不直接显示2004/3/20 11:12:002）获取时间信息
var now1=new Date();
console.log(now1.getDate());//29获取日
console.log(now1.getDay());//2即周二获取星期
console.log(now1.getFullYear());//2022获取整年
console.log(now1.getYear());//122获取年
console.log(now1.getMonth());//2(即3月)获取月
console.log(now1.getHours());//17 获取时
console.log(now1.getMinutes());//58 获取分
console.log(now1.getSeconds());//4 获取秒
console.log(now1.getMilliseconds());// 173 获取毫秒
//时间戳转换
console.log(now1.getTime());//1648547884173 返回累计毫秒数(从1970/1/1午夜)3）日期和时间的转换
// 返回国际标准时间字符串
toUTCString()
// 返回本地格式时间字符串
toLocaleString()
// 返回累计毫秒数(从1970/1/1午夜到本地时间) 1648547884000
Date.parse(x)
// 返回累计毫秒数(从1970/1/1午夜到国际时间)
Date.UTC(x)3、Math对象
var x=100.2;
console.log(x.toFixed(2));//保留两位小数100.20
var y=3.3
console.log(Math.floor(y));//向下取整3
console.log(Math.ceil(y));//向上取整4
console.log(Math.abs(-12));//取绝对值12
console.log(Math.pow(3,2));//类似于3**2，现在废弃。9
console.log(Math.random());//取0到1之间的随机数
console.log(Math.random());0-10之间的随机数
console.log(Math.round(Math.random()*10));//round四舍五入，取0-10之间的整数4、Function对象
//函数定义方法一
function 函数名(参数){
return 返回值
}
//函数定义方法二
var func=new Function("参数一","参数二","function_body");
//调用方式func()不同于python，js代码在运行时，会分为两大部分———检查装载 和 执行阶段。(因此函数定义和调用顺序不用固定)
- 检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明
- 执行阶段：变量的赋值、函数的调用等，都属于执行阶段。
2）函数中的arguments对象
arguments是传入的实参对象
3）函数中的返回值
1、在函数体内可以包含多条 return 语句，但是仅能执行一条 return 语句
2、函数的参数没有限制，但是返回值只能是一个；如果要输出多个值，可以通过数组或对象进行设计。
4）变量作用域
var num = 10; // 在函数外部声明的变量, 全局变量
function func(){
// num = 20; // 函数内部直接使用变量,则默认调用了全局的变量,
//var num = 20; // 函数内部使用var 或者 let声明的变量则是局部变量
// 函数内部直接使用变量,则默认调用了全局的变量,
// 使用变量的时候,解释器会在当前花括号范围值搜索是否有关键字var 或者 let 声明了变量,如果没有,则一层一层往外查找最近的声明
// 如果最终查找不到,则直接报错! 变量名 is not define!
console.log("函数内部num：",num)
}
func();
console.log("全局num：",num);5）匿名函数
// 匿名函数赋值变量
var foo = function () {
console.log("这是一个匿名函数！")
};
// 匿名函数的自执行
(function (x,y) {
console.log(x+y);
})(2,3)
// 匿名函数作为一个高阶函数使用
function bar() {
return function () {
console.log("inner函数！")
}
}
bar()()使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！
5、BOM对象
1）window对象
window.alert("nihao");
var input1=window.prompt("这是一个输入文本的框？");
console.log(input1);//不输入和取消为null，输入即返回输入值
var panduan=window.confirm("你是否要删除本文件？");
console.log(panduan);//true or false
// close() 关闭当前浏览器窗口
window.close();
//打开一个新的浏览器窗口
window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px");2)定时方法
// 设置循环定时器
var ID = window.setInterval(code,millisec) // 每millisec毫秒执行一次code
// 取消循环定时器
window.clearInterval(ID);
// 设置单次定时器
var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
// 取消单次定时器
window.clearTimeout(ID);
//code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计。
//案例比如定时器3）Location地址栏对象
Title
4）本地存储对象
localStorage 本地永久存储
localStorage.setItem("变量名","变量值"); 保存一个数据到存储对象
localStorage.变量名 = 变量值 保存一个数据到存储对象
localStorage.getItem("变量名") 获取存储对象中保存的指定变量对应的数据
localStorage.变量名 获取存储对象中保存的指定变量对应的数据
localStorage.removeItem("变量名") 从存储对象中删除一个指定变量对应的数据
localStorage.clear() 从存储对象中删除所有数据
sessionStorage 本地会话存储
sessionStorage.setItem("变量名","变量值"); 保存一个数据到存储对象
sessionStorage.变量名 = 变量值 保存一个数据到存储对象
sessionStorage.getItem("变量名") 获取存储对象中保存的指定变量对应的数据
sessionStorage.变量名 获取存储对象中保存的指定变量对应的数据
sessionStorage.removeItem("变量名") 从存储对象中删除一个指定变量对应的数据
sessionStorage.clear() 从存储对象中删除所有数据localStorage和sessionStorage的区别：
1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
2、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
3、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
4、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
6、DOM对象（文档对象模型）
1、整个html会部署在一个document对象里
2、获取当前文档对象方法console.log(document);
1)获取dom
//获取dom对象和数组，document对象可以是任意dom对象
var doms=document.getElementsByTagName('标签名');
var dom1=document.getElementById('id值');
var dom2s=document.getElementsByClassName("类名");
2）dom即elementNode
elementNode.parentElement//父节点标签元素
elementNode.children//所有子标签
elementNode.firstElementChild//第一个子标签元素
elementNode.lastElementChild//最后一个子标签元素
elementNode.nextElementSibling//下一兄弟标签元素
elementNode.previousElementSibling//上一个兄弟标签元素3）css查找
document.querySelector("css选择器");//返回第一个符合条件的标签元素
document.querySelectorAll("css选择器");//返回所有符合条件的标签元素4）操作标签
1>文本操作
console.log(this.innerHTML)//获取文本部分包括标签
console.log(this.innerText)//获取文本
this.innerHTML="yuan"修改文本部分
2>value操作
对于像input那样，没有内容，内容值由属性value决定的可以使用
console.log(this.value)//获取value值
this.value="test";设置value值
3>css样式操作
this.style.color="red"
4>属性操作
elementNode.getAttribute("属性名")//获取属性值
elementNode.setAttribute("属性名","属性值")//设置属性值
elementNode.removeAttribute("属性名")//移除属性
5>class属性操作
elementNode.className//获取类名
elementNode.classList.add("类名")；//添加类名
elementNode.classList.remove("类名");//移除类名
6>节点操作
document.createElement("标签名")；//创建节点
somenode.appendChild(newnode);//在最后子节点追加一个子节点
somenode.removeChild()//获取删除的子元素，通过父节点去删除
somenode.replaceChild(newnode,某个节点)；//替换节点
somenode.insertBefore(newnode,某个节点)//把增加的节点插入某个节点的前面（somenode作为父节点）5）绑定事件
1>静态绑定：
这是一个测试
你好
2>动态绑定
这是一个测试
你好
6)常用事件
window.onload页面加载
form.onsubmit表单提交
select.onchange选项改变
onmouse鼠标事件
- onmouseover鼠标浮于元素上
- onmouseleave鼠标移开
- onmouseout鼠标离开被选元素还是任何子元素都会触发（冒泡）
onkey键盘事件
- onkeydown键按下
- onkeyup键离开
onblur失去焦点，onfocus获取焦点
如何阻止冒泡事件