1、内置对象
Argument:只在函数内部定义,保留函数实参
Array:数组对象
Date:日期对象
Math:数学对象
String:字符串对象,提供一系列对字符串的操作
1.1、String
charAt(index):返回指定位置字符
indexOf(chr):返回指定字符串位置,从左到右,找不到-1.
substr(m,n):从m,取n个字符,n不写,取到最后
substring(m,n):从m,取到第n个位置(左闭右开)
toLowerCase()、toUpperCase():转小写,转大写
length:属性,非方法,返回字符串长度
1.2、Math
Math.random():随机数
Math.ceil():向上取整,1.3-2
Math.floor():向下取整,1.3-1
1.3.Date
获取日期
getFullYear():年
getMonth():月(0-11)
getDate():日
getHours():时
getMinutes():分
getSeconds():秒
设置日期
setYear(),setMonth(),setDate(),setHours(),setMinutes(),setSeconds()
toLoacaleString()转换成当地时间字符串
var str = "hello,world"console.log(str.substring(3))console.log(str.substring(3,5))console.log(str.toUpperCase())console.log(Math.random())var date = new Date()console.log(date)console.log(date.getFullYear())console.log(date.getMonth()+1)console.log(date.getDay())console.log(date.getHours())console.log(date.getMinutes())console.log(date.getSeconds())var second1 = (date.getSeconds()>10)?date.getSeconds():"0"+date.getSeconds()var datestr = date.getFullYear()+"-"+date.getMonth()+"-"+date.getDay()console.log(datestr)console.log(date.toLocaleDateString())
2、对象
对象是js的核心概念,也是重要数据类型。js所有数据都可视为对象,对象在js中是json格式
{键:值,
键:值}
2.1、对象的创建
(1)字面量形式创建(用的最多)
var 对象名 = {}
var 对象名 = {
键:值}
(2)通过new Object对象创建
var 对象名 = new Object()空对象
(3)通过Object对象的create方法创建
var 对象名 = Object.create(null)
var 对象名 = Object.create(对象)
var obj1 = {}var obj2 = {name:"zhangsan"}console.log(obj1)console.log(obj2)var obj3 = new Object();console.log(obj3)var obj4 = Object.create(null)console.log(obj4)var obj5 = Object.create(obj2)console.log(obj5)
对象的操作
获取对象属性(如不存在,null)
对象名.属性名(取)
对象名.属性名 = 值(存在则修改,不存在创建)
2.2、对象的序列化与反序列化
序列化:对象(json对象)转字符串(json字符串);反序列化:字符串转对象
序列化:var 变量名 = JSON.stringify(object);
反序列化:var 对象名 = JSON.parse(json字符串)
var obj = {name:"liki",age:19,}console.log(obj)var oobj = JSON.stringify(obj)console.log(oobj)
2.3、this(关键字)
用在函数,谁调用函数,this就是谁
(1)直接调用:this是window对象
(2)调用对象中的函数,this是对象
function t(){console.log("这是一个函数")console.log(this)}t()var oo = {name:"lisi",sayHello:function(){console.log("函数")console.log(this)}}oo.sayHello();
3、事件
有了事件,才使页面有了交互,点击是事件。
作用:验证数据;增加页面动态效果;增强用户体验度
相关名词:事件源(谁触发的事件),事件名(触发了什么事件),事件监听(谁管这个事情,谁监视),事件处理(发生了怎么办)
onload事件:当文档加载完毕后执行
onclick事件:点击事件
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body onload="loadWindow()"><button onclick="test()">按键</button><script>function loadWindow(){console.log("文档加载完毕")}function test(){console.log("按键点击")}</script></body></html>
3.1、事件类型(鼠标事件,键盘事件,HTML事件)
Window事件属性:针对window对象触发的事件(<body>内)
表单事件(Form事件),键盘事件(Keyboard事件),鼠标事件(Mouse事件),由媒体触发的事件(Media事件)
常用事件:onclick点击,元素失去焦点onblur,获得焦点onfocus,onload,onchange用户改变域的内容(常用下拉框),onmouseover当鼠标悬停,onmouseout当鼠标离开,onkeyup,onkeydown
事件流:一个事件发生,向其他地方传播
事件冒泡(IE):从小到大,事件开始由最具体元素接受,逐级向上到不具体的节点(文档)
事件捕获:从大到小,事件开始由文档节点接受,逐级向下到具体的节点
3.2、事件处理程序(事件绑定方式)
(1)HTML事件处理程序
直接在HTML元素上绑定
(2)DOM0级事件
获取事件源,绑定事件(不能同时绑定同一种事件),触发后代码
<button type="button" id="btn">按键1</button>
var btn1 = document.getElementById("btn")btn1.onclick = function(){console.log("anniu")}
第二张图代码写在后面,如果写前面(head)因为代码从上到下,没有id为btn的按钮,所有会报错。或者在加载完成后写(不推荐)
注意:通过id属性值获取节点对象
document.getElementById("id")
(3)DOM2级事件(可以绑定同一个类型多次)
事件源.addEventListener(“事件类型”,执行函数,true)
<button type="button" id = "btn3">按键2</button>
var btn2 = document.getElementById("btn3")btn2.addEventListener("click",function(){console.log("aa")},false)
事件名click,绑定事件onclick,区分清楚