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 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
uni-app从安装到卸载的入门教程
May 15 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动态生成VRML网页
2006/10/09 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php中上传文件的的解决方案
2018/09/25 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
js原型链原理看图说明
2012/07/07 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
总结js函数相关知识点
2018/02/27 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
JavaScript类的继承多种实现方法
2020/05/30 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Flask之请求钩子的实现
2018/12/23 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
领导的自我鉴定
2013/12/28 职场文书
童装店创业计划书
2014/01/09 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers