javascript学习指南--话说javascript对象

最新推荐文章于 2022-06-05 22:16:44 发布
最新推荐文章于 2022-06-05 22:16:44 发布
阅读量426 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyqblog/article/details/54707142
版权

写在前面

本文是对javascript的提点，对象之列举出常用对象和附带的常用方法，不展开特别详细的论述，详细的全面的方法可以去查文档，所以 需要 参考文档 （点击这儿下载）的帮助

第一篇讲述的是javascript的语法 ； 本篇讲述javascript对象（包含javascript基本对象、bom对象、dom对象）、第三篇附上javascript案例（包括HTML表单验证、动态时间、下拉列表左右选择、鼠标点击效果、省市联动等）

一、javascript本地对象和内置对象

该对象在参考文档_W3School手册（参考文档在本文开头有下载链接）中有详细描述，位于文档正文 横标题javascript——-左栏课程表——–javascript—JS参考手册—-javascript对象—-javascript对象

（一）、String对象

创建String对象：var str="abc" ;
常用属性：length
常用方法：

  1. 与HTML相关方法：

    • bold( ): 加粗
    • fontcolor( ) :设置字符串的颜色
    • fontsize( ):设置字符串的大小
    • link( ): 将字符串显示成超链接
    • sub() 　sup ( ) : 小标和上标

  2. 与javal类似方法（便于记忆）：

    • concat ( ): 连接字符串
    • charAt ( ): 返回指定位置的字符串，字符不存在，返回空字符
    • indexOf( ): 返回字符串位置，不存在，返回-1
    • split( ) : 切分字符串，成数组
    • replace( ):替换字符串 ,需要传递两个参数
    • substr( ) 和 substring ( ):截取两个字符之间的字符串
<script type="text/javascript">

        //length属性
        var str = "abcde";
        document.write(str.length);
        //bold方法
        var str1 = "abcdef";
        document.write(str1.bold());
        //fontcolor
        var str2 = "abcdef";
        document.write(str2.fontcolor("red")); //颜色为红色
        //fontsize
        var str3 = "abcdef";
        document.write(str3.fontsize(5));
        //link
        var str4 = "abcdef";
        document.write(str4.link("hello.html"));//加超链接
        //sub 和sup
        var s1 = "100";
        var s2 = "200";
        var s3 = "300"
        document.write(s1.sub());
        document.write(s3);
        document.write(s2.sup());
    </script>
<script type="text/javascript">
        //concat方法
        var str1 = "abc";
        var str2 = "dfg";
        document.write(str1.concat(str2)); //链接两个字符串
        //charAt方法
        var str3 = "abcdef";
        document.write(str3.charAt(3)); //返回3号位置的字符d，字符不存在，返回空字符        
        //indexOf方法
        var str4 = "abcdef";
        document.write(str4.indexOf("e")); //字符不存在，返回-1
        //split方法
        var str5 = "a-b-c-d";
        var arr1 = str5.split("-"); //通过-号，进行切分，组成数组，数组原酸为a,b,c,d
        document.write("length: "+arr1.length); //长度为4      
        //replace
        var str6 = "abcd";
        document.write(str6);
        document.write("<br/>");
        document.write(str6.replace("a","P"));  //将字符串中的a替换成P
        //substr  substring
        var str7 = "abcdefghiklmn";
        //document.write(str7.substr(4,5));  //efghi  从第四位开始，向后截取五个字符
        document.write(str7.substring(3,5)); //de  从第几位开始到第几位结束  [3,5)
</script>

（二）、Array对象

创建数组： var arr1 = [1,2,3]; var arr2 = new Array(3); var arr3 = new Array(1,2,3);
常用属性：length
常用方法：

  1. concat ( ): 数组的连接
  2. join( )：根据指定的字符分割数组
  3. push( ):向数组末尾添加元素，返回数组的新的长度
  4. pop( )：表示 删除最后一个元素，返回删除的那个元素
  5. reverse( ):颠倒数组中的元素的顺序
<script type="text/javascript">
        //concat()方法
        var arr11 = [1,2,3];
        var arr12 = [4,5,6];
        document.write(arr11.concat(arr12)); //链接两个数组

        //join方法
        var arr13 = new Array(3);
        arr13[0] = "a";
        arr13[1] = "b";
        arr13[2] = "c";
        document.write(arr13.join("-")); //用-号连接a,b,c，返回字符串a-b-c
        //push方法
        var arr14 = new Array(3);
        arr14[0] = "张三";
        arr14[1] = "李四" ;
        arr14[2] = "王五";
        arr14.push("独孤求败");//进栈， 数组第四个元素是独孤求败           
        var arr15 = ["aaa","bbb"];
        arr15.push(arr14);  //将arr14整个数组作为arr15的第3个元素

        //pop方法
        document.write("<hr/>");
        var arr16 = ["张三","李四","王五"];
        arr16.pop());  //将王五剔除数组

        //reverse方法
        var arr18 = [189,"张三","李四","王五"];
        arr18.reverse(); //数组顺序颠倒，王五、李四、张三、189      
    </script>

（三）、Data对象

常用方法：

  1. 获取当前时间 : var date = new Date();
  2. getFullYear()：得到当前的年
  3. getMonth()：获取当前的月
  4. getDay()：星期,返回的是 (0 ~ 6)
  5. getDate()：得到当前的天 1-31
  6. getHours()：获取小时
  7. getMinutes()：获取分钟
  8. getSeconds(): 获取秒
  9. getTime()： 获取毫秒 ， （可以使用毫秒数处理缓存的效果）
  10. toLocaleString( ) ；将Date对象转换成字符串，可以显示成中国人习惯的时间格式
<script type="text/javascript">
        //获取当前时间
        var date = new Date();
        document.write(date);  //
        //转换成习惯的格式
        document.write(date.toLocaleString());
        //得到当前的年
        document.write("year: "+date.getFullYear());

（四）、Math对象

常用方法：

  1. ceil(x): 向上舍人
  2. floor(x)：向下舍人
  3. ound(x)：四舍五入
  4. random()：得到0~1之间的随机数（伪随机数）
  5. pow(x,y) : x的y次方
var aa = 50.89;     
        document.write(Math.ceil(mm));
        //random方法
        //得到0-9的随机数
        document.write(Math.floor(Math.random()*10));
        //pow(x,y)  2的4次方
        document.write(Math.pow(2,4));

二、Browser（BOM）对象

该对象在参考文档_W3School手册（参考文档在本文开头有下载链接）中有详细描述，位于文档正文 横标题javascript——-左栏课程表——–javascript—JS参考手册—-javascript对象—-Browser对象

broswer object model:浏览器对象模型

（一）、navigator对象

获取客户机的信息（浏览器的信息）

  • navigator.appName ： 获取浏览器的名字信息

（二）、screen对象

获取屏幕的信息

  • screen.width ： 屏幕宽度
  • screen.height ： 屏幕高度

（三）、location对象

请求URL地址
常见属性： href

<script type="text/javascript"> 
        //navigator
        document.write(navigator.appName); //输出浏览器信息
        //screen对象
        document.write(screen.width);
        document.write(screen.height);
        //location对象
        //href
        function href1() {
            location.href = "h.html"; //点击HTML页面按钮，跳转到h.hmtl页面中
        }
        document.write(location.href); //获取请求的URL地址
    </script>

（四）、history对象

请求的url的历史记录　（看以查看文档，页面过于繁多，不再演示）

  • history.back(); 　　history.go(-1);
  • history.forward();　　history.go(1);

（五）、window对象

窗口对象，这个对象是顶层对象，加上上述等所有的bom对象都是在window里面操作，即 window.xxxx，一般window省略

常用方法：

  • window.alert() : 页面弹出一个框，显示内容
  • confirm()： 确认框提示框
  • prompt()： 输入的提示框
  • open() :　打开一个新的窗口
  • close(): 关闭窗口(浏览器兼容性比较差)
  • 做定时器
    • setInterval(“js代码”,毫秒数) ：表示多少秒，执行一次js代码
    • setTimeout(“js代码”,毫秒数) ：表示在毫秒数之后执行，但是只会执行一次
    • clearInterval(): 清除setInterval设置的定时器
    • clearTimeout() : 清除setTimeout设置的定时器
<script type="text/javascript">     
        //演示confirm方法
        var flag = window.confirm("是否删除？");
        if(flag == true) {
            alert("删除成功");
        } else {
            alert("删除失败");
        }
        //演示prompt方法
        window.prompt("please input : ", " 输入框默认内容");
        //open方法，点击HTML页面按钮，在宽高说明的新窗口中打开指定链接
        function open1() {
            window.open("h.html","","width=200,height=100");
        }
        window.close();//关闭当前窗口
    </script>

