JavaScript 对象
一. 基础对象
1.Array对象:用于定义数组
定义方法:① var 变量名 = new Array(元素列表); ② var 变量名 = [元素列表];
访问:①arr[索引] = 值; 如arr[0]=1;
特点:数组相当于Java集合,变长变类型
常用方法:push:添加方法 splice:删除方法
2.String对象
定义:①var 变量名 = new String(s);//方式一 ②var 变量名 = s;//方式二
常用方法:①trim():取出字符串前后两端的空白字符
②charAt():返回在指定位置的字符
③indexOf():检索字符串
3.自定义对象
格式:var 对象名称 = {
属性名称1: 属性值1
属性名称2: 属性值2
...
函数名称:function(形参列表){}
...};
二.BOM对象 Browser对象(浏览器对象)
1.Winddow:浏览器窗口对象
获取:直接使用Window,其中window.可以省略 window.alert("abc")
属性:获取其他BOM对象
方法: ①alert() 显示带有一段消息和一个确认按钮的警告框
②confirm() 显示带有一段消息和确认按钮以及返回按钮的对话框
③setInterval() 按照指定的周期(毫秒计)来调用函数或计算表达式
④setTimeout() 在指定的毫秒数后调用函数或计算表达式
2.Histiory:历史记录
获取:使用Window.history获取,其中window.可以省略
3.Location:地址栏对象
属性:href:设置或返回完整的URL
三.DOM 文档对象模型 将标记语言的各个部分封装为对象
JavaScript能通过DOM改变HTML
W3C DOM标准分为三个部分:核心DOM XML DOM HTML DOM
①核心DOM:Document Element Attribute Text Comment
②针对XML文档的标准模型
③HTML DOM:针对HTML文档的标准模型
1.获取Element(元素对象)
获取:使用Document对象的方法获取
根据(id,标签名称,name属性值,class属性值),返回Element对象或对象数组
1.getElementByid 2.getElementByTagName
3.getElementByName 4.getElementByClassName
2.HTML Element对象的使用
通用方法:element.style:设置或返元素的style属性 element.InnerHTML:设置或返回元素的内容
使用方法:JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)
四.事件监听
事件:html事件是发生在html元素上的事情,如点击,鼠标移动到元素上,按键盘
事件监听:JavaScript可以在事件被侦测到的时候执行代码
1.事件绑定
①通过HTML标签中的事件属性绑定
②通过DOM元素属性绑定(推荐)
2.常见事件
onfocus:获得焦点 onblur:失去焦点 onclick:鼠标点击
onload:某个页面或图像被完成加载 onsubmit:表单提交时触发 onkeydowm:某个键盘的键被按下
onmouseover:鼠标移到元素上 onmouseout:鼠标从某个元素移开
五.表单验证
1.当输入框失去焦点时,验证输入内容是否符合要求
(1)获取表单输入框
(2)绑定 onblur事件
(3)获取输入内容
(4)判断是否符合规则
(1)
2.当点击注册按钮时,判断所有输入框的内容是否都符合要求,如果不符合则阻止表单提交、
(1)获取表单对象
(2)为表单对象绑定onsubmit
(3)判断所有输入框是否都符合规则,都符合则返回true,如果有一项不符合,则返回 false
六.正则表达式
定义:1.直接量:不要加引号
var reg = /^\w{6,12}$/;
2.创建RegExp对象
方法:test(str):判断指定字符是否返回规则,返回true或者false
语法:^:表示开始 $:表示结束 []:代表某个范围内的单个字符
.:代表任意单个字符,除了换行和结束符 \w:代表单词字符:数字、字母、下划线(_)
\d:代表数字字符
量词:
+:至少一个 var reg = /^\w$/;
*:零个或多个 ?:零个或一个 {x}:x个 {m,}:至少m个
{m,n}:至少m个,至多n个
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现