JavaScript 基础&DOM（一）

最新推荐文章于 2022-07-18 07:45:00 发布
最新推荐文章于 2022-07-18 07:45:00 发布
阅读量275 收藏
点赞数
分类专栏： javaWeb 文章标签： JavaScript 基础&DOM（一）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hnust_yangjieyu/article/details/80932560
版权

JavaScript 基础&DOM

目录

JavaScript 基础&DOM.. 1

一、         JavaScript的String对象... 1

1.1        创建String对象... 1

1.2        方法和属性... 1

二、         JavaScript的Array对象... 1

2.1        创建数组... 1

2.2        数组属性和方法... 2

三、         JavaScript的Data对象... 2

3.1        在java中使用... 2

3.2        JavaScript中获取当前时间... 2

四、         JavaScript的Math. 3

五、         JavaScript的全局函数... 3

六、         JavaScript中不存在函数重载... 3

七、         JavaScript bom浏览器对象模型... 3

7.1        navigator. 3

7.2        screen. 4

7.3        location. 4

7.4        history. 4

7.5        window.. 4

八、         JavaScript dom 文档对象模型... 5

a)      dom:document object model 文档对象模型：... 5

8.2        对标记型文档进行操作... 5

8.3        Dom常用方法：... 6

8.4        Dom的三种模型... 6

8.5        DHTML介绍：... 6

8.6        Document对象：... 7

九、         Window弹窗案例... 7

 


 

 

一、      JavaScript的String对象

1.1     创建String对象

a)        Var str = new String()

1.2     方法和属性

b)        参考javaScript文档中的内容。

                                      i.             属性：length 字符床的长度

                                    ii.             与html相关的方法。

方法名

效果

备注

bold()

加粗，对象.bold()。

 

Fontcolor()

设置字体的颜色。

 

fontsize()

设置字体的大小。

 

link()

将字符串显示成超链接

 

sub()

上标

 

sup()

下标

 

                                   iii.             与java相似的方法。

方法名

效果

备注

concat()

连接字符串

 

charAt()

返回指定位置的字符串

超过下标返回空字符串

indexOf()

返回查询字符的起始下标

不存在返回-1

spilt()

切分字符串，返回数组

 

replace()

将原始替换为指定值

参数(待替换,替换)

substring()

在字符串中截取字符串

参数：(indexnum1,length)

 

二、      JavaScript的Array对象

2.1     创建数组

         三种创建方式：vararr1 = [1,2,3]

                                       var arr2 = new Array(3)

                                       var arr3 = new Array(3,4,5)

2.2     数组属性和方法

1、  属性：length 数组长度

2、  方法：

方法名

效果

备注

concat()

实现两个数组的连接

 

join()

根据指令字符将数组分割

 

push()

向数组的末尾添加元素，并且返回数组长度

      添加的是一个数组，会把这个数组当作一个字符串将之添加进去。

pop()

删除并且返回最后-一个元素

 

reverse()

将数组翻转

 

 

三、      JavaScript的Data对象

3.1     在java中使用

         Datedate = new Date();

         //格式化

         方法：toLocaleString();将格式转换成当前格式

3.2     JavaScript中获取当前时间

方法名

效果

备注

toLocalString()

转换成习惯的格式

 

getFullYear()

得到当前年份

4位数字

getMoth()

得到当前月份

得到当前的月，返回的是0-11月

getDay()

获取当前的星期

星期日用0表示

getDate()

得到当前的天

 

