javascript基础(三)--(内置对象,事件)

Date对象

//返回当前的日期和时间
var d = mew Date()  //Sat Jun 24 2017 10:34:00 GMT+0800 (中国标准时间)
d.getFullYear()     //返回四位数的年份
d.getMonth()        //返回月份(0--11)实际d.getMonth()+1
d.getDate()         //返回一个月中的某一天(1--31)
d.getDay()          //返回一周中的第几天(0--6)
d.getHours()        //返回小时(0--23)
d.getMinutes()      //返回分钟(0--59)
d.getSeconds()      //返回秒数(0--59)
d.getMilliseconds() //返回毫秒
d.getTime()         //返回1970.1.1 0:0:0到现在的毫秒数
// Date对象参数  无参数默认返回当前系统时间
// 数字形式
new Date(2017,4,1,9,48,12)
// 字符串形式
new Date("June 10,2013,12:12:12")
new Date('2017-9-8 12:34:56') // ios 不兼容
new Date('2017/9/8 12:34:56')
//时间戳
new Date(1495835060500)
//时间转换公式
var t = Math.floor((endTime-now)/1000)
// 天:  Math.floor(t/86000)
// 时:  Math.floor(t%86400/3600)
// 分:  Math.floor(t%86400%3600/60)
// 秒:  t%60
// 获取当前时间戳
new Date().getTime() // 1511418074000
Date.now() // 1511428145000
+new Date() // 1511428145000

Math对象

Math.ceil() 大于或小于该数的最小整数(向上取整)
Math.floor() 小于或等于该数的最大整数(向下取整)
Math.round() 四舍五入
Math.min(m,n) 取最小的
Math.max(m,n) 取最大的
Math.sqrt(m) m的开方
Math.pow(m,n) m的n次方
Math.toFixed(n) 保留小数点后几位
Math.random() 返回0-1的随机数
Math.abs() 取绝对值
取n到m的之间的随机数 Math.round(Math.random()*(m-n)+n)

String对象

字符串的长度 str.length(只关注字符的个数,不关心是汉字还是其他字符) 不可写
字符串中单个字符可以使用[]获取 str[1]
字符串比较大小时比较第一个字符的ASCII码
js中字符串截取只关注字符的个数,不关心是汉字还是其他字符

substr(start,length) 从指定位置截取指定长度的子字符串(包括起始位置)
①:如果start为负数则start=str.length+start
②:如果length为负数或0 则返回一个空字符串
③:如果没指定length 则返回start后面的所有字符

var str = "我有一个梦想"
console.log(str.substr(2,2))   //一个
console.log(str.substr(2,0))   //空字符串
console.log(str.substr(2))     //一个梦想
console.log(str.substr(-2,4))  //梦想

substring(start,end) 从指定位置截取到结束位置end-1的字符串
①:如果start或end为负数或NaN,它被看做0
②:如果start和end相等则返回一个空字符串
③:如果没指定end 则返回start后面的所有字符
④:参数反转,交换位置,总使用最小的作为开始,大的作为结束,大于字符串长度,视为字符串长度

var str="我有一个梦想"
console.log(str.substring(2,5))  //一个梦
console.log(str.substring(2))    //一个梦想
console.log(str.substring(4,3))  //个
console.log(str.substring(-1,5)) //我有一个梦

slice(start,end) 从指定位置截取到结束位置end-1的字符串不包含结束位置end
①参数不反转不交换位置
②负数从后面倒着往前数
'a1b3c'.slice(1, 3) //=> 1b

str.charAt(n) 返回某位置的字符,如果n为负数或大于str.length则返回空

var str1 = 'wamp'
console.log(str.charAt(1))  //a
console.log(str.charAt(5))  //空字符串
console.log(str.charAt(-1)) //空字符串

str.charCodeAt(n只能是数字) 返回某个位置的字符的ASCII编码
1
var str1 = 'wamp' str.charAt(1)) //97
String.fromCharCode(16800) 返回ASCII码对应的字符可写多个
1
(String.fromCharCode(11111,12345)) //口艹`

str.indexOf() 左–>右返回某个字符的第一次出现位置找不到返回-1
str.indexOf('cd',n) 从第几位开始找某个字符若n为负数当成0

var str = 'wampacda'
console.log(str.indexOf('a'))     //  1
console.log(str.indexOf('b'))     //  -1
console.log(str.indexOf('a',3))   //  4
console.log(str.indexOf('a',-2))  //  1
// 找出某字符出现的所有位置
var str = 'wampaccdabakakakakkak'
for(var i=0;i<str.length){
  var a = str.indexOf('a',i)
  if(a == -1)break
  console.log(a)
  i=a+1
}

