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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
实例分析js事件循环机制
Dec 13 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
js实现批量删除功能
Aug 27 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使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
实例详解vue中的$root和$parent
2019/04/29 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
详解Python中的动态属性和特性
2018/04/07 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Django实现文件上传下载功能
2019/10/06 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
python 模拟登陆github的示例
2020/12/04 Python
selenium自动化测试入门实战
2020/12/21 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
入党自我评价优缺点
2014/01/25 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
给上级领导的感谢信
2015/01/22 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
婚礼父母致辞
2015/07/28 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书