JavaScript
1|0一、JavaScript
表单验证-减轻服务器端压力
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
解释性语言,边执行边解释
1|11. 组成
ECMAScript(ES)
DOM
BOM
1|22. 执行原理
1|33. 引入方式
1|44.代码调试方式
2|0二、ECMAScript
2|11. 变量
变量声明使用var关键字
typeof()查看变量的数据类型
1.1 let 和 var 的区别
2|22 .数据类型
object
对象类型
number
number数值类型
boolean
true和false
string
string类型:单引号或者双引号
undefined
undefined 一个变量没有定义初始值,那么它的值就是undefined,未定义的意思。
null
null一个变量的初始值为null,有值,但是值为null
NaN
不是一个数字
String属性
字符串对象.length
String方法
方法名称 | 说明 |
---|---|
charAt(index) | 返回在指定位置的字符 |
indexOf(str,index) | 查找某个指定的字符串在字符串中首次出现的位置 |
substring(index1,index2) | 返回位于指定索引 index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符 |
split(str) | 将字符串分割为字符串数组 |
2|33. 数组
属性方法
类别 | 名称 | 描述 |
---|---|---|
属性 | length | 设置或返回数组中元素的数目 |
方法 | join() | 把数组的所有元素放入一个字符串,通过一个的分隔符进行分割 |
sort() | 对数组排序 | |
push() | 向数组末尾添加一个或者更多元素,并返回新的长度 | |
shift() | 删除并返回数组的第一个元素 | |
unshift() | 向数组的开头添加一个或多个元素,并返回新的长度 | |
pop() | 删除并返回数组的最后一个元素 | |
splice(x,y) | 删除元素,并向数组添加新元素;x开始 删除的下标,y删除的个数 | |
splice(1,0,"你好") | 在下标为1的位置添加元素“你好“ | |
toString() | 把数组转化为字符串,并返回结果 | |
reverse() | 数组反转 |
2|44. 运算符
类型 | 运算符 |
---|---|
算数运算符 | +,-,,/,%,++,-- |
赋值运算符 | =,+=,-= |
比较运算符 | >,<,>=,<=,,!=,=,!== |
逻辑运算符 | &&,||,!,^,&,| |
2|55. 逻辑控制语句
if
switch
for
while
for-in
do-while
2|66. 注释
2|77. 输入输出
alert()
prompt()
2|88. 语法规定
代码区分大小写
变量,对象和函数的名称
分号
2|99. with域的用法
2|1010. 函数
不用定义属于某个类,直接使用
函数分类:系统函数和自定义函数
10.1 常用系统函数
parselnt(“字符串”)
parseFloat(”字符串”)
eval()
isNaN()
escape()
转码
unescape()
解码
10.2 自定义函数
2|1111. 变量
11.1 全局变量
定义在script脚本中,方法之外的变量叫做全局变量,被整个页面共享。
局部变量是定义在函数之中,或者是代码块之中的变量叫做局部变量,作用在函数内部。
与java不同的地方
2|1212. 事件
名称 | 说明 |
---|---|
onload | 一个页面或一幅图像完成加载 |
onclick | 鼠标单击某个对象 |
onmouseover | 鼠标移到某个元素上 |
onmouseout | 鼠标离开 |
onmousemove | 鼠标移动事件 |
onkeydown | 某个键盘按键被按下 |
onchange | 域的内容被改变 |
onfocus | 获得焦点事件 |
onblur | 失去焦点 |
2|1313. 创建对象
3|0三、BOM对象和DOM对象
3|11. BOM对象
1.1 三种弹窗
提供了独立于内容的,可以与浏览器窗口j进行互动的对象结构
BOM可实现功能
1.2 属性
属性名称 | 说明 |
---|---|
history | 有关客户访问过的URL的信息 |
location | 有关当前URL的信息 |
1.3 方法
方法名称 | 名称 |
---|---|
prompt() | 显示可提示用户输入的对话框 |
alert() | 显示带有一个提示信息和一个确定按钮的警示框 |
confirm() | 显示一个带有提示信息确定和取消按钮的对话框 |
close() | 关闭浏览器窗口 |
open() | 打开一个新的浏览器窗口,加载给定URL所指定的文档 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或者表达式 |
1.4 open方法参数
window.open("弹出窗口的url","窗口名称","窗口特征")
3|22. history对象
2.1 属性
length
返回浏览器历史列表中的url数量
2.2 常用方法
名称 | 说明 |
---|---|
back() | 还在history对象列表中的前一个url |
forward() | 加载history对象列表中的下一个url |
go() | 加载history对象列表中的某个具体的url,负数后退,正数前进,0刷新 |
3|33. location对象
3.1 常用属性
名称 | 说明 |
---|---|
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或者返货当前URL的主机名 |
href | 设置或者返回完整的URL |
3.2 常用方法
名称 | 说明 |
---|---|
reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
3|44. Screen对象
3|55. Navigator对象
3|66. 内置对象
6.1 Date对象
var 日期对象 = new Date(参数)
参数格式:MM DD,YYYY,hh:mm:ss
6.1.1 常用方法
方法 | 说 明 |
---|---|
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日)以来的毫秒数 |
使用Date对象的方法显示当前时间的小时、分钟和秒
6.2 Math对象
6.2.1 常用方法
方法 | 说 明 | 示例 |
---|---|---|
ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25 |
floor() | 对数进行下舍入 | Math.floor(25.5);返回25Math.floor(-25.5);返回-26 |
round() | 把数四舍五入为最接近的数 | Math.round(25.5);返回26Math.round(-25.5);返回-26 |
random() | 返回0~1之间的随机数 | Math.random();例如:0.6273608814137365 |
如何实现返回的整数范围为2~99?
6.2.2 随机选择颜色
6.3 定时函数
制作的时钟特效示例中,时间为什么不改变?
由于时间在不停地走,所以应该每隔1秒调用显示时间的方法,如何解决?
setTimeout()
setInterval()
6.4 清除函数
clearTimeout()
clearInterval()
制作显示年、月、日、星期几,并且显示上午(AM)和下午(PM)的十二进制的时钟
6.5 BigNumber
6.6 arguments对象
3|77. Document对象
7.1 常用属性
名称 | 说明 |
---|---|
referrer | 返回载入当前文档的URL |
URL | 返回当前文档的URL |
7.2 Document直接获取节点
名称 | 说 明 |
---|---|
getElementById() | 返回对拥有指定id的第一个对象的引用 |
getElementsByName() | 返回带有指定名称的对象的集合 |
getElementsByClassName() | 返回带有指定类名的对象的集合 |
getElementsByTagName() | 返回带有指定标签名的对象的集合 |
write() | 向文档写文本、HTML表达式或JavaScript代码 |
7.3 Document间接获取节点
属性 | 说明 |
---|---|
.childNodes | 获取所有子节点(空白文档也算节点) |
.parentNode | 获取父节点 |
.nextSibling | 获取下一个节点,包含空白文档 |
.nextSibling.nextSibling | 获取下下一个节点,包含空白文档 |
.nextElementSibling | 获取下一个节点,不包含空白文档 |
.previousSibling | 获取上一个节点,包含空白文档 |
.previousSibling.previousSibling | 获取上上一个节点,包含空白文档 |
.previousElementSibling | 获取上一个节点,不包含空白文档 |
7.4 操作属性
7.5 操作文本
7.6 添加节点
7.6.1 操作节点样式
7.7 a链接触发javascript
7.8 控制表单提交方式
方式1:
方式2:
7.9 表单校验
7.9.1 正则表达式
7.10 获取表单值的方式
7.11 操作表格
3|88. 多选按钮
3|99. 进度条
3|1010. 级联效果
3|1111. 右键菜单
3|1212. 事件冒泡
__EOF__
作 者:YXH
出 处:https://www.cnblogs.com/YxinHaaa/p/17421736.html
关于博主:编程路上的小学生,热爱技术,喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本。
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库