str.lastIndexOf() 右–>左返回某个字符的最后一次出现位置找不到返回-1
1
2
var str = 'wampacda'
console.log(str.lastIndexOf('a')) //8

str.split() 拆分字符串为数组第二个参数表示长度

var str = 'www.tanzhouedu.com'
console.log(str.split(''))   //w,w,w,.,t,a,n,z,h,o,u,e,d,u,.,c,o,m
console.log(str.split('.'))  //www,tanzhouedu,com
console.log(str.split('b'))  //www.tanzhouedu.com
console.log(str.split('.',2))//www,tanzhouedu

str.toUpperCase() 把字符串全部转化为大写

1 2	var str = 'www.tanzhouedu.com' console.log(str.toUpperCase())//WWW.TANZHOUEDU.COM

str.toLowerCase() 把字符串全部转化为小写

1 2	var str = 'Www.TanzhouEdu.coM' console.log(str.toUpperCase())//www.tanzhouedu.com

str.match(/\d+/g) 正则匹配
str.replace(/abc/,"aaa") 查找并替换

数组对象

数组是多个变量的集合数组中的每一个值叫做一个元素，每一个元素在数组中的位置，以数字表示，称为索引。

声明方式
①var arr = ['a',2,'abc',function a(){},{}]
②var arr1 = new Array(a,b,c,d)
③var arr = new Array(5) 创建初始值为undefined长度为5的数组

// 注:二维数组的声明及访问
// 当使用new Array(n)时,如果n为数字则代表数组长度, 为字符串则表示数组的内容
var arr=[[1,2,3],["数字","数字"],["a","b"]]
console.log(arr[2][1])  //b
// 获取二位数组的长度arr[i].length

数组元素的访问

1 2	var arr = ['a',2,'abc',function a(){},{}] console.log(arr[3]) //function a(){}

数组的长度arr.length 可写(可以更改)
当定义数组的索引值超过数组长度,自动扩展数组长度,当获取数组中不存在索引时将返回undefined

var arr = ['a',2,'abc',function a(){},{}]
console.log(arr.length)   //5
var arr1 = [1,2,3,4]
// 缩减数组
arr1.length = 2
console.log(arr1)   // [1, 2]
// 快速清空数组  arr.length = 0  或 arr = []
arr1.length = 0
console.log(arr1)   //[]
// 注:数组的元素字母和汉字都要用引号引起来

arr.push() 从后面给数组添加元素返回数组长度

1
2
3

var arr = ['a',2,'abc',function a(){},{}]
console.log(arr.push('你好'))  //6
console.log(arr)  //['a',2,'abc',function a(){},{},'你好']

arr.unshift() 从前面给数组添加元素返回数组长度(IE 6,7无返回值)

1
2
3

var arr = ['a',2,'abc',function a(){}]
console.log(arr.unshift('你好'))   //5
console.log(arr)    //['你好','a',2,'abc',function a(){},{}]

arr.pop() 删除数组最后一个元素返回数组最后一个元素

1
2
3

var arr = ['a',2,'abc',function a(){}]
console.log(arr.pop())   //function a(){}
console.log(arr)            //['a',2,'abc']

arr.shift() 删除数组第一个元素返回数组第一个元素

1
2
3

var arr = ['a',2,'abc',function a(){}]
console.log(arr.shift())
console.log(arr)         //[2,'abc',function a(){}]

arr.splice() 向/从数组中添加/删除元素，然后返回被删除的元素
①arr.splice(start) 从第几个开始删除后面的返回删除的所有元素

1
2
3

var arr = ['a',2,'abc',function a(){}]
console.log(arr.splice(2))    //abc,function a(){}
console.log(arr)              //[a,2]

②arr.splice(start,n) 从第几个开始删除几个返回删除的元素
若start为负从结尾开始,n为0,不删除

1
2
3

var arr = ['a',2,'abc',function a(){}]
console.log(arr.splice(2,1))  //abc
console.log(arr) //[a,2,function a(){}]

③arr.splice(start,n,m)从start开始的几个,替换为m

1
2
3

var arr = ['a',2,'abc',function a(){}]
console.log(arr.splice(1,2,'你好'))    //2,abc
console.log(arr)          //[a,你好,function a(){}]

④arr.splice(start,0,m)从第几个开始添加m

var arr = ['a',2,'abc',function a(){}]
console.log(arr.splice(1,0,'你好'))    //空
console.log(arr) // ["a", "你好", 2, "abc", ƒ]
//数组去重
var arr = [1,2,3,2,1,4,2]
for(var i=0;i<arr.length;i++){
  for(var j=i+1;j<arr.length;j++){
    if(arr[i]==arr[j]){
      arr.splice(j--,1)
    }
  }
}
console.log(arr) // 1,2,3,4

