您的位置：首页 > Web前端 > JavaScript

Javascript的常用内置对象

2018-08-08 10:34 447 查看

内置对象：这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。得【进行定义】使用。

注意： 都写在script标签中。

Array对象：数组对象——使用单独的变量名存储一系列的值。下标从0开始
创建方法：
1、
```
var 对象变量名=new Array()
```
举例

var trees=new Array();
trees[0]="松树";
trees[1]="柳树";

也可以使用一个整数自变量来控制数组的容量：

var trees=new Array(2);
trees[0]="松树";
trees[1]="柳树";
for(var i in trees){
console.log(trees[i];//输出数组的值
}

2、

var 对象变量名=new Array(element0,element1,element2,......);

举例

var names=new Array('xiao','ming');//元素是字符串时用单引号或双引号引起来
for(var i in names){
console.log(names[i]);
}
或另起一行写相关元素。
var scores=new Array();
scores=[99,100,88,66];
for (var i in scores){
console.log(scores[i]);
}

Array 对象属性
1、length：可设置或返回数组中【元素的数目】或者指【数组的长度】。

var arr = new Array(3);
arr[0] = "John";
arr[1] = "Andy";
arr[2] = "Wendy";
console.log(arr.length);//输出数组的长度为3

2、prototype：向对象添加属性和方法。

Array.prototype.print=function(){
console.log("数组长度是"+this.length);
}
var trees=new Array();
trees[0]="松树";
trees[1]="柳树";
trees.print();//输出：数组的长度是2

Array 对象方法

pop()——删除最后一个元素并返回数组的最后一个元素。
shift()——删除第一个元素并返回数组的第一个元素。

arrayObject.pop()
arrayObject.shift()

var scores=new Array(99,100,98,88);
var result=scores.pop();
console.log(result+":"+scores.length);//输出：88:3

var scores=new Array(99,100,98,88);
var result=scores.shift();
console.log(result+":"+scores.length);//输出：99:3

push()——向数组的末尾添加一个或更多元素，并返回新的长度。
unshift()——向数组的开头添加一个或更多元素，并返回新的长度。

arrayObject.push()
arrayObject.unshift()

var sizes=new Array(44,55,66,77);
var result=sizes.push(88,99);
console.log(sizes+"的长度是"+sizes.length);//输出：44,55,66,77，88,99的长度是6

var sizes=new Array(44,55,66,77);
var result=sizes.unshift(22,33)
console.log(sizes+"的长度是"+sizes.length);//输出：22,33,44,55,66,77的长度是6

reverse()——颠倒数组中元素的顺序。

arrayObject.reverse()

var scores=new Array(99,100,98,88);
var result=scores.reverse();
for(var i in scores){
console.log(scores[i]);//颠倒：输出88,98,100,99
}

slice()——从某个已有的数组返回选定的元素。

arrayObject.slice(begin,end)

var scores=new Array(99,100,98,88);
var newscores=scores.slice(1,3);//slice(begin,end),end不包含那个下标为3的元素
for(var i in newscores){
console.log(newscores[i]);//选定元素输出100,98，
}

splice()—— 删除元素，并向数组添加新元素。

arrayObject.splice(index,howmany,item1,item2....)

index:必须为整数，表示添加或删除的位置，例如：1表示在下标为1的前面进行设置
howmany:表示从那个位置开始往后需要【删除】的元素的个数
item表示添加的元素，可添加多个

var flowers=new Array('玫瑰','兰花','睡莲')//
var result=flowers.splice(1,1,'百合','满天星','月季')
for(var i in flowers){
console.log(flowers[i]);//输出：玫瑰，百合，满天星，月季，睡莲
}

concat()——连接两个或更多的数组，并返回结果。

arrayObject.concat(arrayX,arrayX,......,arrayX)

var grades=new Array("百合","兰花");
var cj=new Array(1,2);
var she=new Array();
she=grades.concat(cj,cj);
for(var i in she){
console.log(she[i]);//输出：百合，兰花，1,2,1,2
}

join()——把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

arrayObject.join()

var flowers=new Array('玫瑰','兰花','睡莲');
var result=flowers.join("--");
console.log(result);//输出：玫瑰--兰花--睡莲

Date对象：日期时间对象，可以获取系统的日期时间信息。
创建 Date 对象的语法：

new Date();

Date 对象方法

getFullYear()——从 Date 对象中返回【四位数字】表示的年份
getMonth()——从 Date 对象中返回数字表示的月份 (0 ~ 11)
getDate()——从 Date 对象中返回数字表示的一个月中的某一天 (1 ~ 31)
getDay()——从 Date 对象中返回数字表示的一周中的某一天 (0 ~ 6)
getHours()——返回 Date 对象的小时 (0 ~ 23)
getMinutes()——返回 Date 对象的分钟 (0 ~ 59)
getSeconds()——返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds()——返回 Date 对象的毫秒(0 ~ 999)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function times(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var week=date.getDay();
/*switch(week){
case 1:
week="星期一";
break;
case 2:
week="星期二";
break;
case 3:
week="星期三";
break;
case 4:
week="星期四";
break;
case 5:
week="星期五";
break;
case 6:
week="星期六";
break;
case 0:
week="星期日";
break;
}相当于下面的程序*/
week="星期"+"日一二三四五六".charAt(week);
var hour=date.getHours();//定义变量
var minute=date.getMinutes();
var second=date.getSeconds();
month=month<10?"0"+month:month;//使得小于10时，时间显示01,02,03，......
day=day<10?"0"+day:day;
hour=hour<10?"0"+hour:hour;
minute=minute<10?"0"+minute:minute;
second=second<10?"0"+second:second;
var currentTime=year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;
document.getElementById("time").innerHTML=currentTime;
setInterval("times()",1000);//设置时间1秒变化一次
}

var names="zhouzhou";
console.log(names.length);//数组长度
console.log(names.charAt(0));//显示z
console.log(names.charAt(1));//显示h
</script>
</head>
<body onload="times()">//
<span id="time"></span>
</body>
</html>

在span标签中显示时间  2018-08-07 星期二 22:06:12

onload—已知程序自上而下进行，onload 常用在 body标签中，一旦【完全加载】所有内容（包括图像、脚本文件、CSS 文件等）【立即发生】。

~~~~在上面的程序中，程序自上而下，函数times()在上面先运行，如果不加onload，则运行到span标签中时，time()将无法再次执行。所以加上onload,等页面加载完后，再执行一次time()，span标签中的就可以执行。

event对象：代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。【事件通常与函数结合使用】，函数不会在事件发生前被执行！

事件="SomeJavaScriptCode"

1、onload事件：一张页面或一幅图像完成加载时使用。
适用于body, frame, frameset, iframe, img, link, script标签

2、onclick事件：当用户【点击某个对象时】使用。
适应于button, document, checkbox, link, radio, reset, submit对象。

<input type="button" onclick="getElements()" value="登录">

3、onkeydown事件：在用户【按下一个键盘按键时】发生。
onkeyup事件：在【键盘按键被松开时】发生。
onkeypress 事件：在【键盘按键被按下并释放一个键时】发生。
适用于document, image, link, textarea事件。

4、onfocus 事件：在【对象获得焦点时】发生。
onblur 事件：会在【对象失去焦点时】发生。

5、onmousedown 事件：会在【鼠标按键被按下时】发生。
onmouseup 事件：会在【鼠标按键被松开时】发生。
适用于button, document, link对象。

6、onmouseout 事件：在【鼠标指针（移出）指定的对象时】发生。
onmouseover 事件：在【鼠标指针（移动到）指定的对象上】时发生。
onmousemove 事件：在【鼠标指针移动时】发生。

7、onsubmit 事件：在【表单中的确认按钮被点击时】发生。适用于form表单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function b(){
return true;//返回值为true时才能使用
}
</script>
</head>
<body>
<form action="https://www.baidu.com/s" onsubmit="return b()">
<input name="wd"/>
<input type="submit" value="百度一下"/>//当返回值为true时，点击按钮才能跳转到百度页面
<input type="reset" value="重置"/>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航