一.内置对象
Arguments 只在函数内部定义,保存了函数的实参
Array 数组对象
Date 日期对象,用来创建和获取日期
Math 数学对象
String 字符串对象,提供对字符串的一系列操作
1.String
* charAt(idx) 返回指定位置处的字符
* indexof(Chr)返回指定子字符串的位置,从左到右。找不到则返回-1
* substr (m,n)返回给定字符串中从m位置开始,取n个字符,如果参数n省略,则意味着取到字符串末尾
* substring(m,n)返回给定字符串中从m位置开始,到n位置结束,如果参数n省略,则意味着取到字符串末尾
* toLowerCase()将字符串中的字符全部转换成小写
* toUpperCase()将字符串中的字符全部转换成大写
* length 属性,不是方法,返回字符串的长度
2.Math
Math.random() 随机数
Math.ceil() 向上取整,大于最大整数
Math.floor()向小取整,小于最小整数 String
3.Date
getFullYear() 年
getMonth() 月
getDate() 日
getHours() 时
getMinutes() 分
getSeconds() 秒
toLocaleString() 时间本地化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置对象</title>
</head>
<body>
<script type="text/javascript">
/*string*/
var str = "hello world"
console.log(str)
console.log(str.substring(3))//从下标3开始,截取到最后
console.log(str.substring(3, 5))//从下标3开始,到下标5结束
console.log(str.toLocaleLowerCase()) //转小写
console.log(str.toLocaleUpperCase()) //转大写
/*math*/
//Math.random() 随机数
console.log(Math.random())
//Math.ceil() 向上取整,大于最大整数
console.log(Math.ceil(3.14))//4
//Math.floor()向小取整,小于最小整数 String
console.log(Math.floor(3.14)) //3
/*date*/
//得到日期对象
var date=new Date()
console.log(date)
//getFullYear() 年
console.log(date.getFullYear())
//getMonth() 月
console.log(date.getMonth())
//getDate() 日
console.log(date.getDate())
//getHours() 时
console.log(date.getHours())
//getMinutes() 分
console.log(date.getMinutes())
//getSeconds() 秒
console.log(date.getSeconds())
//时间本地化
console.log(date.toLocaleString())
</script>
</body>
</html>
二.对象
对象是一种无序的数据集合,由若干个“键值对”构成。通过JavaScript我们可以创建自己的对象。JavaScript 对象满足的这种“键值对”的格式我们称为JSON格式,即伟大的JSON对象。
1.对象的创建
(1)字面量形式创建对象
var 对象名 = { };// 空对象
var 对象名 = {
键:值,
键:值,
...
};
(2)通过new Object 创建
var 对象名 = new Object();// 空对象
(3)通过 Object 对象的 creat 方法创建
var 对象名 = Object.creat(null);// 空对象
var 对象名 = Object.creat(对象);
2.对象的操作
获取对象的属性(如果属性不存在,则获取undefined)
对象名.属性名;
设置对象的属性(如果属性存在,则修改属性值;如果属性不存在,则添加新的属性值)
对象名.属性名 = 值 ;
3.对象的序列化和反序列化
序列化:将JS对象(JSON对象)转换成 JSON 字符串
var 变量名 = JSON.stringify(对象);
反序列化:将JSON字符串转换成JS对象(JSON对象)
var 变量名 = JSON.parse(JSON字符串);
4.this
谁调用函数,this指代谁。
(1)直接调用函数,this代表的是全局的window对象
(2)调用对象中的函数,this代表的是对象本身
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>对象</title>
</head>
<body>
<script type="text/javascript">
/*对象的创建*/
//字面量形式创建对象
var obj1 = {} //空对象
console.log(obj1)
var obj2 = {
name: "zhangsan",
age: 18
}
console.log(obj2)
//通过new Object 创建
var obj3 = new Object() //空对象
console.log(obj3)
//通过 Object 对象的 creat 方法创建
var obj4 = Object.create(null) //空对象
console.log(obj4)
var obj5 = Object.create(obj2)
console.log(obj5)
/*对象的操作*/
//获取对象的属性
//获取不存在的属性
console.log(obj1.name) //undefined
//获取存在的属性
console.log(obj2.name) //zhangsan
console.log(obj3.name) //undefined
console.log(obj4.name) //undefined
console.log(obj5.name) //zhangsan
//设置对象的属性
//存在的属性,修改属性值
obj2.age = 20
console.log(obj2)
//不存在的属性,添加属性值
obj2.upwd = "123"
console.log(obj2)
console.log("---------")
/*对象的序列化和反序列化*/
//序列化
//JSON对象
var obj = {
name: "zhangsan",
pwd: "123",
age: 18
}
obj.name = "lisi"
console.log(obj)
//将JS对象(JSON对象)转换成 JSON 字符串
var objtostr = JSON.stringify(obj)
console.log(objtostr)
console.log("---------")
//JSON字符串
var jsonstr = '{"name":"zhangsan","pwd":"123","age":18}';
jsonstr.name = "lisi"
console.log(jsonstr)
//将JSON字符串转换成JS对象(JSON对象)
var strtoobj = JSON.parse(jsonstr)
console.log(strtoobj)
console.log("---------")
/* this */
//1.直接调用函数,this代表的是全局的window对象
function test(){
console.log("hello world");
console.log(this);//window对象
}
test()
//2.调用对象中的函数,this代表的是对象本身
var o ={
name:"zhangsan",
age:18,
uu:function(){
console.log("你好");
console.log(this);//当前o对象
}
}
//调用对象中的方法
o.uu();
</script>
</body>
</html>
三.JS事件
事件是JavaScript应用跳动的心脏,进行交互,使网页动起来。当我们与浏览器中 web 页面进行某些类型的交互时,事件就发生了。通过使用JavaScript,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。
事件中几个名词:
事件源:给什么元素 / 标签绑定事件
事件名:绑定什么事件
事件监听:浏览器窗口
执行函数:事件触发后需要执行什么代码
1.事件类型
JavaScript 可以处理的事件类型为:鼠标事件、键盘事件、HTML事件。
window 事件属性:针对 window 对象触发的事件(应用到<body>标签)
Form 事件:由HTML表单内的动作触发的事件(应用到几乎所有HTML元素,但最常用在form元素中)
Keyboard 事件:键盘事件
Mouse事件:由鼠标或类似用户动作触发的事件
Media 事件:由媒介触发的事件
几个常用的事件:
onload:当页面或图像加载完后立即触发
onblur:元素失去焦点
onfocus:元素获得焦点
onclick:鼠标点击某个对象
onchange:用户改变域的内容
onmouseover:鼠标移动到某个元素上
onmouseout:鼠标从某个元素上离开
onkeyup:某个键盘的键被松开
onkeydown:某个键盘的键被按下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>
<body onload="loadWindow()">
<!-- onclick事件 -->
<button onclick="test()">按钮</button>
<!-- 常用事件类型 -->
<!-- onblur事件:失焦事件
onfocus事件:聚焦事件
-->
<hr />
姓名:<input type="text" onblur="aa()" onfocus="bb()" />
<!--
onchange事件 :元素的值发生改变时触发的事件
-->
城市:<select onchange="changecity()">
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
</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("值改变了")
}
</script>
</html>
2.事件流和事件模型 (了解即可)
事件顺序有两种模型:事件捕获 和 事件冒泡
事件冒泡:IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点(文档)。
事件捕获:Netscape 提出的另一种事件流叫做事件捕获,事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
3.事件处理程序(事件绑定方式(重要))
1.HTML事件处理程序
直接在HTML元素上绑定事件
2.DOM0级事件
(1)事件源:获取事件源(按钮)
(2)事件类型:给事件源绑定指定事件
(3)执行函数:事件触发后要执行的代码
先获取事件源,再给事件源绑定事件。但是不能同时给元素绑定相同事件多次。
3.DOM2级事件
事件源.addEventListener("事件类型",执行函数,true)
注:通过ID属性值获取节点对象
document.getElementById(" id 属性值");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>
<body>
<!-- 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">
/*DOM0级事件*/
// 1.事件源:获取事件源(按钮)
var btn2 = document.getElementById("btn2")
console.log(btn2)
// 2.事件类型:给事件源绑定指定事件3.执行函数:事件触发后要执行的代码
btn2.onclick = function() {
console.log("按钮")
}
</script>
</html>