JavaScript详解

阅读量：326 次

发布时间：2019-03-03

本文共 8881 字，大约阅读时间需要 29 分钟。

一、JavaScript基础知识

（一）简介

（1）概念：

JavaScript是一种基于对象和事件驱动的 , 并具有安全性能的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

（2）特点：

JavaScript 是脚本语言。

JavaScript 是解析型语言，边执行边解释。

JavaScript 可向HTML 页面中添加交互行为。

（3）组成：

ECMAScript(核心)

BOM（浏览器对象模型，Browser Object Model）

DOM（文档对象模型，Document Object Model）

（二）JavaScript基本结构

JavaScript 代码必须位于 <script> 与 </script> 标签之间。

<script></script> 可以放在文档的任何地方，一般放在头部或者尾部。

有的网页中用缺省type=“text/Javascript”，这种写法是正确的，因为

HTML5中可省略type属性，HTML5默认为是text/Javascript。

（三）JavaScript的输出

显示数据：

1. 弹窗 (浏览器事件)

语法：alert("Hello,World!");

    
       Title

在这里插入图片描述

2. 输出在网页上 (html语言) (文档对象事件)

语法：document.write("Hello,World!");

    
       Title

3. 控制台输出 (调试语法)

语法：console.log("Hello,World!");

    
       Title

在这里插入图片描述

4. 写在网页上（使用 innerHTML 写入到 HTML 元素。）

语法：document.getElementById("xxx").innerHTML = "Hello,World!";

在这里插入图片描述

（四）语法

JavaScript语法与Java类似，本文只讲解与Java语法不同的地方。

（1）字面量

字符串（String）字面量既可以使用单引号也可以使用双引号:

"John Doe"'John Doe'

（2）赋值

JavaScript的语法极其随意，例如，下面的一行代码就是一个完整的赋值语句：

var i = 1;//var用来声明一个任意变量

下面的一行代码是一个字符串，但仍然可以视为一个完整的语句：

'Hello, World!';//变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用

（3）数据类型

undefined var width;变量width没有初始值，将被赋予值undefined

null 表示一个空值，与undefined值相等

number var iNum=23; //整数 ,var iNum=23.0; //浮点数

boolean true和false

string一组被引号（单引号或双引号）括起来的文本,var string1=“This is a string”;

（4）Typeof运算符

typeof检测变量的返回值

typeof运算符返回值如下:
- undefined : 变量被声明后 , 但未被赋值
- string : 用单引号或双引号来声明的字符串
- boolean : true 或 false
- number : 整数或浮点数
- object : javaScript中的对象 , 数组 , 或null

    
       Title

在这里插入图片描述

（5）String对象

属性
- 字符串对象.length

方法
- 字符串对象.方法名()

var str="this is JavaScript";var strLength=str.length; //长度是18

方法名称	说明
charAt(index)	返回在指定位置的字符
indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，[index1,index2)
split(str)	将字符串分割为字符串数组

    
       Title

在这里插入图片描述

（6）数组

创建数组

为数组元素赋值

访问数组->数组名[下标]

var fruit= new Array("apple","orange"," peach","banana");

var fruit = new Array(4);fruit [0] = " apple ";fruit [1] = " orange ";fruit [2] = " peach ";fruit [3] = " banana ";

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
方法	sort()	对数组排序
方法	push()	向数组末尾添加一个或更多元素，并返回新的长度

案例

    
       Title

在这里插入图片描述

（7）运算符号

===和!== ：如果类型相同，则是===，若不同，其结果就是不等!==。

（8）for/in循环

    
       Title

在这里插入图片描述

（9）函数

函数的含义 : 类似于Java中的方法 , 是完成特定任务的代码语句块

使用更简单 : 不用定义属于某个类 , 直接使用

函数分类 : 系统函数和自定义函数

1.常用的系统函数

parseInt (“字符串”)
- 将字符串转换为整型数字
- 如: parseInt (“86”)将字符串“86“转换为整型值86

parseFloat(“字符串”)
- 将字符串转换为浮点型数字
- 如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45

isNaN()
- 用于检查其参数是否是非数字

2.自定义函数

定义函数

调用函数
- 函数调用一般和表单元素的事件一起使用 , 调用格式 :

事件名＝ "函数名( )" ;

案例：

    
       Title

在这里插入图片描述

点第一个按钮：

点第二个按钮：

点第三个按钮：

（五）应用

（1）弹窗提示

alert()
- alert("提示信息");

prompt()
- prompt(“提示信息”, “输入框的默认信息”);
  1. prompt("请输入你喜欢的颜色","红色");
  2. prompt("请输入你的用户名","");

（2）事件

名称	说明
onload	一个页面或一幅图像完成加载
onlick	鼠标单击某个对象
onmouseover	鼠标指导移到某元素上
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件

页面关闭时触发事件

用户点击按钮执行动作

等等…

二、JavaScript操作BOM对象

（一）BOM模型

BOM : 浏览器对象模型 ( Browser Object Model )
- BOM提供了独立于内容的 , 可以与浏览器窗口进行互动的对象结构