arr.sort() 把数组内的元素按字符编码或大小升序排列(原数组改变)

// sort方法内部默认是调用每个数组项的toString(),然后按字符串比较，通常会自定义比较函数
var arr = ['a',2,'abc',function a(){},1]
console.log(arr.sort())   //[1,2,'a','abc',function a(){}]
console.log(arr)           //[1,2,'a','abc',function a(){}]
var arr1 = [1, '10', '5', 4]
arr1.sort() // [1, '10', 4, '5'] 默认按字符串编码排序
arr1.sort((a, b) => a - b) // [1, 4, '5', '10']
// 改变排序规则  arr.sort(function(a,b){ return b-a})  倒序
var arr = [1,6,55,4,8]
console.log(arr.sort(function(a,b){
  return b-a  //只是改变顺序不改变数据
}))   //55,8,6,4,1
// 随机排序打乱数组
var arr = [55,8,6,4,1]
console.log(arr.sort(function(a,b){
  return Math.random()-0.5  //只是改变顺序不改变数据
}))   //55,8,6,4,1
// 使用sort将数组倒序
var arr = [1,6,55,4,8]
console.log(arr.sort(function(a,b){
  return -1
})) // [8, 4, 55, 6, 1]

arr.reverse() 把数组的顺序颠倒(原数组改变)

1
2
3

var arr = ['a',2,'abc',function a(){},1]
console.log(arr.reverse())   //[1,function a(){},'abc',2,'a']
console.log(arr)              //[1,function a(){},'abc',2,'a']

arr1.concat(arr2) 数组合并将数组打散然后拼接在一起返回拼接后的新数组 (原数组不改变)

var arr1 = ['a','b','c']
var arr2 = [1,2]
console.log(arr1.concat(arr2,[arr3])) //['a','b','c',1,2]
console.log(arr1)     //['a','b','c']
console.log(arr2)     //[1,2]
// 将数组打散然后拼接在一起
[].concat(1,2,3); // [1,2,3]
[].concat([1, 2], 4); // [1, 2, 4]
[].concat([1, 2], [3, 4]); // [1, 2, 3, 4]

arr.join() 将数组转化为字符串返回整个数组元素的字符串(原数组不改变)

var arr1 = ['a','b','c']
console.log(arr1.join())  //'a,b,c'
console.log(arr1)         //['a','b','c']
var arr = ['a','b','c']
console.log(arr1.join('<'))  //'a<b<c'
console.log(arr1)         //['a','b','c']

arr.toString()或arr.valueOf() 将数组的每一个元素转化为以逗号分割的字符串

1
2
3

var arr = [1,4,2,'a'].toString()       // "1,4,2,a"
var arr = [1,4,[2,'a',[5, '多']]].toString()  // "1,4,2,a,5,多"
arr.toLocaleString()：//将对象转换成字符串

arr.slice() 可从已有的数组中返回指定的元素返回一个新的数组(包含start不包含end)
1
2
var arr = ['a',1,'b',3,'c']
console.log(arr.slice(1,3)) // [1,'b']
arr.map() 方法按照原始数组元素顺序依次处理元素。映射应该有返回值
注意： map() 不会对空数组进行检测。 map() 不会改变原始数组。
1
2
3
4
5
6
var data=[1,3,4]
var Squares=data.map(function(val,index,arr){
console.log(arr[index]==val) // ==> true
return val*val
})
console.log(Squares) // 1,9,16

arr.forEach() 从头到尾遍历数组，为每一个元素调用指定的函数

1 2	var data = [1,2,3,4] data.forEach(function(v,i,a){ a[i] = v + 1 }) // [2,3,4,5]

arr.filter() 过滤数组元素返回新数组

1 2	data = [1,5,8] data.filter(function(v){ return v>5 }) // [8]

arr.every() 对数组中的所有元素调用判定函数都返回true，结果才返回true

1
2
3

data = [1,5,8]
data.every(function(){ return x<10 }) // true
data.every(function(){ return x<7 })  // false

arr.some() 对数组中的所有元素调用判定函数只要有一个返回true，结果返回true

1
2
3

data = [1,5,8]
data.some(function(){ return x<7 })   // true
data.some(function(){ return x<1 })   // false

arr.reduce() 和 arr.reduceRight()
用指定的函数将数组元素进行组合
第一个参数是执行操作的函数，第二个参数（可选）传递给函数的初始值

