目录
1）在js中使用数组：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
var arr=new Array();
arr[0]=12;
arr[2]="two";
alert(arr.length);//3
alert(arr[1]);//undifine
}
function text1(){
var arr=new Array(3);
console.log(arr.length);//长度为3
var arr1=new Array(10,20,30,40);//长度为4的数组这是存储元素
console.log(arr1.length);
}
function text2(){
var arr=new Array("A",5,2);
arr=arr.concat("ok");//数组添加
console.log(arr);
// arr.fill("abc");//填充数组，所有的数都变为abc
// console.log(arr);
var index2=arr.indexOf(2);//查找元素2所在的索引
console.log(index2);
var str=arr.join("-");//转为string类型，用-分割，如果括号里不写用,分割
console.log(str);
console.log(arr.sort());//排序
console.log(arr.pop());//删除最后一个数,成功返回删除的数
console.log(arr)//查看删除成功与否
}
function text3(){
var arr=[1,2,3,4,"a","b"];
var divEle=document.getElementById("div1");
// for(var i=0;i<arr.length;i++){//数组的第一种遍历
// divEle.innerHTML+=arr[i];
// }
for(var i in arr){//第二种遍历
divEle.innerHTML+=arr[i];
}
}
function text4(){
//isNaN()判断 是不是 不是 数字， （不是数字？）不是为true 是数字为false
var a=123;//false;
a="123abc";//parseInt 转为123
a="abc123";//Nan
var b=parseInt(a);
console.log(b);
console.log(isNaN(a));
}
function text5(){
var a="alert('abc');";//普通的字符串
eval(a);//eval函数可以把字符串当js语言执行
}
</script>
</head>
<body>
<input type="button" value="btn" onclick="text()"/>
<input type="button" value="btn2"onclick="text1()" />
<input type="button" value="concat" onclick="text2()" />
<input type="button" value="bt3" onclick="text3()" />
<input type="button" value="bt4" onclick="text4()" />
<input type="button" value="bte" onclick="text5()" />
<div id="div1"></div>
</body>
</html>
2）JS常用事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
document.getElementById("tx").value="不能改变";
}
function text1(){
document.getElementById("div1").innerHTML="放上去就会改变";
}
function text2(){
document.getElementById("div1").innerHTML="鼠标移走就会发生改变";
}
function text3(){
document.getElementById("div2").innerHTML="键盘按下";
}
function text4(){
doucument.getElementById("div2").innerHTML="键盘谈起";
}
</script>
</head>
<body>
<!--onchange改变的时候调用函数-->
<input type="text" id="tx"value="不能改变" onchange="text()" />
<!--onmouseover鼠标放上去会改变 onmouseout鼠标移走会发送改变-->
<input type="button" value="放上去div会发生改变" onmouseover="text1()"onmouseout="text2()" />
<div id="div1"></div>
<!--当键盘按下是调用函数-->
<input type="text" value="" onkeydown="text3()" />
<div id="div2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
alert("双击哦");
}
function ppd(){
var val=document.getElementById("txname").value;//获取文本框的value
var divEle=document.getElementById("div1");
if(val==""){
divEle.innerHTML="姓名不能为空!";
}else{
divEle.innerHTML="ok";
}
}
</script>
</head>
<body>
<!--双击事件-->
<input type="button" value="按钮" ondblclick="text()" />
<form action="#" method="post">
<!--聚焦函数，当焦点不在该位置，便调用该函数-->
<input type="text" id="txname"name="txname" value="" onblur="ppd()" />
<div id="div1"></div>
</form>
</body>
</html>
实战一：小图换大图（鼠标移入小图，上面显示该小图的大图）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function change(obj,url){
document.getElementById("bigimg").src=url;
obj.style.outline="1px solid red";
}
function back(obj){
document.getElementById("bigimg").src="/jsxx/img/show1_big.jpg";
obj.style.outline="none";
}
</script>
</head>
<body>
<table>
<tr >
<td colspan="5"><img src="/jsxx/img/show1_big.jpg" id="bigimg" /></td>
</tr>
<tr>
<td><img src="/jsxx/img/show1.jpg" onmouseover="change(this,'/jsxx/img/show1_big.jpg')" onmouseout="back(this)"/></td>
<td><img src="/jsxx/img/show2.jpg" onmouseover="change(this,'/jsxx/img/show2_big.jpg')" onmouseout="back(this)"/></td>
<td><img src="/jsxx/img/show3.jpg" onmouseover="change(this,'/jsxx/img/show3_big.jpg')" onmouseout="back(this)"/></td>
<td><img src="/jsxx/img/show4.jpg" onmouseover="change(this,'/jsxx/img/show4_big.jpg')" onmouseout="back(this)"/></td>
<td><img src="/jsxx/img/show5.jpg" onmouseover="change(this,'/jsxx/img/show5_big.jpg')" onmouseout="back(this)"/></td>
</tr>
</table>
</body>
</html>
实战二：一次性使用两种搜索引擎进行搜索：
特此声明:这里使用了百度浏览器的搜索引擎和 360的搜索引擎进行搜索（仅供使用学习）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
iframe{
width:48%;height:600px;
}
</style>
<script>
function text(){
var tx=document.getElementById("search").value;//内容
document.getElementById("hid").value=tx;//给第一个form的hidden
document.getElementById("hid1").value=tx;//第二个form的hidden
document.baidufrm.submit();
document.qihufrm.submit();
}
</script>
</head>
<body>
<input type="text" id="search" value="" />
<input type="button"id="btn" value="搜索" onclick="text()" />
<form action="http://baidu.com/s"method="get" target="baidu"name="baidufrm">
<input type="hidden"id="hid"name="wd" value="" />
</form>
<form action="http://www.so.com/s"method="get"target="qihu"name="qihufrm">
<input type="hidden" id="hid1"name="q" value="" />
</form>
<iframe src="" name="baidu" frameborder="no"></iframe>
<iframe src="" name="qihu" frameborder="no"></iframe>
</body>
</html>
BOM浏览器对象模型：
1）window对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
alert(window.innerHeight+"|"+window.innerWidth);
}
function text2(){
window.prompt("你说啥?");//弹出来一个可以输入的框，可以确定和取消
}
function text3(){
window.open("text.html");//打开一个页面
}
function text4(){
window.setInterval(function(){
alert("1秒钟我就弹出来一次烦死你");
},1000)
}
function text5(){
window.setTimeout(function(){
alert("1秒中之后我只弹出来一次");
},1000)
}
</script>
</head>
<body>
<input type="button" value="bt1" onclick="text()" />
<input type="button"value="bt2"onclick="text2()" />
<input type="button" value="bt3"onclick="text3()" />
<input type="button" value="bt4"onclick="text4()" />
<input type="button" value="bt5"onclick="text5()" />
</body>
</html>
实战三：简易的表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text6(){
window.setInterval(function(){
var d=new Date();
var year=d.getFullYear();
var mon=d.getMonth()+1;
var dar=d.getDate();
var hour=d.getHours();
var min=d.getMinutes();
var s=d.getSeconds();
var t=year+"年"+mon+"月"+dar+"日"+hour+"时"+min+"分"+s+"秒";
document.getElementById("div1").innerHTML=t;
},1000);
}
</script>
</head>
<body onload="text6()">
<div id="div1"></div>
</body>
</html>
window对象:指的是整个浏览器对象
(1)window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
(2)window.screen 对象包含有关用户屏幕的信息
(3)window.navigator 对象包含有关访问者浏览器的信息。
(4)window.history 对象包含浏览器的历史
(5)window.document对象，整个文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test1(){
console.log(location.href);
console.log("端口:"+window.location.port);
console.log("主机名称:"+location.hostname);
console.log("协议:"+location.protocol);
location.href="http://www.baidu.com";//很重要
}
function test2(){
console.log("可用的高"+screen.availHeight);
console.log("可用的宽"+screen.availWidth);
console.log("整个屏幕的宽和高:"+screen.height+"------- "+screen.width)
}
function test3(){
console.log("浏览器代号:"+navigator.appCodeName);
console.log("浏览器名称："+navigator.appName);
console.log("用户代理:"+navigator.userAgent );
}
function test4(){
}
function test5(){
//history.forward();
history.go(1);
}
function test6(){
//正而八经的写法
var divEle=window.document.getElementById("div1");
divEle.innerHTML="哈喇";
}
</script>
</head>
<body>
<input type="button" id="" value="location对象" onclick="test1()" />
<input type="button" id="" value="screen对象" onclick="test2()" />
<input type="button" id="" value="navigator对象" onclick="test3()" />
<input type="button" id="" value="history对象" onclick="test4()"/>
<input type="button" id="" value="前进" onclick="test5()" />
<input type="button" id="" value="document" onclick="test6()" />
<p><a href="index.html">主页</a></p>
<div id="div1">
</div>
</body>
</html>
(1)直接获取元素的方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
var btEle=document.getElementById("bt1");//获得唯一id元素
//通过Name获取元素 这个元素是一个数组
var checkEle=document.getElementsByName("choose");
console.log(checkEle.length);
//标签名称获得元素 这个元素时一个数组
var tagEle=document.getElementsByTagName("input");
console.log(tagEle.length);
//通过标签class获得元素
var classEle=document.getElementsByClassName("clazz");
console.log(classEle[0]);
}
</script>
</head>
<body>
<div id="div1" class="clazz">
<input type="button" id="bt1"name="bt1" onclick="text()" />
<input type="checkbox" id="choose" name="choose" value="play" />玩
<input type="checkbox" id="choose1" name="choose" value="drink"/>喝
</div>
</body>
</html>
（2）获取父节点、子节点、兄弟节点：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test1(){
var spanEle=document.getElementById("span1");
//通过子节点获得父节点的元素
var fuEle=spanEle.parentNode;
var fuEle1=spanEle.parentElement;
alert(fuEle1);
//通过父节点获得子节点
var fuElement=document.getElementById("div1");
var len=fuElement.childNodes.length;//div的所有东西 包括空格 一段一段
alert(len);//15
//兄弟节点
alert(spanEle.nextSibling);
alert(spanEle.previousSibling);
alert(spanEle.firstSibling);
}
</script>
</head>
<body>
<input type="button" id="" value="间接获取" onclick="test1()"/>
<div id="div1">
<p>p段落</p>
<span> span2</span><br />
<span id="span1"> span1</span><br />
<span> span3</span><br />
<span> span4</span><br />
</div>
</body>
</html>
实战项目：制作一个金币点击+++：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
width:100px;height:200px;
position:absolute;
left:200px;
top:200px;
}
</style>
<script>
function text(){
var imgEle=document.createElement("img");
imgEle.src="../img/gold.gif";
var divEle=document.getElementById("div1");
divEle.appendChild(imgEle);
imgEle.style.opacity=1;
var iid=window.setInterval(function(){
imgEle.style.opacity-=0.1;
imgEle.style.top=(imgEle.offsetTop-2)+"px";
if(imgEle.style.opacity==0.1){
window.clearInterval(iid);
divEle.removeChild(imgEle);
}
},150);
}
</script>
</head>
<body>
<input type="button" value="点击金币+1" onclick="text()" />
<div id="div1"></div>
</body>
</html>
扫一扫
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