BOM可实现功能
- 弹出新的浏览器窗口
- 移动 , 关闭浏览器窗口以及调整窗口的大小
- 页面的前进 , 后退
- …

（二）Window对象

（1）Window对象的常用属性

常用的属性

语法

window.属性名= "属性值"

案例：

    
       Title

（2）Window对象的常用方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

1.confirm()：

显示一个带有提示信息、确定和取消按钮的对话框

confirm()与alert ()、 prompt()区别
- alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
- prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
- confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定
  ”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

    
       Title

在这里插入图片描述

点击确定：

点击取消：

2.open():

语法：window.open("弹出窗口的url","窗口名称","窗口特征”)

窗口特征：

属性名称	说明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes\|no\|1\|0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条。黙认是yes
location=yes\|no\|1\|0	是否显示地址地段。黙认是yes
status=yes\| no\|1\|0	是否添加状态栏。黙认是yes
menubar=yes\|no\|1\|0	是否显示菜单栏。黙认是yes
resizable=yes\|no\|1\|0	窗口是否可调节尺寸。黙认是yes
titlebar=yes\|no\|1\|0	是否显示标题栏。黙认是yes
fullscreen=yes\|no\|1\|0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

（3）history对象

名称	说明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

history.back()等价于history.go(-1) //浏览器的后退

history.forward等价于history.go(1) //浏览器的前进

    
       Title

在这里插入图片描述

然而点击后无法后退，因为以前的历史列表中没有该URL

（4）Location对象

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

    
       Title

在这里插入图片描述

（5）Document对象

常用属性

名称	说明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

常用方法

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

动态改变层，标签中的内容

访问相同name的元素
- document.getElementById("book").innerHTML="替换后的文字";

Title

在这里插入图片描述

（6）Date对象

语法

var 日期对象=new Date(参数)

方法	说明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

定时函数
- setTimeout("调用的函数",等待的毫秒数)
  - 例：var myTime＝setTimeout("disptime() ", 1000 );//1秒（1000毫秒）之后执行disptime（）一次
- setInterval("调用的函数",间隔的毫秒数)
  - 例：var myTime＝setInterval("disptime() ", 1000 );//每隔1秒（1000毫秒）之后执行disptime（）一次

清除函数
- clearTimeout()
  - clearTimeout(setTimeOut()返回的ID值)
- clearInterval()
  - clearInterval(setInterval()返回的ID值)
    - var myTime＝setInterval("disptime() ", 1000 ); clearInterval(myTime)；

    
       Title

在这里插入图片描述

（7）Math对象

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

    
       Title
   
        颜色 :

在这里插入图片描述

三、JavaScript操作DOM对象

（一）DOM概述

DOM : Document Object Model ( 文档对象模型 )

（二）节点

（1）节点和节点的关系

在这里插入图片描述

（2）节点属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

（3）element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

oNext = oParent.nextElementSibling || oParent.nextSibling

oPre = oParent.previousElementSibling || oParent.previousSibling

oFirst = oParent. firstElementChild || oParent.firstChild

oLast = oParent.lastElementChild || oParent.lastChild

（4）访问节点

使用getElement系列方法访问指定节点
- getElementById()
- getElementsByName()
- getElementsByTagName()

根据层次关系访问节点

运行：

（5）节点信息

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

    
       Title

在这里插入图片描述

（6）操作节点

操作节点的属性

创建和插入节点

删除和替换节点

操作节点样式

获取元素的样式

1.操作节点的属性

getAttribute(“属性名”)

setAttribute(“属性名”,“属性值”)

    
       Title哈哈哈哈哈哈

在这里插入图片描述

2.创建和插入节点

名称	描述
createElement( tagName)	创建一个标签名为tagName的新元素节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

Title

单击按钮创建button元素

在这里插入图片描述

3.删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

var delNode=document.getElementById("first");delNode.parentNode.removeChild(delNode);var oldNode=document.getElementById("second"); var newNode=document.createElement("img"); newNode.setAttribute("src","images/f03.jpg"); oldNode.parentNode.replaceChild(newNode,oldNode);

Title

苹果

香蕉

西瓜

点击按钮删除列表中的首个项目。

在这里插入图片描述

4.操作节点样式

1）style属性

语法

HTML元素.style.样式属性＝"值"

document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";

名称	描述
onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

2）className属性

语法

HTML元素.className="样式名称"

function over(){ document.getElementById("cart").className="cartOver"; document.getElementById("cartList").className="cartListOver";}function out(){ document.getElementById("cart").className="cartOut"; document.getElementById("cartList").className="cartListOut";}

5.获取元素的样式

语法

HTML元素.style.样式属性;

不支持IE浏览器

document.defaultView.getComputedStyle(元素,null).属性;

兼容IE浏览器

HTML元素. currentStyle.样式属性;

（三）HTML中元素属性

属性	描述
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

属性应用

标准浏览器

document.documentElement.scrollTop; document.documentElement.scrollLeft;

Chrome

document.body.scrollTop; document.body.scrollLeft;var sTop=document.documentElement.scrollTop||document.body.scrollTop;

转载地址：http://okwm.baihongyu.com/

你可能感兴趣的文章