function <name>(<param>)
{
}
每一个函数都是由对象来调用的
在JS里,变量是很随意的,可以不用“var”说明,也可以随意改变变量类型。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script type="text/javascript">
var provinceArr = new Array(5);
provinceArr[0] = new Array("北京市");
provinceArr[1] = new Array("郑州市","洛阳市","濮阳市","驻马店市");
provinceArr[2] = new Array("石家庄市","唐山","秦皇岛","邯郸");
provinceArr[3] = new Array("西安市","宝鸡市","延安");
provinceArr[4] = new Array("菏泽市","济南市","青岛");
function provinceChange(province){
var city = document.getElementById("city");
if(province.value == "-1"){
city.innerHTML = "<option value='-1'>-请选择-</option>";
return;
}
// console.log(provinceArr[province.value]);
var cityArr = provinceArr[province.value];
city.options.length = 0;
for(var i=0;i<cityArr.length;i++){
var cityOption = document.createElement("option");
cityOption.innerText = cityArr[i];
city.appendChild(cityOption);
}
}
</script>
</head>
<body>
<select onchange="provinceChange(this)">
<option value="-1">-请选择-</option>
<option value="0">北京市</option>
<option value="1">河南省</option>
<option value="2">河北省</option>
<option value="3">陕西省</option>
<option value="4">山东省</option>
</select>
<select id="city">
<option value="-1">-请选择-</option>
</select>
</body>
</html>
-----------省市二级联动下拉列表效果
1,创建二维数组
var arr = new Array(n); 省份的个数
arr[0]=new Array(m) 省份下城市的个数
2,清空下拉列表
ele.options.length = 0;
其他常用对象和常用方法
http://www.w3school.com.cn/jsref/index.asp
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<script type="text/javascript">
function selectAll(choiceBtn){
// document.getElementsByTagName();
var arr = document.getElementsByName("choice");
for(var i=0;i<arr.length;i++){
arr[i].checked = choiceBtn.checked;
}
}
</script>
</head>
<body>
<table border="1" width="800px" height="800px">
<tr>
<td><input type="checkbox" onclick="selectAll(this)" />全选</td><td>用户名</td><td>邮箱</td><td>电话号码</td><td>性别</td><td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" /></td><td>siki</td><td>804632564@qq.com</td><td>804632564</td><td>男</td><td>发邮件 封号 编辑</td>
</tr>
</table>
</body>
</html>
--------------------全选和全不选操作
1,如果获得所有的复选框
document.getElementsByName("name")
2,获得设置复选框的状态
ele.checked
ele.checked=true/false;
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>window对象a</title>
<script type="text/javascript">
//window浏览器窗口
// var name = "siki";
// console.log(window.name);
// window.document.getElementById();
// window.alert();
// window.setInterval();
// window.setTimeout();
// var res = window.confirm("你确定要杀我吗?");
// console.log(res);
// var res = window.prompt("请输入你的性别:");
// console.log(res);//输入结果,确定才会显示输入的内容,点击取消,显示null。
// function myopen(){
// var w = window.open("http://www.sikiedu.com","new_window","width=500,height=500");
// w.resizeTo(400,400);
// w.moveTo(200,500);
// // w.close();
// w.focus();
// }
//window.screen
// console.log(screen.availWidth);
// console.log(screen.availHeight);
// window.location
// console.log(location.protocal);
// console.log(location.hostname);
// console.log(location.port);
// console.log(location.pathname);
// console.log(location);
// location.assign("603-广告弹框.html");
// window.history
// history.go(-2);
</script>
</head>
<body>
<p>window对象-A</p>
<a href="701-window对象b.html">下一个页面</a>
<button onclick="history.back()">后退</button>
<button onclick="history.forward()">前进</button>
<button onclick="myopen()">打开</button>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>window对象-B</title>
</head>
<body>
<p>window对象-B</p>
<a href="701-window对象c.html">下一个页面</a>
<button onclick="history.back()">后退</button>
<button onclick="history.forward()">前进</button>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>window对象-C</title>
</head>
<body>
<p>window对象-C</p>
<a href="">下一个页面</a>
<button onclick="history.back()">后退</button>
<button onclick="history.forward()">前进</button>
</body>
</html>
history( window.history )
window.history 对象包含浏览器的历史。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go(-2) 后退两步
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>window对象</title>
<script type="text/javascript">
//window浏览器窗口
// var name = "siki";
// console.log(window.name);
// window.document.getElementById();
// window.alert();
// window.setInterval();
// window.setTimeout();
// var res = window.confirm("你确定要杀我吗?");
// console.log(res);
// var res = window.prompt("请输入你的性别:");
// console.log(res);//输入结果,确定才会显示输入的内容,点击取消,显示null。
// function myopen(){
// var w = window.open("http://www.sikiedu.com","new_window","width=500,height=500");
// w.resizeTo(400,400);
// w.moveTo(200,500);
// // w.close();
// w.focus();
// }
//window.screen
// console.log(screen.availWidth);
// console.log(screen.availHeight);
// window.location
console.log(location.protocal);
console.log(location.hostname);
console.log(location.port);
console.log(location.pathname);
console.log(location);
// location.assign("603-广告弹框.html");
</script>
</head>
<body>
<button onclick="myopen()">打开</button>
</body>
</html>
screen( window.screen ) 获取屏幕分辨率
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
location( window.location )
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
window.location.assign("http://www.sikiedu.com") 相当于一个超链接的功能
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>window对象</title>
<script type="text/javascript">
//window浏览器窗口
// var name = "siki";
// console.log(window.name);
// window.document.getElementById();
// window.alert();
// window.setInterval();
// window.setTimeout();
// var res = window.confirm("你确定要杀我吗?");
// console.log(res);
// var res = window.prompt("请输入你的性别:");
// console.log(res);//输入结果,确定才会显示输入的内容,点击取消,显示null。
function myopen(){
var w = window.open("http://www.sikiedu.com","new_window","width=500,height=500");
w.resizeTo(400,400);
w.moveTo(200,500);
// w.close();
w.focus();
}
</script>
</head>
<body>
<button onclick="myopen()">打开</button>
</body>
</html>
window对象的函数(跟窗口有关系)
var w = window.open("http://www.sikiedu.com","name","width=500,height=500");
w.resizeTo(300,300);
w.moveTo(100,100);
w.close();
w.focus()获取焦点
window对象
window对象是一个浏览器对象,代表浏览器窗口。
我们定义的变量、函数会自动放在window对象里面。
document也是window里面的。window.document
window中的变量或者对象一般可以直接写,不加 window.前缀
为什么要把document放在window里面
window代表整个浏览器窗口,网页是位于浏览器窗口里面的,document主要是跟网页有关,跟元素相关的操作都是通过document完成的,所以可以认为document是整个网页,网页位于窗口里面。
所以document也就放在了window里面
window对象的函数(弹出框)
alert
confirm 确认框
prompt 输入框
setInterval clearInterval
setTimeout clearTimeout
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>window对象</title>
<script type="text/javascript">
//window浏览器窗口
// var name = "siki";
// console.log(window.name);
// window.document.getElementById();
// window.alert();
// window.setInterval();
// window.setTimeout();
// var res = window.confirm("你确定要杀我吗?");
// console.log(res);
var res = window.prompt("请输入你的性别:");
console.log(res);//输入结果,确定才会显示输入的内容,点击取消,显示null。
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>广告弹框</title>
<style type="text/css">
#ad{
width:300px;
height:300px;
background-color:antiquewhite;
position:fixed;
bottom:0px;
right:0px;
display:none;
}
</style>
<script type="text/javascript">
function init(){
// setTimeout(showAd,2000);
setInterval(showAd,5000);
}
function showAd(){
var ad = document.getElementById("ad");
ad.style.display = "block";
}
function closeAd(){
var ad = document.getElementById("ad");
ad.style.display = "none";
}
</script>
</head>
<body onload="init()">
<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />123
<div id="ad">
<button onclick="closeAd()">关闭</button>
</div>
</body>
</html>
----------广告弹框
1,广告的位置
网页的正上方
网页正中间
网页右下角
2,弹出的时间
网页加载的时候 onload
定时弹出
只显示一次(定时隐藏)
每隔一段时间弹出
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
div{
width:900px;
height:400px;
margin:0 auto;
}
div img{
width:900px;
height:400px;
}
</style>
<script type="text/javascript">
function init(){
// window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
window.setInterval(changeImg,2000);//循环,每隔2秒调用一次changeImg方法。
}
var pathArr = new Array(
"img/1.jpg",
"img/1.png",
"img/2.jpg",
"img/2.png"
);
var index = 0;
function changeImg(){
nextImg();
}
function preImg(){
myimg = document.getElementById("myimg");
index--;
if(index < 0){
index = pathArr.length-1;
}
myimg.src = pathArr[index];
}
function nextImg(){
myimg = document.getElementById("myimg");
index++;
if(index >= pathArr.length){
index = 0;
}
myimg.src = pathArr[index];
}
</script>
</head>
<body onload="init()">
<p align="center">
<button onclick="preImg()">上一张</button>
<button onclick="nextImg()">下一张</button>
</p>
<div>
<img src="img/1.png" id="myimg" />
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>数组</title>
<script type="text/javascript">
// var score1 = 100;
// var score2 = 30;
// var score3 = 20;
//数组可以存储一组数据
// var arr1 = new Array();
// arr1[0] = 100;
// arr1[1] = 30;
// arr1[2] = 60;
// arr1[3] = "sikiedu.com";// arr1[3] = 70;
// arr1[4] = 80;
// arr1[5] = 90;
// console.log(arr1[3]);//70 //注释掉arr1[3] = 70; 打印结果是undefined //字符串arr1[3]="sikiedu.com";居然也能打印出来。
// console.log(arr1.length);//6 //注释掉arr1[3] = 70; 打印结果仍然是6
// for(var i=0;i<arr1.length;i++){
// console.log(arr1[i]);
// }
// var arr2 = new Array(10);
// for(var i = 0;i < arr2.length;i++){
// console.log(arr2[i]);//undefined
// }
// var arr3 = new Array(90,80,50,40);
// var arr3 = new Array("李白","孙尚香","夏侯惇");
// for(var i = 0;i<arr3.length;i++){
// console.log(arr3[i]);
// }
function user(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
user1 = new user("李白",90,"男");
user2 = new user("孙尚香",30,"女");
user3 = new user("夏侯惇",20,"男");
var arr = new Array(user1,user2,user3);
for(var i = 0;i<arr.length;i++){
// console.log(arr[i].name);
console.log(arr[i].age);
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>数组</title>
<script type="text/javascript">
// var score1 = 100;
// var score2 = 30;
// var score3 = 20;
//数组可以存储一组数据
var arr1 = new Array();
arr1[0] = 100;
arr1[1] = 30;
arr1[2] = 60;
arr1[3] = "sikiedu.com";// arr1[3] = 70;
arr1[4] = 80;
arr1[5] = 90;
console.log(arr1[3]);//70 //注释掉arr1[3] = 70; 打印结果是undefined //字符串arr1[3]="sikiedu.com";居然也能打印出来。
console.log(arr1.length);//6 //注释掉arr1[3] = 70; 打印结果仍然是6
for(var i=0;i<arr1.length;i++){
console.log(arr1[i]);
}
</script>
</head>
<body>
</body>
</html>
数组
1、创建数组
var myArray=new Array()
var mycars=new Array(3) 数组的长度是不固定的
var mycars=new Array("Saab","Volvo","BMW")
2、访问数组元素和设置数组元素
mycars[0]
mycars[0]="Opel"
3、取得数组长度
arr.length
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
div{
width:900px;
height:400px;
margin:0 auto;
}
div img{
width:900px;
height:400px;
}
</style>
<script type="text/javascript">
function init(){
// window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
window.setInterval(changeImg,2000);//循环,每隔2秒调用一次changeImg方法。
}
var index = 1;
function changeImg(){
nextImg();
}
function preImg(){
myimg = document.getElementById("myimg");
index--;
if(index < 1){
index = 2;
}
myimg.src = "img/" + index + ".png";
}
function nextImg(){
myimg = document.getElementById("myimg");
index++;
if(index > 2){
index = 1;
}
myimg.src = "img/" + index + ".png";
}
</script>
</head>
<body onload="init()">
<p align="center">
<button onclick="preImg()">上一张</button>
<button onclick="nextImg()">下一张</button>
</p>
<div>
<img src="img/1.png" id="myimg" />
</div>
</body>
</html>
1,怎么自动调用某个函数(自动轮播)
setInterval(functionName,millisec);
2,当网页加载完成的时候,设置计时调用
onload
为什么要等网页加载完成?
只有网页加载完成了,才可以访问网页上的任何元素!
3,两种控制图片路径的方式
数组
设置固定规范的图片名称
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
div{
width:900px;
height:400px;
margin:0 auto;
}
div img{
width:900px;
height:400px;
}
</style>
<script type="text/javascript">
function init(){
// window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
window.setInterval(changeImg,2000);//循环,每隔2秒调用一次changeImg方法。
}
var index = 1;
function changeImg(){
myimg = document.getElementById("myimg");
index++;
if(index > 2){
index = 1;
}
myimg.src = "img/" + index + ".png";
}
</script>
</head>
<body onload="init()">
<div>
<img src="img/1.png" id="myimg" />
</div>
</body>
</html>
1,怎么自动调用某个函数(自动轮播)
setInterval(functionName,millisec);
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
div{
width:900px;
height:400px;
margin:0 auto;
}
div img{
width:900px;
height:400px;
}
</style>
<script type="text/javascript">
window.setTimeout(changeImg,2000);
function changeImg(){
myimg = document.getElementById("myimg");
myimg.src = "img/2.png";
}
</script>
</head>
<body>
<div>
<img src="img/1.png" id="myimg" />
</div>
</body>
</html>
DOM节点----------
创建新元素(DOM树中的新节点)
var p = document.createElement("p");
p.innerHTML="xxx";
ele.appendChild(p);//把新创建的节点添加到DOM树中
创建文本节点
var node=document.createTextNode("xxxxx");
ele.appendChild(node);
删除元素(删除节点)
ele.removeChild(node);
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>添加新节点</title>
</head>
<body>
<div id="mydiv">
<span>第一个span</span>
<span>第二个span</span>
<span>第三个span</span>
<span>第四个span</span>
<p id="myp">我是p标签</p>
</div>
</body>
</html>
<script type="text/javascript">
myp = document.getElementById("myp");
// myp.innerHTML = "<span>第五个span</span>";
mydiv = document.getElementById("mydiv");
mydiv.removeChild(myp);
// mydiv.innerHTML = "<span>第六个span</span>";
var newSpan = document.createElement("span"); //<span></span>
// newSpan.innerText = "我是第五个span";
var textNode = document.createTextNode("我是第五个 span");
newSpan.appendChild(textNode);
mydiv.appendChild(newSpan);
</script>
其他事件(每个事件对应的事件名,就是把on去掉)
onclick
onload
onunload
onchange (文本输入控件)
onmouseover onmouseout
onmousedown onmouseup
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>DOM事件</title>
</head>
<body onload="init()">
<!-- <body onload="init()" onbeforeunload="return beforeunload()"> -->
<!-- 通过onclick属性添加事件 -->
<div onclick="console.log('我被点击了');">DOM事件div</div>
<div onclick="divClick()">DOM事件div</div>
<span id="myspan">DOM事件span</span>
<p onmouseover="console.log('onmouseover');" onmouseout="console.log('鼠标划出');" onmousedown="console.log('鼠标按下');" onmouseup="console.log('鼠标抬起');">DOM事件p</p>
<font>DOM事件font</font>
<a href="http://www.sikiedu.com">DOM事件a</a>
<input type="text" onchange="inputChange(this)" />
</body>
</html>
<script type="text/javascript">
function init(){
console.log("网页加载完成");
}
function inputChange(input){
console.log("用户输入的内容发生了改变" + input.value);
}
// function beforeunload(){
// return "你确定离开了吗?"
// }
function divClick(){
console.log("div被点击了");
}
var myspan = document.getElementById("myspan");
// myspan.onclick = function(){
// console.log("span被点击了");
// };
// myspan.addEventListener("click",spanClick);
// function spanClick(){
// console.log("span被点击了");
// }
myspan.addEventListener("click",function(){
console.log("span被点击了");
});
</script>
给元素添加点击事件
1,通过onclick属性
onclick="this.innerHTML='谢谢!'"
onclick="function(arg1,arg2)"
2,通过JavaScript代码添加点击事件(第一种方式)
ele.onclick=function(){};
3,通过JavaScript代码添加点击事件(第二种方式)
ele.addEventListener("click",function(){});
其他事件(每个事件对应的事件名,就是把on去掉)
onclick
onload
onunload
onchange (文本输入控件)
onmouseover onmouseout
onmousedown onmouseup
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>DOM事件</title>
</head>
<body>
<!-- 通过onclick属性添加事件 -->
<div onclick="console.log('我被点击了');">DOM事件div</div>
<div onclick="divClick()">DOM事件div</div>
<span id="myspan">DOM事件span</span>
<p>DOM事件p</p>
<font>DOM事件font</font>
<a>DOM事件a</a>
</body>
</html>
<script type="text/javascript">
function divClick(){
console.log("div被点击了");
}
var myspan = document.getElementById("myspan");
// myspan.onclick = function(){
// console.log("span被点击了");
// };
// myspan.addEventListener("click",spanClick);
// function spanClick(){
// console.log("span被点击了");
// }
myspan.addEventListener("click",function(){
console.log("span被点击了");
});
</script>