JS 03
曹超
元素对象 了解
select 对象 了解
属性:
options : 获取下拉选框中所有选项 (option数组)
selectedIndex: 当前被选中的选项下标
函数:
add(option) : 追加一个选项
remove(index): 删除指定索引的选项
事件:
onchange : 当选项被改变时, 触发 !
option 对象 了解
创建对象:
var opt = new Option(文本内容,value属性值);
常用属性:
- index : 当前选项在选框中的下标
- text : 文本内容属性 (与innerHTML一致)
- value : 提交服务器的数据值
- selected: boolean类型, true表示当前选项被选中
table对象(table标签对象) 了解
属性:
- rows : 获取表格中所有的行对象(tableRow)
函数:
- insertRow(): 追加一行, 并返回tableRow对象
- insertRow(index): 在指定索引的位置, 插入一行, 并返回tableRow对象
- deleteRow(index): 从指定索引的位置, 删除一行
tableRow 对象(tr标签对象) 了解
属性:
- cells : 获取当前行中所有的列对象(tableCell)
- rowIndex: 当前行在表格中的索引值;
函数:
- insertCell() : 追加一列, 并返回tableCell对象
- insertCell(index): 在指定索引的位置, 插入一列, 并返回tableCell对象
- deleteCell(index): 从指定索引的位置, 删除一列
tableCell 对象(td标签对象) 了解
属性:
- cellIndex : 获取列在当前行中的下标
- colSpan : 获取/设置 td垂直占用单元格的数量
- rowSpan : 获取/设置 td横向占用单元格的数量
浏览器对象
打开新窗口 了解
格式:
var 新窗口 = window.open(url,[name],[config],[specs]);
参数:
1. url : 必须传递的参数, 表示打开的新窗口加载的内容地址,可以是本地相对地址,也可以是网络地址 !
2. name: 窗口的名称, 唯一标识! 相同name的窗口,无法打开两个 !
3. config: 配置对象,字符串类型参数, 包含多个键值对, 键与值之间使用等号连接, 多个键值对之间使用逗号分隔!
常用配置:
- height : 窗口高度 px;
- width : 窗口宽度 px;
- left : 新窗口距离屏幕左边框的距离!
- top : 新窗口距离屏幕上边框的距离!
4. specs : 是否允许加载历史文件
关闭窗口 了解
window.close();
案例:
var height=153;
var width=195;
for(x=0;x<3;x++){
for(i=0;i<5;i++){
var xtop=i*height;
for(j=0;j<7;j++){
var xleft=j*width;
window.open("http://itdage.cn",x+""+i+""+j,"height=153px,width=195px,left="+xleft+"px,top="+xtop+"px",true);
}
}
}
定时器 ***
一次性定时器 ****
格式:
setTimeout("执行语句",毫秒时间);
案例:
定时弹窗
function dialog(){
alert("高清无码武术教学视频已经加载完毕...");
}
alert("请稍等, 正在加载...");
setTimeout("dialog()",5000);
周期性定时器 *****
- 开启周期定时器
格式:
var obj = setInterval("执行语句",毫秒时间);
- 关闭周期定时器
格式:
clearInterval(周期定时器对象);
案例:
<script>
var count = 10;
var interval ;
function init(){
interval = setInterval("x()",1000);
}
function x(){
if(count==0){
window.close();
}
count--;
document.getElementById("h3").innerHTML = "因各种原因,本网站不适宜长时间浏览,将在"
+count+"秒后关闭";
}
</script>
</head>
<body onload="init()">
<h3 id="h3">因各种原因,本网站不适宜长时间浏览,将在10秒后关闭</h3>
获取屏幕信息 screen 了解
属性:
- width : 获取屏幕宽度
- height : 获取屏幕高度
- availWidth: 获取屏幕可用宽度
- availHeight:获取屏幕可用宽度
windows任务栏: win7|10 40px , windowsxp 30px
获取历史信息 history 了解
函数:
- back() : 后退到上一页
- forward(): 前进到下一页
- go(数字) : 传入正数表示前进的页数, 传入负数表示后退的页数 !
浏览器地址对象 location ***
属性:
- href : 用来获取以及设置 地址栏中的网址
函数:
- reload(); 刷新网页
- replace(url) : 替换当前网页内容为指定URL下的内容 ! 替换不等于跳转 , 无法通过后退回到替换前的页面!
- assign(url) : 跳转到指定url , 与location.href=url 效果一直
--------------------------------------------------
location对象, 重要在后端学习时,
我们可以通过js进行运算,
然后将运算的结果 拼接为一个带有参数的url
并进行跳转 !
事件 熟悉
事件: 指的是在HTML元素状态改变, 用户操作鼠标, 操作键盘时触发的动作 !
分类:
状态事件
鼠标事件
键盘事件
事件对象 event 熟悉
事件在触发后, 会产生一个事件对象, 此对象可以直接操作!
- 常用属性:
- clientX : 触发鼠标事件时 , 鼠标在网页中的横向坐标x点的位置
- clientY : 触发鼠标事件时 , 鼠标在网页中的垂直坐标Y点的位置
- keyCode : 触发键盘事件时, 键盘代码!
键盘事件 了解
- 键盘按下
onkeydown
- 键盘弹起
onkeyup
案例:
window.onkeydown = function(){
console.info("键盘被按下了:"+event.keyCode);
}
window.onkeyup = function(){
console.info("键盘弹起了:"+event.keyCode);
}
事件冒泡机制 了解
html元素 在触发鼠标事件时, 会依次激活触发父元素的同类事件 !
如何停止事件冒泡:
方式1. 设置取消冒泡标签 为true
在触发事件的代码块中: event.cancelBubble = true;
方式2. 调用停止事件冒泡函数
在触发事件的代码块中: event.stopPropagation();
事件源对象 了解
指的就是最初触发事件的 元素对象 !
我们可以在事件的代码中, 获取到当前事件的源对象 !
格式:
- IE : var e = event.srcElement;
- 其他 : var e = event.target;
兼容:
var e = event.target;
if(e=="undefined"){
e = event.srcElement;
}
计算器案例:
<style>
button{
width:50px;
height:30px;
margin: 1px;
}
#content{
display:inline-block;
border:1px solid #999;
padding: 5px;
}
#header{
border:1px solid #999;
padding: 5px;
height:20px;
}
</style>
<script>
function x(){
//1. 获取到用户点击的内容
var e = event.target;
if(e=="undefined"){
e = event.srcElement;
}
if(e.nodeName=="BUTTON"){
var text = e.innerHTML;
//2. 根据点击的内容进行分类操作
var header = document.getElementById("header");
switch(text){
case "c":
//清空内容
header.innerHTML = "";
break;
case "=":
header.innerHTML = eval(header.innerHTML);
break;
default:
header.innerHTML += text;
}
}
}
</script>
</head>
<body >
<div id="content">
<div id="header">
</div>
<table onclick="x()">
<tr><td><button>0</button></td><td><button>=</button></td><td><button>c</button></td><td><button>+</button></td></tr>
<tr><td><button>1</button></td><td><button>2</button></td><td><button>3</button></td><td><button>-</button></td></tr>
<tr><td><button>4</button></td><td><button>5</button></td><td><button>6</button></td><td><button>*</button></td></tr>
<tr><td><button>7</button></td><td><button>8</button></td><td><button>9</button></td><td><button>/</button></td></tr>
</table>
</div>
</body>
类似资料：