getHours(0

获取当前的小时

 

getMinutes()

获取当前的分钟

 

getSeconds()

获取当前的秒钟

    

getTime()

获取毫秒数

 

 

 

四、      JavaScript的Math

         数学运算类，Math中的类全部都是静态方法，可以直接使用：Math.方法()

        

方法名

效果

备注

ceil(x)

向上取整

 

floor(x)

向下取整

 

round(x)

四舍五入

 

random()

产生0-1的随机数

 

pow(x,y)

X^Y

 

 

五、      JavaScript的全局函数

         不属于任何一个对象，直接写名称使用。

        

方法名

效果

备注

eval(string)

执行js代码

执行js的字符串命令

encodeURL()

对字符进行编码

对一些字符进行编码，例如中文

decodeURL()

对字符进行解码

 

isNaN()

判断当前的字符串是否是数字

返回值是false(是数字)或者true（不是数字）

parseInt()

类型转换

parseInt(“123”)+1

 

六、      JavaScript中不存在函数重载

         JAVA中函数重载的定义：

一个类中具有相同名称的方法，但是有不同的参数名称。

         JavaScript：不存在重载。

可以通过其他方式模拟重载。

方式：通过arguments是存放参数的数组，通过判断数组的长度进行不同的函数操作，类似于达到了函数重载的效果。

七、      JavaScript bom浏览器对象模型

7.1     navigator

获取浏览器的一些信息。客户机的信息。

属性名

效果

备注

appName

获取浏览器的名称

 

 

 

 

        

7.2     screen

获取屏幕信息。

属性名

效果

备注

weidth

得到屏幕宽

 

Height

得到屏幕高

 

 

7.3     location

请求url地址。

href属性：获取到请求的url地址，设置url地址。

        

属性名

效果

备注

href

获取请求的url地址

 

href=’url”

设置url地址

能够跳转到设置的url处

 

7.4     history

用户请求的url的历史记录。

        

方法

效果

备注

back()

返回上一个页面

 

Forward()

下一个页面

 

go(num)

到当前页面的第num页面

 

 

7.5     window

窗口对象，顶层对象（所有的bom对象都是在窗口对象中进行操作的。）。

方法

效果

备注

alert()

弹出一个消息框，显示内容

 

confirm()

弹出一个确认提示框

返回true或者false

prompt(“文本”,“默认”)

弹出输入框

 

open(url,name,features)

打开一个新的窗口

弹出一个窗口，

close()

关闭一个窗口

浏览器兼容器比较差

setInterval(js代码,时间)

每隔设定时间段执行一次js代码

做定时器来使用

setTimeout(js代码,时间)

在指定的毫秒数以后调用js,只执行一次。

 

clearInterval(id1)

清楚setInterval的定时器

Id1是创建setInterval对象返回的代号

clearTimeout(id2)

清除setTimeout设置的定时器

Id1是创建setTimeoutl对象返回的代号

属性

描述

 

Opener

获得创建此窗口的窗口

 

        

 

八、      JavaScript dom 文档对象模型

a)        dom:documentobject model 文档对象模型：

a)        文档：超文本标记文档。

b)        对象：提供了属性和方法。

c)        模型：使用属性和方法操纵超文本标记文档。

d)        可以使用js中提供的dom对象，使用dom中的属性和方法，对我的标记型文档进行操作。

8.2     对标记型文档进行操作

1、  首先需要对我的标记型文档中的所有内容都封装成对象。

2、  需要把html里面的标签、属性、文本内容都封装成对象。

3、  想要对标记型文档进行操作，解析标记型文档。

a)        分析如何使用dom解析html文档。

                                                                  i.             根据html在内存中分配一个树形的内存结构。

                                                                ii.             Document:整个html文档。

                                                               iii.             标签对象 element对象。

                                                               iv.             属性对象

                                                                v.             文本对象

                                                               vi.             节点对象：node,节点对象是上述对象的父对象。

8.3     Dom常用方法：

8.4     Dom的三种模型

三个阶段：

1、  将html文档封装成对象

2、  在level1.1的基础上添加新的功能，例如：事件和css样式。

3、  支持xml1.0的一些新特性。

8.5     DHTML介绍：

1、DHTML很多技术的简称：

1、  HTML:封装数据

2、  CSS：使用属性属性值设置样式   

3、  DOM：操作html文档

4、  javaScript:专门指的是javascript的语法语句，ECMAScript。

 

2、BOM 和HTML DOM关系图


8.6     Document对象：

         常用方法：

        

方法

效果

备注

Wirte()

1、  向页面输出值，

2、  向页面输出html代码

 

getElementById(id)

通过id得到元素（标签）

传递的参数是标签里面的id值

getElementsByName(“name的属性名称”)

通过标签的name的属性值，得到标签，返回的一个集合.

根据Name，返回集合

getElementsByTagName(“标签名称”)

通过标签名，得到标签，返回一个集合。

根据标签名，返回集合

 

九、      Window弹窗案例

实际开发中我们不能够让客户端访问我们本地的文件，因此我们需要在服务器端建立相应的响应机制。

1、  实现过程

a)        创建一个页面

                                      i.             有两个输入项和一个按钮。

                                    ii.             按钮上有一个事件：弹出一个新窗口。

b)        创建弹出的页面

                                      i.             表格

                                    ii.             表格的每一行有一个按钮，编号和姓名

                                   iii.             按钮上有一个事件，把当前的编号和姓名复制到第一个页面相应的位置。

 

//windowDemo1:

<html>

         <head>

         </head>

         <body>

                   编号：<inputtype = "text" id = "numid"/><br/>

                   姓名：<inputtype = "text" id = "nameid"/><br/>

                   <inputtype = "button" value = "选择" onclick ="open1()" />

         <script type ="text/javascript">

                   function  open1(){

                            //open方法

                            window.open("win2.html","text","width= 200,height = 100");

                   }

         </script>

 

         </body>

</html>

//win2.html

<html>

         <head>

                  

         </head>

         <body>

                   <inputtype = "button" value="选择"  onclick = "s1()"/>

                   <script>

                            functions1(){

                                     alert("123");

                                     varpwin = window.opener;

                                     pwin.document.getElementById("numid").value= "123";

                                     pwin.document.getElementById("nameid").value="456";

                                     window.close();

                                    

                            }

                   </script>

         </body>