三、 DOM 对象

该对象在参考文档_W3School手册（参考文档在本文开头有下载链接）中有详细描述，位于文档正文 横标题javascript——-左栏课程表——–javascript—JS参考手册—-javascript对象—-HTML　DOM对象

关于DOM的说明

（一）、document对象

作用于整个文档，对整个文档中的标签都有效用
常用方法：

  • write( )方法 ： 像页面输出变量或 html代码
  • getElementById( )：通过id得到元素（标签），返回的是一个对象，对象名.属性名可以得到标签里面的值
  • getElementsByName( ) ： 通过标签的name的属性值得到元素（标签），返回的是一个对象数组
  • getElementsByTagName(“标签名称”)： 通过标签名称得到元素（标签），返回的是一个对象数组
<body>
    <input type="text" id="id1" name="name1"/>
    <input type="text" name="name2" value="aaaa"/><br/>
    <input type="text" name="name2" value="bbbbb"/><br/>
    <input type="text" name="name2" value="cccc"/><br/>
    <script type="text/javascript">
        //write方法
        var str = "abc";
        document.write(str);
        document.write("<hr/>");
        //使用getElementById得到input标签
        var input1 = document.getElementById("NAME1"); //input1是一个对象
        document.write(input1.name);  //得到name的值
        input1.value = "bbbbb";  //给input里面设置value值
       //使用getElementsByName得到input标签
        var input2 = document.getElementsByName("name2");//input2是一个对象数组
        for(var i=0;i<input1.length;i++) {   //遍历数组得到value值
            var input21 = input1[i];  //每次循环得到input对象，赋值到input21里面
            alert(input1.value);    //得到每个input标签里面的value值
        }
        //使用getElementsByTagName得到input标签
        var input3 = document.getElementsByTagName("input"); //input3是对象数组
        for(var i=0;i<input3.length;i++) { //遍历数组，得到value值
            var input31 = input3[i];
            alert(input1.value);
        }
    </script>
 </body>

另外，document对象还有一些方法，如： createElement( )等，这儿不做详细列举，如果有需要，可在参考文档_网页开发手册（参考文档在本文开头有下载链接）中，进行索引，查找关键字“ document” ，双击document, 显示第一个结果，在正文成员表的方法中查看。

（二）、element对象

作用于HTML的元素，只在标签元素范围起作用
要对element对象进行操作，首先要获取到element

几个有关获取的方法：

  • getAttribute( ) ：获取元素属性的值 ( 对于document获取的方法，这是新方法)
  • setAttribute( ); ：设置属性的值
  • removeAttribute( ); ： 从元素中移除指定属性
  • getElementsByTagName( ): 获取标签下面自标签的唯一方法
<body>
    <input type="text" name="name1" id="id1" value="aaaa"/>
    <ul id="ulid1">
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
    </ul>

    <script type="text/javascript">
        //获取input标签,方法一： 利用document对象
        var input1 = document.getElementById("id1");
        alert(input1.value);
        //获取input标签,方法二： 利用element对象的getAttribute（）方法
        alert(input1.getAttribute("value"));
        //设置属性
        input1.setAttribute("class","haha");        
        alert(input1.getAttribute("class"));
        //移除元素的一个属性 
        input1.removeAttribute("value");    

        //获取标签（ul）下的所以子标签(li )
        var ul1 = document.getElementById("ulid1"); //先获取标签
        var li1 = ul1.getElementsByTagName("li"); //在获取子标签，li1是一个对象数组
    </script>
 </body>

（三）、node对象

作用于节点，只在节点范围内起作用
常用属性：

  • 标签节点：
    • 标签. nodeType : 1
    • 标签.nodeName: 大写标签名称
    • 标签.nodeValue :null
  • 属性节点：
    • 属性.nodeType : 2
    • 属性.nodeName : 属性名称
    • 属性.nodeValue : 属性的值
  • 文本节点：
    • 文本.nodeType : 3
    • 文本.nodeName ： #text
    • 文本.nodeValue ; 文本内容

常用方法：
这里写图片描述

