JavaScript(二)--BOM编程/事件编程/DOM编程/正则表达式

BOM编程

1.BOM编程图解
这里写图片描述

2.window对象
open():在一个窗口中打开页面
参数一: 打开的页面
参数二:打开的方式。 _self: 本窗口 _blank: 新窗口(默认)
参数三: 设置窗口参数。比如窗口大小

setInterval():设置定时器(执行n次)
setTimeout():设置定时器(只执行1次)
定时器: 每隔n毫秒调用指定的任务(函数)
参数一:指定的任务(函数)
参数二:毫秒数

clearInterval():清除定时器
clearTimeout():清除定时器
清除任务
参数:需要清除的任务ID

alert():提示框
仅仅有确定按钮

confirm():确认提示框
返回值就是用户操作
true:点击了确定
false:点击了取消

propmt():输入提示框
返回值就是用户操作
true:点击了确定
false:点击了取消

注意:因为window对象使用非常频繁,所以当调用js中的window对象的方法时,可以省略对象名不写。

3.location对象
href属性: 代表的是地址栏的URL,可以获取和设置URL。URL表示统一资源定位符
reload方法: 刷新当前页面

4.history对象
forward():前进到下一页
back():后退上一页
go():跳转到某页(正整数:前进 负整数:后退) 1 -2

5.screen对象
四个属性:
availHeight和availWidth:是排除了任务栏之后的高度和宽度(可用高度和可用宽度)。
width和height:是整个屏幕的像素值(实际高度和实际宽度)。


事件编程

1.事件编程图解
这里写图片描述

2.JavaScript事件编程三要素
(1)事件源:HTML标签;
(2)事件:发生了一件什么事(单击事件,双击事件,获取焦点事件,失去焦点事件…);
(3)监听器:函数。

3.JavaScript事件分类

点击相关的:

单击事件:onclick()
双击事件:ondblclick()

焦点相关的:

聚焦:onfocus()
失去焦点:onblur()

选项相关的:

改变选项:onchange()

鼠标相关的:

鼠标经过:onmouseover()
鼠标移除:onmouseout()

页面加载相关的(一般用在body标签中,用于网页加载完毕后还需执行什么操作进行触发):

页面加载:onload()


DOM编程

1.DOM编程图解
这里写图片描述
DOM(document Object Model)文档对象模型编程。

2.查询标签对象:
(1)通过document对象获取,document代表一个html页面。

(2)通过document对象的集合获取:
作用:获取多个或者同类的标签对象。
all:获取所有标签对象
forms:获取form标签对象
images:获取img标签对象
links:获取a标签对象
var nodeList = document.all; //返回所有标签对象数组
var nodeList = document.forms; //返回form标签对象数组
var nodeList = document.images; //返回img标签对象数组
var nodeList = document.links; //返回a标签对象数组

(3)通过关系查找标签对象:
父节点:parentNode属性
子节点:childNodes属性
第一个子节点:firstChild属性
最后一个子节点:lastChild属性
上一个兄弟节点:previousSibling属性
下一个兄弟节点:nextSibling属性

(4)通过document方法查询标签对象:
document.getElementById("id属性值"); (最常用)

注意:

1)使用该方法获取的标签一定要有id属性
2)在同一个html页面中不要出现两个同名的id

documetn.getElementsByName("name属性值"); 获取同name属性名的标签列表
注意:

使用该方法获取的标签一定要有name属性。

document.getElementsByTagName("标签名"); 获取相同标签名的标签列表

3.修改标签对象属性
常用的需要修改的属性:
innerHTML属性:修改标签体内容 。
innerHTML : 设置的标签内的html 。

value属性: 修改value属性值。 input type=”text”

src属性: 修改图片的src属性。

checked属性:修改单选或多项的默认值。


正则表达式

正则表达式的书写规则
1.创建正则表达式var 变量 = /正则规则/;

2.正则规则
[a-z]:表示匹配字母
*:0或多个元素
+:1个或多个元素
?:0或1个元素
{n,m}:大于n,小于m的个数

3.正则方法
test():用于匹配指定的字符串。true表示匹配成功;false表示匹配失败。

注意

在js的正则表达式中,只要遇到了符合规则的内容,就代表匹配成功。如果需要和Java一样完全匹配 ,需要添加边界符号。
开始标记:^
结束标记:$

猜你喜欢

转载自blog.csdn.net/yangruxi/article/details/74505447
今日推荐