</html>

JustDoIt952
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript & DOM Enlightenment
11-30
同时，随着Web组件和框架（如React、Vue、Angular）的流行，理解JavaScript和DOM的基础变得更为重要，因为它们是这些高级技术的基石。 通过"JavaScript Enlightenment"，你可能会学习到如何编写高效、可维护的...
javascript&&dom葵花宝典
04-16
1. **JavaScript基础知识** - **变量与数据类型**：JavaScript支持基本数据类型（如字符串、数字、布尔值、null和undefined）和引用数据类型（如对象）。理解变量声明（var、let和const）以及它们的作用域至关重要...
JavaScript DOM基础
程序员柒的博客
07-18 1641
本文简单的讲解了JavaScript的DOM基础，适合初学的朋友们，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（DocumentObjectModel，DOM）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。编程接口。......
JavaScript DOM 基础入门
sk_anruo的博客
01-01 185
该部分内容对 JavaScript DOM 基础入门知识进行了介绍，并给出了一些小例子。如果已经有一定的基础则没必要再翻阅本部分内容。
JavaScript---DOM（基础）
ZWHSOUL的博客
05-29 199
//DOM方法的使用 //每个标签（节点）都是一个对象 1、getElementByID //返回id对应的对象 //实列： alert(typeof document.getElementById('purchases')); 2、getElementByTagName ...
js基础-DOM
front_end_fan
09-20 319
DOM1、DOM文档对象模型（Document Object Model，DOM）是表示和操作HTML和XML文档内容的基础API。 当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。 如下图：上图中的每一个方框是文档的一个节点，它表示一个Node对象，而所有节点组成了节点树（DOM树）。节点有7种类型：
javascript基础DOM操作
aikouzhan0763的博客
07-17 94
DOM 中的三个字母，D（文档）可以理解为整个 Web 加载的网页文档；O（对象）可以理解为类似 window 对象之类的东西，可以调用属性和方法，这里我们说的是 document对象；M（模型）可以理解为网页文档的树型结构。 DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为W3C 标准。DOM1 所支持的浏览器包括 IE6+、F...
JavaScript学习笔记之DOM基础操作实例小结
10-17
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
javascript基础（Dom查询练习）（二十七）
余正源的博客
02-13 417
1.练习 全选练习 window.onload = function(){ //获取四个多选框的对象 var items = document.getElementsByName("items"); //获取全选全不选多选框 var checkedAllBox = document.getElementById("checkedAllBox");
JavaScript中的DOM操作基础知识
前端精髓
11-08 381
DOM操作 可以使用 querySelector（） 方法查询 DOM，该方法将任意 CSS 选择器作为参数： const myElement = document.querySelector('#foo > div.bar') 通过 Doument 类型调用 querySelector() 方法时，会在文档元素的范围内查找匹配的元素。而通过 Element 类型调用 querySele...
javascript DOM和DOM操作的四种基本方法
热门推荐
爱看书的昌 的博客
10-21 1万+
在了解了javascript的语言特性后，javascript真正大放光彩的地方来了——这就是javascript DOM.Javascript DOMDOM(Document Object Model),文档对象模型。简单的说就是一套操作文档内容的方法。文档：DOM的D 如果没有document(文档)，DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中，DOM就悄然而生，它将根据你
javaScript DOM编程基础
niaonao
12-21 3552
javaScript Document Object Model; Document：文档，html文档与xml文档 Object：对象，javaScript document对象方法及属性 Model：模型 DOM是针对xml、html的基于树的API，DOM树定义了节点Node的接口以及许多节点类型来表示文档不同功能不同方面的节点
javascript格式化json显示
weixin_34212189的博客
04-16 228
// Example usage: http://jsfiddle.net/q2gnX/ var formatJson = function(json, options) { var reg = null, formatted = '', pad = 0, PADDING = ' '; // one can also use '\t' or a different number of ...
JavaScript DOM详解
Chiclaim
10-03 7390
DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling
JavaScript----DOM基础知识（一）什么是DOM？
yufanhui的博客
07-10 2602
 什么是DOM？DOM（document object model）文档对象模型，是针对HTML和XML的一个API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。DOM是由脱胎于微软公司开发的DHTML，1998年DOM  1成为了W3C的推荐标准，为基本的文档结构查询提供了接口。DOM--"D"：文档如果没有“D”，DOM就没有任何意义，当创...
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
掌握JavaScript基础：DOM编程与window对象
本章节是关于JavaScript基础学习的第一课，主要聚焦于网页中JavaScript的入门知识和DOM编程。在这一章，我们将深入理解脚本执行的基本原理，掌握控制语句的使用，以及创建和调用有参函数。 脚本执行原理部分将介绍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值