<body>
    <span id="spanid">你好啊，你好呀</span>
    <script type="text/javascript">
        //获取标签对象
        var span1 = document.getElementById("spanid"); //这是document对象中的方法
        alert(span1.nodeType);   //  1
        alert(span1.nodeName);   // SPAN
        alert(span1.nodeValue);  // null

        //属性
        var id1 = span1.getAttributeNode("id"); //这是element对象中的方法，可以去查文档（本文没有讲述）。
        alert(id1.nodeType);  // 2
        alert(id1.nodeName);  // id
        alert(id1.nodeValue); // spanid

        //获取文本
        var text1 = span1.firstChild;//这是上述Node对象中的方法
        alert(text1.nodeType);  //  3
        alert(text1.nodeName);  // #text
        alert(text1.nodeValue); // 内容
    </script>
 </body>
<body>
    <ul id="ulid">
        <li id="li1">aaaaa</li>
        <li id="li2">bbbbb</li>
        <li id="li3">ccccc</li>
        <li id="li4">ddddd</li>
    </ul>
    <script type="text/javascript">     
        //得到li1
        var li1 = document.getElementById("li1");
        //得到ul
        var ul1 = li1.parentNode;
        alert(ul1.id);

        //获取ul的第一个子节点 id=li1
        //得到ul
        var ul1 = document.getElementById("ulid");
        //第一个子节点
        var li1 = ul1.firstChild;
        alert(li1.id);

        //得到最后一个子节点
        var li4 = ul1.lastChild;
        alert(li4.id);

        //获取li的id是li3的上一个和下一个兄弟节点
        var li3 = document.getElementById("li3");
        alert(li3.nextSibling.id);
        alert(li3.previousSibling.id);      
    </script>
 </body>

（四）、innerHTML对象

这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
第一个作用：获取文本内容
第二个作用：向标签里面设置内容（可以是html代码）

<body>
    <span id="id1">你好</span>
    <div id="id2">

    </div>
    <script type="text/javascript">
        //获取span中的文本内容
        var span1 = document.getElementById("sid");
        alert(span1.innerHTML);

        //向div里面设置内容 <h1>AAAAA</h1>
        //获取到div
        var div11 = document.getElementById("div11");
        //设置内容
        //div11.innerHTML = "<h1>AAAAA</h1>";

        //向div里面添加一个表格
        //var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";
        var tab = "<table>";
        tab += "</table>";
        //相当于 var tab = "<table></table>";
        div11.innerHTML = tab;
    </script>
 </body>

四、关于 DOM的说明

说明
该说明在参考文档（参考文档在本文开头有下载链接）中有详细描述，位于文档正文 横标题javascript——-左栏课程表——–HMTL　DOM—HTML DOM

DOM ：document object model (文档对象模型)

  • 文档是： 超文本文档 / 超文本标记文档（HTML、XML）
  • 对象 ：提供了属性和方法 （第三个标题就是对DOM对象的讲解）
  • 模型 ：使用属性和方法操作超文本标记型文档

即： 使用dom里面提供的对象，使用方这些对象的属性和方法，对标记型文档或超文本标记文档进行操作

根据文档的不同，DOM标准分为三个部分：

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

(本文中的DOM对象主要是对HTMLDOM的讲解，XML　DOM　会在以后的文章中阐述) 以下也是针对HTML DOM 到底是什么 进行说明阐述

HTM L DOM 主要是关于如何获取、修改、添加和删除 HTML 元素的标准 （这些方法在标题三 DOM 对象中都有讲解 ），当网页被加载的时候，浏览器会创建页面的文档对象，文档对象模型（HTML　DOM）被构造为对象的树（树形结构如下图所示）。即：

HTML中的所有内容都是节点，DOM 是被视为节点树的HTML
整个文档是一个文档节点 、整个HTML对象是一个元素节点、元素内的文本内容是文本节点、每个HTML属性是属性节点、注释是注释节点

这里写图片描述

该图阐述了DOM与HTML的关系，说明了树形结构的特点（父、子、同胞）

通过可编程的模型，javascript可以来创建动态的HTML，对HTML的元素和属性以及对CSS的样式和所有事件作出反应（这些方法在本文DOM对象中有讲解）

DOM 对HTML文档进行操作，解析HTML过程是 根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象(document对象：整个文档 ; element对象：标签对象 ; 属性对象 ；文本对象； Node对象)

