本文详细介绍了JavaScript中对象的创建、操作、序列化和反序列化，包括字面量、new Object()和Object.create()方法。此外，还探讨了内置对象如String、Math和Date的方法，如字符串的substring、Math.random和日期的获取与设置。最后，讲解了事件处理，包括事件源、事件类型、事件流和不同级别的事件绑定方式。
1.对象
一、对象的创建
1、字面量形式创建对象
var 对象名 = {};//空对象
var 对象名 = {
键:值,
键:值,
...
};
2、通过new一个Object创建
var 对象名 = new Object(); // 空对象
3、通过Object对象的create方法创建
var 对象名 = Object.create(null);//空对象
var 对象名 = Object.create(对象);
// 对象的创建
// 字面量形式创建对象
var obj1 = {};//空对象
console.log(obj1);
var obj2 = {
name:'zhangsan',
age:18,
};
console.log(obj2);
// 通过new一个Object创建
var obj3 = new Object();//空对象
console.log(obj3);
// 通过Object对象的create方法创建
var obj4 = Object.create(null);//空对象
console.log(obj4);
var obj5 = Object.create(obj2);
console.log(obj5);
二、对象的操作
获取对象的属性 (如果属性不存在，则获取null)
对象名.属性名;
设置对象的属性 (如果属性存在则修改属性值，如果不存在则添加一个属性值)
对象名.属性名 = 值;
// 对象的操做
// 获取对象属性
// 获取不存在的属性
console.log(obj1.name);
console.log(obj3.name);
console.log(obj4.name);//undefined
// 获取存在的属性
console.log(obj2.name);
console.log(obj5.name);//zhangsan
// 设置对象的属性
// 存在的属性值，修改属性值
obj2.age = 20;
console.log(obj2);
// 不存在的属性值，新增属性值
obj2.upwd = '123456';
console.log(obj2);
console.log('====================')
三、对象的序列化和反序列化
序列化：将js对象（json对象）转换成json字符串
var 变量名 = JSON.stringify(对象);
反序列化：将json字符串转换成js对象（json对象）
var 对象名 = JSON. parse(JSON字符串);
// 对象的序列化和反序列化
// 序列化
// JSON对象
var obj = {
name:'zhangsan',
pwd:"123456",
age:18,
};
obj.name = 'lisi'
console.log(obj);
// 将JSON对象转换成JSON字符串
var objToStr = JSON.stringify(obj);
console.log(objToStr);
console.log('====================');
// JSON字符串
var jsonStr = '{"name":"zhangsan","pwd":"123456","age":18}';
jsonStr.name="lisi";
console.log(jsonStr);
// 将JSON字符串转换成json对象
var strToObj = JSON.parse(jsonStr);
console.log(strToObj);
console.log('====================')
四、this
谁调用函数，this指代谁
1、直接调用函数，this代表的全局的window对象
2.调用对象中的函数，this代表的是对象本身
// this
//1、直接调用函数，this代表的全局的window对象
function test(){
console.log('这是一个测试方法');
console.log(this);//window对象
}
test();
//2.调用对象中的函数，this代表的是对象本身
var o = {
name:'zhangsan',
age:18,
sayhello:function(){
console.log('你好');
console.log(this);//代表当前o对象
}
}
o.sayhello();2.内置对象
string
charAt(idx) 返回指定位置处的字符
indexOf(Chr) 返回指定子字符串的位置，从左到右。找不到返回-1
substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到末尾
substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到末尾
toLowerCase() 将字符串中的字符全部转换成小写
tuUpperCase() 将字符串中的字符全部转换成大写
length 属性，不是方法，返回字符串的长度。
Math
Math.random() 随机数
Math.cell() 向上取整，大于最大整数
Math.floor() 向下取整，小于最小整数string
Date
获取日期
getFullYear() 年
getMonth() 月
getDate() 日
getHours() 时
getMinutes() 分
getSeconds() 秒
设置日期
setYear()
setMonth()
setDate()
setHours()
setMinutes()
setSeconds()
toLoacaleString()转换成本地时间字符串
<script type="text/javascript">
var str ='Hello world';
console.log(str);
console.log(str.substring(3));//从下标三开始，截取到最后
console.log(str.substring(3,5));//从下标三开始，到下标5结束
console.log(str.toLowerCase());//转小写
console.log(str.toUpperCase());//转大写
console.log(Math.random());//随机数 1以内
console.log(Math.ceil(1.2));//向上取整，大于最大整数 2
console.log(Math.floor(1.2));//向下取整，小于最小整数string 1
//得到日期对象
var date = new Date();
console.log(date);
console.log(date.getFullYear());//年
console.log(date.getMonth()+1);//月0~11
console.log(date.getDate());//日
console.log(date.getHours());//时
console.log(date.getMinutes());//分
console.log(date.getSeconds());//秒
var dateMin = date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes();
var dateStr = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds()
console.log(dateStr);
</script>js事件
事件
事件中几个名词
事件源：给什么元素/标签绑定事件
时间名：绑定什么事件
事件监听：浏览器窗口
执行函数：事件触发后需要执行什么代码
常用事件类型
onload: 当页面或图像加载完毕后立即触发
onblur: 元素失去焦点
onfocus: 元素获得焦点
onclick: 鼠标点击某个对象
onchange: 用户改变域的内容
onmouseover:鼠标移动到某个元素上
onmouseout: 鼠标从某个元素上离开
onkeyup: 某个键盘的键被松开
onkeydown: 某个键盘的键被按下
事件流
事件冒泡：事件开始时由最具体元素接受，然后逐级向上传播到较为不具体的节点
事件捕获：事件开始时由文档节点接受，然后逐级向下传播到具体的元素节点。在事件到达之前将事件捕获
事件处理程序（事件绑定方式）
1.html事件处理程序
直接在HTML元素上绑定事件
2.DOM0级事件
先获取事件源,再为事件源绑定事件
事件源顺序一定要在事件前
不能同时给元素绑定相同事件多次
3.DOM2级事件
事件源.addEventListener('事件类型',执行函数,参数,true/false)
能同时给元素绑定相同事件多次
注 通过id属性值获取节点对象
document.getElementById('id属性值');
-->
<!--
onload事件 当文档 (html页面）加载完毕后执行
-->
<body onload="loadWindow()">
<!--
onclick事件；点击事件（单击事件）
-->
<button onclick="test()">按钮</button>
<!-- 常用事件类型 -->
<!--
onblur事件：失焦
onfocus事件：聚焦
-->
姓名:<input type="text" onblur="aa()" onfocus="bb()" />
<!-- onchange事件 元素的值发生改变时发生的事件 -->
城市:<select onchange="changeCity()">
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
<!-- HTML事件处理程序 -->
<button type="button" onclick="alert('hello')">按钮1</button>
<!-- DOM0级事件 -->
<button type="button" id="btn2">按钮2</button>
<!-- DOM2级事件 -->
<button type="button" id="btn3">按钮3</button>
</body>
<script type="text/javascript">
function loadWindow(){
console.log('文档加载完毕');
}
function test(){
console.log('按钮被点击了');
}
function aa(){
console.log('失焦');
}
function bb(){
console.log('聚焦');
}
function changeCity(){
console.log('值改变了');
}
// DOM0级事件
// 1、获取事件源
var btn2 = document.getElementById('btn2');
// 2.给事件源绑定指定事件
btn2.onclick = function(){
console.log('按钮二被点击了')
}
// 3.执行函数
// DOM2级事件
// 1、获取事件源
var btn3 = document.getElementById('btn3');
// 添加事件监听
btn3.addEventListener('click',function(){
console.log('按钮3被点击了');
},false);
btn3.addEventListener('click',function(){
console.log('按钮3被点击了2');
},false);
btn3.addEventListener('mouseout',btnf,false);
function btnf(){
console.log('鼠标离开了');
}
</script>
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
