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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
js实现select跳转功能代码
Oct 22 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
angular十大常见问题
2017/03/07 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
pyqt5中动画的使用详解
2020/04/01 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Django nginx配置实现过程详解
2020/09/10 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
支部鉴定材料
2014/06/02 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python