###js 03
---
###DOM中的其他对象
###Window对话框
1. 提示对话框
alert(弹出的文本)
2. 确认对话框
confirm(str) : 点击确定返回true 点击取消返回false
3 输入对话框
prompt(参数1,参数2)
参数1. 是提示信息
参数2. 是输入框的初始值
点击确定返回输入内容, 点击取消返回null
###打开新窗口
var newWindow = window.open(url,name,specs,replace)
参数1. 要打开窗口的url地址
参数2. 窗口的名称
参数4. (true)加载历史文件 还是 (false)新条目
参数3. 窗口的规格样式列表
参数三 是逗号分割的列表形式
常用参数:
高度: height=px;
宽度: width=px;
x位置: left=px;
y位置: top=px
boolean类型参数:
location=yes/no/1/0 :新打开的窗口, 是否是显示地址的
menubar=yes/no/1/0 :是否显示菜单栏
resizable=yes/no/1/0 :是否可调整窗口大小
scrollbars=yes/no/1/0 :是否显示滚动条
titlebar=yes/no/1/0 :是否显示标题栏
toolbar=yes/no/1/0 :是否显示工具栏
###关闭窗口
通过窗口对象, 可以调用.close()
window.close();
###定时器
周期性:
开启周期性定时器:
setInterval(参数1,参数2);
参数1. 要执行的JS语句 (一般我们在这里输入方法名)
参数2. 时间周期 毫秒单位
return : 返回执行的周期性定时器对象
关闭周期性定时器:
clearInterval(定时器对象)
一次性定时器
setTimeout(执行的语句 , 延迟执行的时间毫秒)
###屏幕信息
screen : 常用于获取屏幕的分辨力 和 可用宽高
1. x = screen.width :屏幕宽度
2. y = screen.height :屏幕高度
y>x
1. screen.availWidth :屏幕可用宽度
2. screen.availHeight :屏幕可用高度
window底部的任务栏 :
xp: 占用30px
win7:占用40px
###浏览器请求历史 -了解
history
函数:
back() :后退
forward(): 前进一页
go(number): 指定前进和后退的页数
例如:
go(-1) : 后退1个网页
go(-5) : 后退5个网页
go(1) : 前进1个网页
go(5) : 前进5个网页
###地址对象location
location
属性: href: 表示当前浏览器加载的网页地址
函数:
replace(网址): 切换地址
reload(): 刷新网页
我们一般用来在JS中进行网页地址的跳转:
方式1. location.href="地址";
方式2. location.replace("地址"); 区别:替换不等于跳转
###居中
text-align: center;
在元素容器中 , 指定自己的文本内容的位置
###事件
事件: 指HTML对象 在状态发生改变, 或者用户操作鼠标键盘时触发的动作
- 鼠标事件 onclick
- 键盘事件
- 状态改变事件 onload
#####键盘事件
键盘可以连续多次按下而不弹起
1. 键盘的按下(当按下不松开时 . 会连续触发)
onkeydown
2. 键盘的弹起(只有当键盘弹起时才会触发)
onkeyup
给你的网页添加按键的监听:
window.onkeydown = function(){
//当键盘按下时 自动触发
//如何区分用户按下的按键
var code = window.event.keyCode;
console.info("您按下的是:",code);
}
###事件冒泡机制
当处于HTML模型底层的对象事件发生时, 会一次激活上层对象的同类事件 !
取消事件冒泡
1. 设置取消冒泡标记为true
event.cancelBubble = true;
2. 停止冒泡
event.stopPropagation();
###获取事件源
IE操作: elementObject = event.srcElement
其他浏览器: elementObject = event.target;
支持多浏览器的操作:
elementObject = event.srcElement||e.target;
###面向对象
JS中的对象: 用于封装属性和函数的一种特殊数据类型 !
定义对象:
方式1. 直接创建对象
案例:
var person = new Object();
person.age = 18;
person.name="sblong";
person.sex="妖";
方式2. 创建对象的模版
方式3. 使用JSON格式对象
###JSON
轻量级的数据交换格式
又两大格式 互相嵌套组成
1. JSON对象
{}:表示对象
描述数据 , 使用的是键值对. 键值对使用英文冒号连接 , 多个键值对之前使用英文逗号隔开
例如描述一个人
{"name":"sblong","age":18,"sex":"妖"}
2. JSON数组
[]: 表示数组
描述数据 使用的是键值对 , 特殊的是它的键是下标 ! 多个值之间使用逗号隔开
例如描述一组人名
["mblong","sblong","dblong","sblong"]
###JSON对象与JSON数组 嵌套描述事物
描述一个人
{
"name":"sblong",
"length":"5mm",
"jiyou":[
"baolin","sihan","zhaotaotao","yinlong",{
"name":"baolin电动版","age":"30"
}
]
}
###练习:
使用JSON 描述一个用户:
帐号(uname): sblong
密码(upass): 123456
编号(id): 10001
{
"uname":"sblong",
"upass":"123456",
"id":10001
}
###JS中解析JSON
创建引用:
var jsonObject = {
"uname":"sblong",
"upass":"123456",
"id":10001
}
访问JSON对象中的数据:
JSON对象.key;
访问JSON数组中的数据:
JSON数组[下标]
复杂案例:
var jo = {
"name":"sblong",
"length":"5mm",
"jiyou":[
"baolin","sihan","zhaotaotao","yinlong",{
"name":"baolin电动版","age":"30"
}
]
};
访问baolin电动版:
jo.jiyou[4].name
###解析案例:
var jo= {
"name":"sblong",
"age":18,
"sex":"不详",
"id":10001,
"tools":[
"黄瓜","藕","皮鞭","辣椒油"
],
"haojiyou":{
"name":"宝林",
"length":"-5mm"
}
};
console.info("访问JSON对象的id:"+jo.id);
console.info("好基友:"+jo.haojiyou.name);
console.info("工具:",jo.tools[0],jo.tools[1],jo.tools[2],jo.tools[3]);
###Ajax知识点时 会学习Java中解析和快捷组装JSON数据
###在Spring框架也会讲解JSON
---
###DOM中的其他对象
###Window对话框
1. 提示对话框
alert(弹出的文本)
2. 确认对话框
confirm(str) : 点击确定返回true 点击取消返回false
3 输入对话框
prompt(参数1,参数2)
参数1. 是提示信息
参数2. 是输入框的初始值
点击确定返回输入内容, 点击取消返回null
###打开新窗口
var newWindow = window.open(url,name,specs,replace)
参数1. 要打开窗口的url地址
参数2. 窗口的名称
参数4. (true)加载历史文件 还是 (false)新条目
参数3. 窗口的规格样式列表
参数三 是逗号分割的列表形式
常用参数:
高度: height=px;
宽度: width=px;
x位置: left=px;
y位置: top=px
boolean类型参数:
location=yes/no/1/0 :新打开的窗口, 是否是显示地址的
menubar=yes/no/1/0 :是否显示菜单栏
resizable=yes/no/1/0 :是否可调整窗口大小
scrollbars=yes/no/1/0 :是否显示滚动条
titlebar=yes/no/1/0 :是否显示标题栏
toolbar=yes/no/1/0 :是否显示工具栏
###关闭窗口
通过窗口对象, 可以调用.close()
window.close();
###定时器
周期性:
开启周期性定时器:
setInterval(参数1,参数2);
参数1. 要执行的JS语句 (一般我们在这里输入方法名)
参数2. 时间周期 毫秒单位
return : 返回执行的周期性定时器对象
关闭周期性定时器:
clearInterval(定时器对象)
一次性定时器
setTimeout(执行的语句 , 延迟执行的时间毫秒)
###屏幕信息
screen : 常用于获取屏幕的分辨力 和 可用宽高
1. x = screen.width :屏幕宽度
2. y = screen.height :屏幕高度
y>x
1. screen.availWidth :屏幕可用宽度
2. screen.availHeight :屏幕可用高度
window底部的任务栏 :
xp: 占用30px
win7:占用40px
###浏览器请求历史 -了解
history
函数:
back() :后退
forward(): 前进一页
go(number): 指定前进和后退的页数
例如:
go(-1) : 后退1个网页
go(-5) : 后退5个网页
go(1) : 前进1个网页
go(5) : 前进5个网页
###地址对象location
location
属性: href: 表示当前浏览器加载的网页地址
函数:
replace(网址): 切换地址
reload(): 刷新网页
我们一般用来在JS中进行网页地址的跳转:
方式1. location.href="地址";
方式2. location.replace("地址"); 区别:替换不等于跳转
###居中
text-align: center;
在元素容器中 , 指定自己的文本内容的位置
###事件
事件: 指HTML对象 在状态发生改变, 或者用户操作鼠标键盘时触发的动作
- 鼠标事件 onclick
- 键盘事件
- 状态改变事件 onload
#####键盘事件
键盘可以连续多次按下而不弹起
1. 键盘的按下(当按下不松开时 . 会连续触发)
onkeydown
2. 键盘的弹起(只有当键盘弹起时才会触发)
onkeyup
给你的网页添加按键的监听:
window.onkeydown = function(){
//当键盘按下时 自动触发
//如何区分用户按下的按键
var code = window.event.keyCode;
console.info("您按下的是:",code);
}
###事件冒泡机制
当处于HTML模型底层的对象事件发生时, 会一次激活上层对象的同类事件 !
取消事件冒泡
1. 设置取消冒泡标记为true
event.cancelBubble = true;
2. 停止冒泡
event.stopPropagation();
###获取事件源
IE操作: elementObject = event.srcElement
其他浏览器: elementObject = event.target;
支持多浏览器的操作:
elementObject = event.srcElement||e.target;
###面向对象
JS中的对象: 用于封装属性和函数的一种特殊数据类型 !
定义对象:
方式1. 直接创建对象
案例:
var person = new Object();
person.age = 18;
person.name="sblong";
person.sex="妖";
方式2. 创建对象的模版
方式3. 使用JSON格式对象
###JSON
轻量级的数据交换格式
又两大格式 互相嵌套组成
1. JSON对象
{}:表示对象
描述数据 , 使用的是键值对. 键值对使用英文冒号连接 , 多个键值对之前使用英文逗号隔开
例如描述一个人
{"name":"sblong","age":18,"sex":"妖"}
2. JSON数组
[]: 表示数组
描述数据 使用的是键值对 , 特殊的是它的键是下标 ! 多个值之间使用逗号隔开
例如描述一组人名
["mblong","sblong","dblong","sblong"]
###JSON对象与JSON数组 嵌套描述事物
描述一个人
{
"name":"sblong",
"length":"5mm",
"jiyou":[
"baolin","sihan","zhaotaotao","yinlong",{
"name":"baolin电动版","age":"30"
}
]
}
###练习:
使用JSON 描述一个用户:
帐号(uname): sblong
密码(upass): 123456
编号(id): 10001
{
"uname":"sblong",
"upass":"123456",
"id":10001
}
###JS中解析JSON
创建引用:
var jsonObject = {
"uname":"sblong",
"upass":"123456",
"id":10001
}
访问JSON对象中的数据:
JSON对象.key;
访问JSON数组中的数据:
JSON数组[下标]
复杂案例:
var jo = {
"name":"sblong",
"length":"5mm",
"jiyou":[
"baolin","sihan","zhaotaotao","yinlong",{
"name":"baolin电动版","age":"30"
}
]
};
访问baolin电动版:
jo.jiyou[4].name
###解析案例:
var jo= {
"name":"sblong",
"age":18,
"sex":"不详",
"id":10001,
"tools":[
"黄瓜","藕","皮鞭","辣椒油"
],
"haojiyou":{
"name":"宝林",
"length":"-5mm"
}
};
console.info("访问JSON对象的id:"+jo.id);
console.info("好基友:"+jo.haojiyou.name);
console.info("工具:",jo.tools[0],jo.tools[1],jo.tools[2],jo.tools[3]);
###Ajax知识点时 会学习Java中解析和快捷组装JSON数据
###在Spring框架也会讲解JSON