JavaScript学习笔记之JS对象


Posted in Javascript onJanuary 22, 2015

默认对象

日期对象Date,

格式:日期对象名称=new Date([日期参数])

日期参数:

1.省略(最常用);

2.英文-数值格式:月 日,公元年 [时:分:秒]

如:today=new Date("October 1,2008 12:00:00")

3.数值格式:公元年,月,日,[时,分,秒]

如:today=new Date(2008,10,1)

日期对象的方法:

格式:日期对象名称.方法([参数])

使用例子:

<body>

    <script type="text/javascript">

       var date = new Date();//JS中默认提供的对象

    document.writeln("现在时刻: " + ( date.getYear() + 1900 ) + "年"

                + (date.getMonth() + 1) + "月" + date.getDate() 

                + "日" + ", 星期" + date.getDay() + ", 时间: "//星期天会是0,需要进一步处理,这里先不处理

                + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());

    </script>

</body>

输出:

现在时刻: 2014年4月21日, 星期1, 时间: 14:7:53
 
数组对象

数组对象的作用是:使用单独的变量名来存储一系列的值。

JavaScript的数组有两点特殊性:

1.数组长度不定,可以自动扩容;

2.数组中存放的数据类型可以不统一,即可以混存不同的数据类型。

建立数组对象的多种格式:

new Array();

返回的数组为空,length 字段为 0。

new Array(size);

参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。该构造函数将返回具有指定个数、元素为 undefined 的数组。

new Array(element0, element1, ..., elementn);

该构造函数将用参数指定的值初始化数组,数组的 length 字段会被设置为参数的个数。

数组对象名称=[元素1[,元素2,...]]

(注意这里使用的是方括号)。

当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。

还可以创建二维数组。

Array对象的方法可以参见:http://www.w3school.com.cn/jsref/jsref_obj_array.asp

数组对象使用实例:

<!DOCTYPE html>

<html>

  <head>

    <title>arrayTest.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <script type="text/javascript">

    //var fruits = new Array("Apple", "Banana", "Pear");

    var fruits = ["苹果","香蕉","梨"];//推荐使用

    //可以动态添加元素

    fruits.push("西瓜");

    fruits.push("橙子");

    for(var i = 0; i < fruits.length; ++i)

    {

        document.writeln("fruit[" + i + "] = " + fruits[i] + "<br/>");

    }

    //数组的一些方法测试

    with(document)

    {

        write("<ul>");

        write("<li>" + fruits.join()+ "</li>");//默认使用逗号来分隔

        write("<li>" + fruits.join(";")+ "</li>");

        write("<li>" + fruits.toString()+ "</li>");

        write("<li>" + fruits.reverse().join()+ "</li>");

        write("<li>" + fruits.valueOf()+ "</li>");

        //说明上面的reverse实际上是改变了数组本身

        write("</ul>");

    }

    //二维数组

    var people = new Array(3);

    people[0] = new Array(1, "zhangsan", "lisi");

    people[1] = new Array(2, "Jack", "Lucy");

    people[2] = new Array(3, "Xiaoming", "Xiaohong");

    //注意数据类型可以混合使用

    //遍历二维数组

    for(var i = 0 ; i < people.length ; ++i)

    {

        for(var j= 0 ; j < people[i].length ; ++j)

        {

            document.write("people["+ i +"]["+ j +"] = " + people[i][j] + "<br/>");

        }

        document.write("<br/>");

    }

    </script>

  </body>

</html>

字符串对象

建立字符串对象:

格式:字符串对象名称=new String(字符串常量)

格式:字符串变量名称="字符串常量"

一个验证Email的例子:

<!DOCTYPE html>

<html>

  <head>

    <title>emailConfirm.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">

        function isEmail()

        {

            var emailValue = document.getElementsByName("email")[0].value;

            if(-1 == emailValue.indexOf("@"))

            {

                alert("请填写正确的Email地址");

            }

            else

            {

                alert("Ok");

            }

        }

    </script>

  </head>

  <body>

      <form>

        email: <input type="text" name="email"><br/>

        <input type="button" value="check" onclick="isEmail()">

    </form>

  </body>

</html>

自定义对象

前面讲函数的时候讲过一个例子,现在这里再讲一下这个例子:

<!DOCTYPE html>

<html>

  <head>

    <title>objectTest.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <script type="text/javascript">

    //定义对象的一种方式:通过构造函数

        function member(name, gender)

        {

            //属性

            this.name = name;

            this.gender = gender;

            //方法

            this.display = display;//指定member对象的display方法

        }

        function display()

        {

            var str = this.name + " : " + this.gender;

            //这个display方法被谁使用了,此处的this就指向那个对象

            document.writeln(str + "<br/>");

        }

        //生成对象

        var m1 = new member("zhangsan", "male");

        var m2 = new member("lisi", "male");

        var m3 = new member("wangwu", "male");

        var m4 = new member("wangfang", "female");

        with(document)

        {

            write("输出属性","<br/>");

            write(m1.name + ":" + m1.gender + "<br/>");

            write(m2.name + ":" + m2.gender + "<br/>");

            write(m3.name + ":" + m3.gender + "<br/>");

            write(m4.name + ":" + m4.gender + "<br/>");

        }

        document.write("调用方法","<br/>");

        m1.display();

        m2.display();

        m3.display();

        m4.display();

    </script>

  </body>

</html>

小伙伴们是否对javascript中对象的概念和用法有了新的认识了呢,希望大家能够喜欢本文及本系列文章。

Javascript 相关文章推荐
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
JavaScript学习笔记之JS函数
Jan 22 #Javascript
JavaScript学习笔记之基础语法
Jan 22 #Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 #Javascript
Angularjs基础知识及示例汇总
Jan 22 #Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 #Javascript
使用jquery操作session方法分享
Jan 22 #Javascript
jQuery实现“扫码阅读”功能
Jan 21 #Javascript
You might like
PHP快速推送微信模板消息
2017/04/14 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python获取代理IP的实例分享
2018/05/07 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
自我鉴定注意事项
2014/01/19 职场文书
法院授权委托书格式
2014/09/28 职场文书
开幕式邀请函
2015/01/31 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
让子弹飞观后感
2015/06/11 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