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 相关文章推荐
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
javascript学习小结之prototype
Dec 03 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
Nautil 中使用双向数据绑定的实现
Oct 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
smarty内置函数config_load用法实例
2015/01/22 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
为数据添加append,remove功能
2006/10/03 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
用python制作游戏外挂
2018/01/04 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
Python安装selenium包详细过程
2019/07/23 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
人事专员工作职责
2014/02/22 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
董事长秘书工作职责
2014/06/10 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
工作感想范文
2015/08/07 职场文书
财务人员入职担保书
2015/09/22 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python