// arr.reduce((sum, item) => {},num)
/* 1. 当没有第二个参数初始值num时
第一次循环 sum默认为数组的第0个 item为数组的第1个 第二次以后 sum = sum + item */
var arr = [1, 2, 3, 4]
arr.reduce((sum, item) => {
  console.log(sum, item)
})
// 1 2   undefined 3  undefined 4
let res = arr.reduce((sum, item) => {
  console.log(sum, item) // 第一次 1 2  第二次 3 3  第三次 6 4
  return sum + item
})
console.log(res) // 10
/* 2. 当有第二个参数 初始值num时
第一次循环 sum就是初始值num  item为数组的第0个 第二次以后 sum = sum + item*/
let res = arr.reduce((sum, item) => {
  console.log(sum, item) // 第一次 5 1  第二次 6 2  第三次 8 3 第四次 11 4
  return sum + item
}, 5)
console.log(res) // 15

arr.indexOf()和arr.lastIndexOf()返回找到的第一个元素的索引，找不到返回-1

data = [1,5,8,1,5]
data.indexOf(1)   // 0
data.lastIndex(1) // 3
data.indexOf(6)   // -1

Array.isArray(arr) 判断对象是否是数组

事件（event）

事件:浏览者在浏览网页时触发某些动作所作出的相应反应

常见事件
onclick 鼠标单击事件 当鼠标单击选定元素时所触发的事件
ondblclick 鼠标双击事件 当鼠标双击选定元素时所触发的事件
onmousedown 鼠标按下事件 当按下鼠标时所触发的事件
onmouseup 鼠标释放事件 当按下鼠标被释放时所触发的事件
onmousemove 鼠标移动事件 当鼠标指针在选定元素上移动时触发的事件
onmouseover 鼠标经过事件 当鼠标经过选定元素时触发的事件
onmouseout 鼠标离开事件 当鼠标指针离开选定元素时触发的事件
onkeydown 按下键盘按键事件 当用户按下键盘上任意键时触发的事件
onkeypress 按下并释放按键事件 当用户按下键盘按键并任意释放按键时触发的事件
onkeyup 释放键盘按键事件 当按下键盘按键后释放按键时触发的事件
onerror 页面出错事件 当页面在加载文本或图片时，发生错误所触发的事件
onload 页面加载完事件 当页面完成图片文本等内容的加载后触发的事件
onunload 离开页面事件 当浏览者结束访问网页而离开网页时触发的事件
onresize 窗口改变事件 当浏览器改变页面窗口大小或框架大小被调整时触发的事件
onscroll 滚动条滚动事件 当滚动条滚动时触发的事件
onblur 失去焦点事件 当选定元素停止作为用户交互的焦点时触发的事件
onchange 元素发生改变事件 当选定元素的数据或文字发生改变并失去焦点时触发的事件
onfocus 获得焦点事件 当元素获得焦点时触发的事件
onreset 表单重置事件 当表单中元素被重置时触发的事件
onsubmit 表单提交事件 当表单中的元素被提交时所触发的事件

注: onmouseover,onscroll和onresize都是以时间间隔计算的
注: onkeydown  比 onkeypress  早
  onkeypress 只响应 字母 数字 符号等 功能键不会响应
  在form中写上onsubmit="return fun()" 才能拦截提交的效果
  window/img/body.onLoad     加载事件
  不是所有的元素都能够获得焦点或有onkeydown事件,能够响应用户操作的元素才有
  DOMContentLoaded文档加载形成完整的DOM树之前完成形成  不包含图片资源、js文件、css文件等其他资源 onload包含图片资源
onchange不同元素的表现形式:
  text:   当输入内容改变,并且失去焦点时触发
  radio:  被选中的时候才会触发
  checkbox:   选中和取消选中都会触发
  select: 选中不同的选项时触发
  file:   选择文件之后被触发

事件对象在触发DOM的事件时，产生一个包含所有与事件有关的事件对象event
事件在发生的瞬间,发生位置,时间,鼠标按键,触发的节点等信息被打包成一个对象,自动传递给事件函数的第一个参数(event)

// 在IE中event对象是window对象的一个全局属性
// 键盘键值  ev.keyCode(IE)或ev.which
// 鼠标按钮  ev.button //0 鼠标左键 1鼠标中键 2鼠标右键  (firefox)
// 事件对象的兼容写法
oDiv.onclick = function(ev){
  ev = ev || window.event
  ev.clientX //鼠标对于浏览器窗口可视区域的X坐标(窗口坐标)不包括工具栏和滚动条
  ev.clientY //鼠标对于浏览器窗口可视区域的Y坐标(窗口坐标)不包括工具栏和滚动条
  ev.screenX //鼠标相对于用户显示器屏幕左上角的X坐标  屏幕坐标位置
  ev.screenY //鼠标相对于用户显示器屏幕左上角的Y坐标  屏幕坐标位置
  ev.pageX   //鼠标相对于文档的X坐标   页面坐标位置
  ev.pageY   //鼠标相对于文档的Y坐标   页面坐标位置
  // 阻止默认行为 或者 return false
  ev ? ev.preventDefault() : window.event.returnValue = false
  // 事件目标和事件源 ev.target 标准浏览器事件源   ev.srcElement ie事件源
  var target = ev.target || ev.srcElement
  // 阻止冒泡
  ev.stopPropagation() || ev.cancelBubble = true
}
// 事件目标和事件源

事件冒泡事件开始由触发事件的元素然后逐渐向上传播到较为不具体的节点(document)
当父元素和子元素都加入onclick事件时,触发子元素onclick事件后父元素的onclick事件同样会被触发,造成事件的多层并发(事件由内向外传递)
阻止冒泡事件在当前要阻止冒泡的事件函数中使用ev.cancelBubble = true 或 ev.stopPropagation()
事件捕获事件开始由较为不具体的节点(document)更早接收到，触发事件的元素最后接收到事件
当父元素和子元素都加入onclick事件时,触发子元素onclick事件后父元素的onclick事件同样会被触发,造成事件的多层并发(事件由外向内传递)
事件三个阶段
1 捕获(从外向内寻找触发事件的元素)
2 目标(找到触发事件的元素)
3 冒泡(事件从内向外冒泡)

事件绑定给元素绑定额外事件

// 标准浏览器
obj.addEventListener(事件名<去掉on>,事件函数,是否捕获)
ev: obj.addEventListener('click',fn2,false)
  false 冒泡  一个出去的事件触发了你,你就去执行fn2这个函数
  true  捕获  一个进去的事件触发了你,你就去执行fn2这个函数
特点:1. 有事件捕获
     2. 事件名称没有on
     3. 事件函数执行的顺序是正序
     4. this指向触发该函数的事件的对象
// IE8以下支持
obj.attachEvent(事件名 ,事件函数)
ev: obj.attachEvent('onclick',fn2)
特点:1. 没有事件捕获
     2. 事件名称有on
     3. 事件函数执行的顺序 IE8以下 倒序 IE9及以上 正序
     4. this指向window
// 兼容写法
function bindevent(obj,evName,evFn){
  if(obj.addEventListener){
    obj.addEventListener(evName,evFn,false)
  }else{
    obj.attachEvent('on'+evName,funtion(){
      evFn.call(obj)
    })
  }
}
// 给一个元素的同一个事件绑定多个不同的函数,直接使用onclick则会覆盖前面的事件
// 而使用addEventListener或attachEvent可以绑定多个事件
document.bindevent('onclick',fn1)
document.bindevent('onclick',fn2)

事件解绑解除元素的绑定事件

// 普通事件的取消
document.onclick = null  取消普通事件
// 其他浏览器
obj.removeEventListener(事件名<去掉on>,事件函数,是否捕获)
ev: obj.removeEventListener('click',fn2,false)
// IE8以下不支持
obj.detachEvent(事件名 ,事件函数)
ev: obj.detachEvent('onclick',fn2)
function off(obj,evName,evFn){
  if(obj.removeEventListener){
    obj.removeEventListener(evName,evFn,false)
  }else{
    obj.attachEvent('on'+evName,funtion(){
      evFn.call(obj)
    })
  }
}

事件委托
事件委托利用事件冒泡的原理，只在父级指定一个处理事件程序，而不必给每个可单击的元素添加事件处理程序

/*
<ul id="list">
  <li id="apple">apple</li>
  <li id="pear">pear</li>
  <li id="peach">peach</li>
</ul>
*/
list.onclick = function (ev) {
  var ev = event || ev
  var target = ev.target || ev.scrElement
  console.log(target.innerText)
}

事件方法
obj.onfocus() 给指定元素设置焦点
obj.onblur() 取消指定元素的焦点
obj.onselect() 选择指定元素里面的文本内容
其他
oncontextmenu 右键菜单事件
ex:禁止右键 document.oncontextmenu = function(){ return false }
contentEditable=true 可以使元素div可编辑
onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；
onpropertychange 事件却是实时触发，任何属性改变都会触发的，即每增加或删除一个字符就会触发，通过
js改变也会触发该事件(IE专有)
oninput 事件是IE之外大多数浏览器支持,只在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；
beforeunload 页面卸载前触发