详细谈谈javascript的对象


Posted in Javascript onJuly 31, 2016

javascript中有很多对象内容,挑几个感觉用的比较多的讲解。

在网上学习一些和看javascript的学习手册。

详细谈谈javascript的对象

如果要这个手册的可以留言,看到了我就发给你。恩,接下来总结一下我自己对象进阶之路。

1.对象: 

  (1)javascript中的所有事件都是对象:字符串、数组、函数.....

  (2)每个对象带有属性和方法。

  (3)JS允许自定义对象。

2.自定义对象 :

 (1)定义并创建对象实例。

 (2)使用函数来定义对象,然后创建新的对象实例。

例(针对2-(1)):

方法1:

           <script>

                     people=new Object();

                     people.name="颜小媛";

                     people.age="18";

                     document.write("name:"+people.name+",age:"+people.age);

           </script>

   结果:界面打印出name:颜小媛,age:18

方法2:

          <script>

                people=new Object();

                people={

                      name:"颜小媛",

                      age:18

                   }

                document.write("name:"+people.name+",age:"+people.age);

          </script>

  结果:界面打印出name:颜小媛,age:18

例(针对2-(2)):

      <script>

             function people(name,age){

                         this.name=name;

                         this.age=age;

              }

           son=new people("颜小媛",18);

           document.write("name:"+son.name+",age:"+son.age);

      </script>

      结果:界面打印出name:颜小媛,age:18

string字符串对象

1.string对象:

           string对象用于处理已有的字符串;字符串可以使用单引号或双引号【扩:混合使用避免冲突。】。

2.一些属性的演示:

   (1)在字符串中查找字符串:indexOf()

例(针对2-(1)):

    <script>

             var str="hello world";

             document.write("字符串:"+str.length+"<br/>");

             document.write(“world的位置:”+str.indexOf("world")+"<br/>");

             document.write(“llllll的位置”str.indexOf("llllll"));

    </script>

  结果:界面打印出字符串:11

                    world的位置:6

                    lllllll的位置:-1

    (2)内容匹配:match()

例(针对2-(2)):

    <script>

              var str="hello world";

              document.write(str.match("world"));

              document.write(str.match("lllllll"));

   </script>

结果:界面打印出 world null

(3)替换内容:replace()

例(针对2-(3)):

         <script>

                 var str="hello world";

                 document.write(str.replace("world","123"));

         </script>

结果:界面打印出hello 123

(4)字符串大写转换:toUpperCase() / toLowerCase()

例(针对2-(4)):

         <script>

                 var str="hello world";

                 document.write(str.toUpperCase());

         </script>

   结果:界面打印出HELLO WORLD

(5)字符串转为数组:split()

例(针对2-(5)):

   <script>

               var str1="hello,jjj,lll,kkk";

               var s=str1.split(",");//以逗号作为分隔符

               document.write(s[1]);

  </script>

结果:界面打印jjj

----------------------------------------------------

Date日期对象

1.Date对象:

        日期对象用于处理日期和时间。

2.获得当日的日期。

3.一些常用的方法:

   (1)getFullYear():获取年份。

   (2)getTime():获取毫秒。

   (3)setFullYear():设置具体的日期。

   (4)getDay():获取星期。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例(针对3):

    <script>

              var date = new  Date();

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

              document.write(date.getFullYear()+"<br/>");

              document.write(date.getTime()+"<br/>");

              document.write(date.getDay()+"<br/>");

              date.setFullYear(2010,1,1);

              document.write(date);

   </script>

结果:

详细谈谈javascript的对象

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4.时钟实例:

<html>
     <head>
                   <script >
                               function startTime(){    
                                               var today=new Date();
                                               var h=today.getHours();
                                               var m=today.getMinutes();
                                               var s=today.getSeconds();
                                               m=checkTime(m);
                                               s=checkTime(s);
                                               document.getElementById('txt').innerHTML=h+":"+m+":"+s;
                                               t=setTimeout('startTime()',500);//等同于t=setTimeout(function(){starTime;},500)
                               }

                             function checkTime(i)  {
                                              if (i<10) {

                                                    i="0" + i;

                                              }
                                                      return i
                                      }
                   </script>
           </head>

           <body onload="startTime()">
                   <div id="txt"></div>
            </body>
</html>

结果:动态的显示时间

详细谈谈javascript的对象

Array对象:

1.Array对象:

        使用单独的变量来存储一系列的值。

2.数组的创建:

例:var myArray=["kkk","ddd","ddddd"];

3.数组的访问:

       通过指定数组名以及索引号码,你可以访问某个特定的元素。

【注意:[0]是数组第一个元素,以此类推。】

4.数组常用的方法:

(1)concat():合并数组。

(2)sort():排序。

(3)push():末尾追加元素。

(4)reverse():数组元素翻转。

例(针对4-(1)):

   <script>

              var a=["aa","bb"];

              var b=["cc","dd"];

              var c=a.concat(b);

              document.write(c);

  </script>

结果:界面打印出 aa bb cc dd

例(针对4-(2)):

    <script>

           var a=["a","c","d","t","b","e"];

           document.write(a.sort());

   </script>

结果:界面打印出a b c e d t

【扩展】

      <script>

              var a=["5","2","3","4","1"];

              document.write(a.sort(function(a,b){return b-a;}))

     </script>

结果:界面打印出54321.(ps:因为b-a是倒序排列)。

例(针对4-(3)):

   <script>

          var a=["a","b"];

          a.push(c);

          document.write(a); 

  </script>

结果:打印出abc

例(针对4-(4)):

   <script>

          var a=["c","b","a"];

          document.write(a.reverse());

   </script>

结果:打印出abc

Math对象:

1.Match对象:

           执行常见的算数任务。

2.常见方法:

(1)round():四舍五入。

(2)random():返回0~1之间的随机数。

(3)max():返回最高值。

(4)min():返回最小值。

(5)abs():返回绝对值。

例(针对2-(1)):

  document.write(Math.round(2.5));

结果:界面打印出3

例(针对2-(2)):

document.write(Math.randow());

结果:界面随机打印出0~1的一个数。

document.write(Math.randow()*10);

结果:界面随机打印出1~10的一个数。

document.write(parseInt(Math.randow()));

结果:界面随机打印出0~1的一个数,并且这个数是整数。

例(针对2-(3)):

document.write(Math.max(10,20,3,90));

结果:界面打印出最大值90.

例(针对2-(4)):

document.write(Math.min(12,0,2,3,4));

结果:界面打印出最小值0.

例(针对2-(5)):

document.write(Math.abs(-10));

结果:界面打印出10.

Javascript 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
JS中使用DOM来控制HTML元素
Jul 31 #Javascript
图解prototype、proto和constructor的三角关系
Jul 31 #Javascript
JavaScript数据类型转换的注意事项
Jul 31 #Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 #Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 #Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 #Javascript
Javascript中级语法快速入手
Jul 30 #Javascript
You might like
PHP之COOKIE支持详解
2010/09/20 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
JS原型链怎么理解
2016/06/27 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python3中的md5加密实例
2018/05/29 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Python中一些深不见底的“坑”
2019/06/12 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python属于哪种语言
2020/08/16 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
幼儿教师寄语集锦
2014/04/03 职场文书
销售人员求职信
2014/07/22 职场文书
2014年保育员工作总结
2014/12/02 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技