JS案例
一window对象学习
BOM浏览器对象模型：是规范浏览器对js语言的支持(js调用浏览器本身的功能)。
BOM的具体实现是window对象
1.window对象使用学习：
1、window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写。
2、框体方法
alert:警告框 提示一个警告信息，没有返回
confirm:确认框 提示用户选择一项操作（确定/取消）
点击确定 返回true 点击取消 返回false
prompt:提示框， 提示用某个信息的录入或者说收集
点击确定，返回当前用书录入的数据，默认返回空字符串
点击取消,返回null
3、定时和间隔执行方法
setTimeout:指定的时间后执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒。
返回值：返回当前定时器的id
setInterval:每间隔指定的时间执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒。
返回值：返回当前间隔器的id
clearTimeout:用来停止指定的定时器
参数：定时器的id
clearInterval:用来停止指定的间隔器
参数：间隔器的id
<!--声明js代码域-->
<script type="text/javascript">
//框体方法学习：
//警告框
function testAlert(){
var a=window.alert("我是警告框");
alert(a);
}
//确认框
function testConfirm(){
var flag=window.confirm("你确定要删除吗?");
alert(flag);
}
//提示框
function testPrompt(){
var str=window.prompt("请输入昵称：");
alert(str);
}
/*----------------------------------------------------------------------------------------------*/
var idi;
var ids
//定时执行
function testSetTimeout(){
idi=window.setTimeout(function(){
alert("我是定时执行");
},3000);
}
//间隔执行
function testSetInterval(){
ids=window.setInterval(function(){
alert("我是间隔执行");
},2000);
}
//停止当前的定时方法
function testClearTimeout(){
window.clearTimeout(idi);
}
function testClearInterval(){
window.clearInterval(ids);
}
</script>
</head>
<body>
<h3>window对象学习</h3>
<hr />
<input type="button" name="" id="" value="测试警告框" onclick="testAlert();" />
<input type="button" name="" id="" value="测试确认框" onclick="testConfirm()" />
<input type="button" name="" id="" value="测试提示框" onclick="testPrompt()"/>
<hr />
<input type="button" name="" id="" value="测试setTimeout--定时执行" onclick="testSetTimeout()"/>
<input type="button" name="" id="" value="测试setInterval--间隔执行" onclick="testSetInterval()"/>
<input type="button" name="" id="" value="测试clearTimeout--停止指定的定时器" onclick="testClearTimeout()" />
<input type="button" name="" id="" value="测试clearInterval--停止指定的间隔器" onclick="testClearInterval()" />
</body>
</html>
2.window对象常见的属性
2.1打开关闭页面
[window.open ('page.html', 'newwindow', 'height=100, width=400,
top=0,left=0, toolbar=no, menubar=no, scrollbars=no,
resizable=no,location=no, status=no') ]{.underline}
image.png
1)、子窗口方法
window.open('子页面的资源(相对路径)','打卡方式','配置');
示例：window.open('son.html','newwindow','height=400, width=600,
top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes,
resizable=yes,location=no, status=yes');
注意:
关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。
2)、子页面调用父页面的函数
window.opener.父页面的函数
2.2js的window对象的常用属性
1)地址栏属性:location
window.location.href="新的资源路径（相对路径/URL）"
window.location.reload()重新加载页面资源
2)历史记录属性
window.history.forward() 页面资源前进，历史记录的前进。
window.history.back() 页面资源后退，历史记录后退
window.history.go(index) 跳转到指定的历史记录资源
注意window.history.go(0)相当于刷新。
3)屏幕属性
window.srceen.width;//获取屏幕的宽度分辨率
window.screen.height;//获取屏幕的高度分辨率
4)浏览器配置属性
5)主体面板属性(document)
<!--声明js代码域-->
<script type="text/javascript">
//1、子页面方法
function testOpen(){
window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
}
//2、子页面调用父页面的函数
function testFather(){
alert("父页面");
}
/*----------------------------------------------------------------------------*/
//1、地址栏属性学习--location
function testLocation(){
window.location.href="http://www.baidu.com";
}
function testLocation2(){
window.location.reload();
}
//2、历史记录属性
function testHistory(){
window.history.forward();
}
function testHistory2(){
window.history.go(0);
}
//3、屏幕属性学习
function testScreen(){
var x=window.screen.width;
var y=window.screen.height;
alert(x+":"+y)
}
//4、浏览器配置属性
function testNa(){
alert(window.navigator.userAgent);
}
</script>
</head>
<body>
<h3>js的window对象学习2</h3>
<hr />
<input type="button" name="" id="" value="测试open" onclick="testOpen()"/>
<hr />
<input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()" />
<input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()" />
<br /><br />
<input type="button" name="" id="" value="测试历史记录属性--history-前进" onclick="testHistory();"/>
<input type="button" name="" id="" value="测试历史记录属性--history-go" onclick="testHistory2();"/>
<br /><br />
<input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()" />
<input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()" />
</body>
</html>
二.模拟淘宝案例
image.png
<html>
<head>
<title>模拟淘宝网</title>
<meta charset="UTF-8"/>
<!--声明js代码域-->
<script type="text/javascript">
//创建函数进行照片的联动和样式设置
function operInImg(img,src){
//设置图片的样式
img.style.border="solid 1px";
//设置大图的img路径
//获取大图对象
var big=document.getElementById("big");
//设置路径
big.src="img/"+src;
}
function operOutImg(img){
img.style.border="";
}
</script>
<!--声明css代码域-->
<style type="text/css">
/*设置div的样式*/
#showdiv{
width: 370px;
height: 400px;
border: solid 1px;
border-radius: 20px;
}
/*设置table的样式*/
#ta{
margin: auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="showdiv">
<table width="349px" id="ta">
<tr height="300px">
<td colspan="5"><img src="img/show1_big.jpg" id="big"/></td>
</tr>
<tr height="60px">
<td><img src="img/show1.jpg" onmouseover="operInImg(this,'show1_big.jpg')" onmouseout="operOutImg(this)"/></td>
<td><img src="img/show2.jpg" onmouseover="operInImg(this,'show2_big.jpg')" onmouseout="operOutImg(this)"/></td>
<td><img src="img/show3.jpg" onmouseover="operInImg(this,'show3_big.jpg')" onmouseout="operOutImg(this)"/></td>
<td><img src="img/show4.jpg" onmouseover="operInImg(this,'show4_big.jpg')" onmouseout="operOutImg(this)"/></td>
<td><img src="img/show5.jpg" onmouseover="operInImg(this,'show5_big.jpg')" onmouseout="operOutImg(this)"/></td>
</tr>
</table>
</div>
</body>
</html>
三.操作表格(js)-删除功能-修改功能-删除行-复制行-添加行-隔行变色
image.png
image.png
<html>
<head>
<title>操作表格</title>
<meta charset="UTF-8"/>
<!--
js操作表格学习:
1、删除行：
行对象.rowIndex//返回行对象的角标
表格对象.deleteRow(要删除的行对象的角标);
2、修改单元内容
单元格对象.innerHTML="新的内容";
行对象.cells//返回当前行所有的单元格对象的数组
-->
<!--声明css-->
<style type="text/css">
body{
text-align: center;
}
/*设置表格居中*/
#ta{
margin: auto;
}
/*设置表格的行样式*/
#ta tr{
height: 35px;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//声明删除行
function delRow(btn){
//获取table对象
var ta=document.getElementById("ta");
//获取要删除的行对象
var tr=btn.parentNode.parentNode;
//删除行
ta.deleteRow(tr.rowIndex);
}
//修改功能
function updateRow(btn){
//获取单元格对象
//获取行对象
var tr=btn.parentNode.parentNode;
//获取行对象
var cell=tr.cells[3];
//判断cell.innerHTML的值是否是数字
if(!isNaN(Number(cell.innerHTML))){
//修改单元格内容
cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='updateRow2(this)'/>";
}
}
function updateRow2(inp){
//获取单元格对象
var cell=inp.parentNode;
//实现保存
cell.innerHTML=inp.value;
}
/*---------------------------------------------------------------------------------*/
//选择删除
function chooseDel(){
//获取表格对象
var ta=document.getElementById("ta");
//获取要删除的行号
var chks=document.getElementsByName("chk");
for(var i=1;i<chks.length;i++){
if(chks[i].checked){
//删除行
ta.deleteRow(i);
i--;
}
}
}
//添加行
function addRow(){
//获取table表格对象
var ta=document.getElementById("ta");
//添加行
var tr=ta.insertRow(1);
//添加单元格
var cell0=tr.insertCell(0);
cell0.innerHTML="<input type='checkbox' name='chk'/>";
var cell1=tr.insertCell(1);
cell1.innerHTML=document.getElementById("uname").value;
var cell2=tr.insertCell(2);
cell2.innerHTML="李思";
var cell3=tr.insertCell(3);
cell3.innerHTML="49.88";
var cell4=tr.insertCell(4);
cell4.innerHTML="5";
var cell5=tr.insertCell(5);
cell5.style.textAlign="center";
cell5.innerHTML="<input type='button' value='修改数量' onclick='updateRow(this)'/><input type='button' value='删除' onclick='delRow(this)'/>";
}
//复制行
function copyRow(){
//获取表格对象
var ta=document.getElementById("ta");
//获取选择行对象
var chks=document.getElementsByName("chk")
for(var i=0;i<chks.length;i++){
if(chks[i].checked){
var tr=ta.insertRow(ta.rows.length);
//复制行
tr.innerHTML=ta.rows[i].innerHTML;
}
}
}
//全选
function chooseAll(){
var ck=document.getElementById("ck");
var chks=document.getElementsByName("chk");
if(ck.checked){
for(var i=0;i<chks.length;i++){
chks[i].checked=true;
}
}else{
for(var i=0;i<chks.length;i++){
chks[i].checked=false;
}
}
}
//隔行变色
function operCss(){
//获取所有的行对象数组
var trs=document.getElementById("ta").rows;
//遍历
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="green";
}
}
}
</script>
</head>
<body>
<h3 align="center">操作表格学习</h3>
<input type="button" name="" id="" value="删除" onclick="chooseDel()"/>
<input type="button" name="" id="" value="添加行" onclick="addRow()"/>
<input type="button" name="" id="" value="复制行" onclick="copyRow()"/>
<input type="button" name="" id="" value="隔行变色" onclick="operCss()"/>
书名：<input type="text" name="uname" id="uname" value="" />
<hr />
<table border="1px" id="ta">
<tr style="text-align: center;font-weight: bold;">
<td width="50px" align="left"><input type="checkbox" name="chk" value="0" id="ck" onclick="chooseAll()"/></td>
<td width="200px">书名</td>
<td width="100px">作者</td>
<td width="100px">价格</td>
<td width="200px">购买数量</td>
<td width="200px" >操作</td>
</tr>
<tr id="t1">
<td><input type="checkbox" name="chk" id="chk" value="0" /></td>
<td>java从入门到放弃</td>
<td>wollo</td>
<td>43.50</td>
<td>3</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="1" /></td>
<td>javaScript入门</td>
<td>高淇</td>
<td>77.60</td>
<td>2</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="2" /></td>
<td>Spring入门</td>
<td>卢俊杰</td>
<td>78.88</td>
<td>3</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
</table>
</body>
</html>