孤旅青山迷情人
关注
专栏目录
零基础JavaScript学习【第八期】
GUIDM的博客
06-04 592
本期学习日期对象&数组对象
零基础JavaScript学习【第六期】
GUIDM的博客
05-27 1111
久违的更新！谢谢大家的支持，记得要温故而知新!
零基础JavaScript学习【第七期】
GUIDM的博客
05-31 674
第七期更新啦，感谢大家的支持。记得要复习之前的内容，查漏补缺。
零基础JavaScript学习【完结篇】
GUIDM的博客
06-05 1105
最后一期，字符串对象。 感谢大家对零基础JavaScript专栏的支持
零基础JavaScript学习【第二期】
GUIDM的博客
05-16 890
零基础JavaScript学习第二期
JavaScript：面向对象编程
LiLi的博客
01-12 460
面向对象简介 面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式 为什么要使用面向对象 《大话设计模式》中大鸟给小菜讲的故事非常经典： “话说三国时期，曹操带领百万大军攻打东吴，大军在长江赤壁驻扎，军船连成一片，眼看就要灭掉东吴，统一天下，曹操大悦，于是大宴众文武，在酒席间，曹操诗性大发，不觉吟道：‘喝酒唱歌，人生真爽……’众文武齐呼：‘丞相好诗！’于是一臣子速命印刷工匠刻版印刷，以便流传天下。”“样张出来给曹操一看，曹操感觉不妥，说道：‘喝与唱，此话
《javascript面向对象编程指南》
Sunshine
06-02 529
**第一章、引言 1.5 面向对象的程序设计常用概念 对象（名词）：是指“事物”在程序设计语言中的表现形式。 这里的事物可以是任何东西，我们可以看到它们具有某些明确特征，能执行某些动作。 这些对象特征就叫做属性（形容词），动作称之为方法（动词）。 类：实际上就是对象的设计蓝图或制作配方。类更多的是一种模板，而对象就是在这些模版的基础上被创建出来的。 封装：主要阐述对象中包含的内容。通常包
零基础JavaScript学习【第五期】
GUIDM的博客
05-23 769
第五期来咯，记得要复盘之前的知识哦！
JavaScript权威指南学习笔记（三）面向对象编程
u013959864的专栏
01-25 185
目标 理解对象属性 理解并创建对象 理解继承 ECMA-262对对象是这么定义的，“unordered collection of properties each of which contains a primitive value, object, or function.”，是一种包含一个初始类型值，对象或者函数的属性的集合。严格的说，对象是一种由无序数值组成的数组。每个属性和方法都
基于大模型技术的算力产业监测服务平台设计
09-17
内容概要：本文提出了一种新型算力产业监测服务平台的设计理念，运用国内自主研发的大模型技术支持，通过对传统技术的改进和完善，提出了三层架构的设计方法，即基础设施层（含向量数据库和模型训练）、大模型应用框架层（强化数据处理与多维关系挖掘）及业务层（如智能分析助手）。这种设计方案旨在提高算力产业发展监测与决策制定的质量。 适合人群：电信行业的从业人员及研究人员；算力产业链各环节管理者；政府相关机构和政策决策者。 使用场景及目标：在多种算力相关的应用场景（如云计算中心管理，数据中心监测，政策分析）中辅助决策者进行快速有效的信息获取和技术选择；助力算力产业发展方向的精确把控和战略调整。 其他说明：随着大模型技术的日臻成熟，该算力产业监测服务平台预计将进一步丰富自身的应用领域和服务深度，以促进算力行业更智慧化发展。
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot.zip
最新发布
09-17
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot
吉他谱_What I've Done - Linkin Park.pdf
09-17
初级入门吉他谱 guitar tab
吉他谱_Too sweet - Hozier.pdf
09-17
初级入门吉他谱 guitar tab
Linux使用的一些笔记，包括shell命令，软件，一些实用的网站的整理_Linux_note.zip
09-17
Linux使用的一些笔记，包括shell命令，软件，一些实用的网站的整理_Linux_note
基于ssm的机房预约系统设计与实现.docx
09-17
基于ssm的机房预约系统设计与实现.docx
app执行Linux命令_app-Linux-.zip
09-17
app执行Linux命令_app-Linux-
吉他谱_Would - Alice in Chains.pdf
09-17
初级入门吉他谱 guitar tab
吉他谱_Yellow Ledbetter - Pearl Jam.pdf
09-17
初级入门吉他谱 guitar tab
JavaScript对象创建指南-从基础到实践
"这篇教程详细介绍了如何在JavaScript中创建新对象，强调了JavaScript作为一门...通过学习这篇教程，开发者能够深入理解JavaScript创建对象的概念，从而更好地利用这门语言进行网页交互、动态效果和复杂应用的开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孤旅青山迷情人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值