Javascript的常用内置对象

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

注意: 都写在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>

猜你喜欢

转载自blog.csdn.net/qq_42865575/article/details/81503757