流程控制
switch
<script>
var num = prompt('请输入相应的数字');
#输入的数字为字符类型，与 case 里面的数据类型不同。解决方法有两种：
1.将 case 中的数字改成字符串，例 "1";
2.将输入进来的数字转换成数值型（利用 JS 为弱类型语言的特点），var num = prompt('请输入相应的数字')*1;
switch (num) {
case 1:
document.write('向南走');
break;
case 2:
document.write('向北走');
break;
case 3:
document.write('向西走');
break;
......
......
......
default:
document.write('输入错误');
}
</script>
循环
for 循环和 while 循环的区别：for 用于知道循环次数的循环，while 循环用于不知道循环次数的循环
倒直角
<script type="text/javascript">
var inp = prompt('请输入行数');
for(var i=inp;i>0;i--){
for(var j=0;j<i;j++){
document.write("❤");
}
document.write('<br/>');
}
</script>
金字塔（1）
<script type="text/javascript">
var inp = prompt('请输入金字塔的行数');
var star = 1;
for (var i = inp; i > 0; i--) {
for(var j = 0; j < (i-1) ; j++){
document.write(' ');
}
for(var y = 0; y < (2 * star - 1); y++){
document.write('*');
}
document.write('<br/>');
var star = star + 1;
}
/*
++++*
+++***
++*****
+*******
*********
1.星星的规律：2*n-1 (n 为行号)；
空格的规律：第一行n-1 (n 为行号)
2.外层循环将行号写成递减，如 5，4，3，2，1
3.内层的第一个循环（空格）必须递减，因为空格越来越少，
这里利用外层循环的 i 写成 4，3，2，1，0
4.内层的第二个循环（星星）必须递增，因为星星越来越多，
外层创造出来的递减行号被第一个循环用了，所以这里必须创造
出一个递增的行号。在外面创造一个新的变量（star）来解决
这个问题
5.空格和星星的单调性是固定的，外层循环的行号只能递增或
者递减，无法同时满足空格和星星的需求，所以必须利用创建
变量的方式解决这个问题。
*/
</script>
金字塔（2） 修改
<script type="text/javascript">
var inp = prompt('请输入金字塔的行数');
for (var i = 1; i <= inp; i++) {
for(var j = 0; j < =(inp-i) ; j++){
document.write(' ');
}
for(var y = 1; y <= (2 * i - 1); y++){
document.write('*');
}
document.write('<br/>');
}
<script/>
/*
空格的规律：输入的行数-当前行号
*/
乘法口诀表
<script type="text/javascript">
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+'x'+i+'='+(j*i));
document.write(' ');
}
document.write('<br/>');
}
/*
1.外层循环用来确定行号 1-9 ，是递增关系，可以用来做
乘数（第二个数）
2.内层循环可以用来做被乘数（第一个数），当被乘数与乘数相等时
一行结束
*/
</script>
自定义行列数隔行变色表格
<style>
.hb{
background: purple;
color: white;
}
</style>
<script type="text/javascript">
var rows=prompt('请输入行数');
var cols=prompt('请输入列数');
document.write("<table border='1'>");
for(var i=1;i<=rows;i++){
if(i%2==0){
document.write("<tr>");
}else{
document.write("<tr class='hb'>");
}
for(var j=1;j<=cols;j++){
document.write("<td>");
document.write("第"+i+"行，第"+j+"列");
document.write("<td/>");
}
document.write("<tr/>");
}
document.write("<table/>");
</script>
局部变量与全局变量
局部变量：函数内部用 var 声明的变量。 局部变量只能作用在函数内部。
全局变量：不是局部变量的变量就是全局变量。 全局变量作用范围是整个 JS.
function hanshu(){
var a = '我是局部变量';
b = '我是全局变量';
}
内置顶层函数
Number(); #转换成数值型，如果是空字符串，就转换为 0
parseInt(); #提取整数部分 （可用于提取元素宽度，如 100px -> 100）
parseFloat(); #转换成浮点型
isNaN(); #检查是否为非数字型，是否不能转换成数字
isNaN('你好！'); => true;
eval('1+1'); => 2
数组
找最大值
<script type="text/javascript">
function max(arr){
bas = [arr[0]];
for(var i=0;i<=((arr.length)-1);i++){
if(arr[i] > bas[0]){
bas[0] = arr[i];
}
}
document.write(bas[0]);
}
arr = [1,56,23,6,43,87,3,5,55];
max(arr);
/*
思考过程：遍历的过程是将数组的元素一个个拿出来，先拿出数组的
第一个值存到外面，将数组遍历的过程中的每一个值和外
面的值进行比较，如果遍历的值大就存进去，否则不存。
最后再把外面的值拿出来，他就是最大值。
1.遍历，将数组里的元素走一遍
2.每拿一次就比较一次，挑出大的那个
和谁比较？挑出的大的存到哪里？
和数组中的元素比较。存到另一个数组中。-> 创建一个新的数组
*/
</script>
遍历二维数组中的每一个元素
<script type="text/javascript">
var jingdian = [['狼牙山','白洋淀','北戴河'],['黄山','九华山',
'天柱山'],['少林寺','嵩山','龙门石窟','白马寺'],['泰山','大明湖',
'突泉','梁山','沂蒙山','三孔'],['平遥古城','五台山']];
function bianli(arr){
for(var i=0;i<=(arr.length-1);i++){
var arr2 = arr[i];
for(var j=0;j<=(arr2.length-1);j++){
document.write(arr2[j]+'真好玩'+'<br/>');
}
}
}
bianli(jingdian);
</script>
二维数组中长度最大的子数组的下标
<script type="text/javascript">
var jingdian = [['狼牙山','白洋淀','北戴河'],['黄山','九华山',
'天柱山'],['少林寺','嵩山','龙门石窟','白马寺'],['泰山','大明湖',
'突泉','梁山','沂蒙山','三孔'],['平遥古城','五台山']];
function langest(arr){
var hd = [0,,];
for(var i=0;i<=(arr.length-1);i++){
if(arr[i].length > hd[0]){
hd[0] = arr[i].length;
hd[1] = i;
}
}
document.write(hd[1]);
}
langest(jingdian);
/*
在遍历的外面建立一个数组，第一个用来记录最长的长度，第二个用来记录
最长的那个的下标
*/
</script>
数组的相关函数
向数组末尾添加新元素
shuiguo.push('芒果','火龙果','榴莲');
向数组开头添加新元素
shuiguo.unshift('芒果','火龙果');
删除数组的最后一个元素
shuiguo.pop();
删除数组的第一个元素
shuiguo.shift();
万能添加和删除
shuiguo.splice(2,3); #从2号位置开始，删除3个
shuiguo.splice(2,3,'芒果','火龙果','榴莲'); #从2号位置开始，删除3个,在2号位置处添加新元素
对数组的截取
#slice不改变原数组，只会返回新的结果
#slice在截取的时候，只包含开始，不包含结束
shuiguo.slice(1,3); #从1号位置开始，截取到3号位置（不包含3号）
shuiguo.slice(1); #从1号位置开始，截取到最后
将数组转换成字符串
shuiguo.join(); #默认通过逗号连接起来
shuiguo.join('@'); #通过@连接
数组与数组连接
shuiguo.concat(jingdian); #shuiguo数组后连接jingdian数组
数组排序函数
function hanshu(x,y){
return y-x;
}
var arr = [10,75,44,32,7];
var re = arr.sort(hanshu);
document.write(re);
数组去重复
<script type="text/javascript">
var arr = ['a','b','c','a','a','a','d','e','c','f','d'];
function quchongfu(sz){
var ck = [sz[0]];
for(var i=0;i<(sz.length-1);i++){
//将仓库中和当前元素值相等的元素删掉
for(var j=0;j<=(ck.length-1);j++){
if(sz[i] == ck[j]){
ck.splice(j,1);
}
}
ck.push(sz[i]); //仓库中已经没有和自己相等的值，然后将自己加入其中
}
return ck;
}
re = quchongfu(arr);
document.write(re);
</script>
//i号元素与其后面的元素进行比较，如果相等就将其删除
<script type="text/javascript">
var arr = ['a','b','c','a','a','a','d','e','c','f','d'];
function quchongfu(sz){
for(var i=0;i<sz.length;i++){
for(var j=i+1;j<sz.length;j++){
if(sz[i]==sz[j]){
sz.splice(j,1);
j--; //删除完 J 号元素后，j+1 号元素就变成了 j 号元素，
就会漏掉和 j+1 比较的机会，所以将指针往回拨一下，重新检查
}
}
}
return sz;
}
re = quchongfu(arr);
document.write(re);
</script>
数组排序（冒泡算法）
<script type="text/javascript">
var arr = [10,75,44,32,30,7];
function paixu(sz){
for(var j=0;j<sz.length-1;j++){
for(var i=0;i<sz.length-1;i++){
//如果i号元素比i+1号元素的值大，就调换位置
if(sz[i]<sz[i+1]){
var temp = sz[i];
sz[i] = sz[i+1];
sz[i+1] = temp;
}
}
}
return sz;
}
var re = paixu(arr);
document.write(re);
</script>
对象、类的相关概念
一、对象和类（构造函数）的概念以及他们的关系是什么？
1.对象
比较笼统的说法：一切事物皆对象
比较正式的解释：对象是很多属性（变量）和方法（函数）的集合体
2.类（构造函数）
创建对象的规则
3.类和对象的关系
对象是由类创建的（类可以创建出对象）
二、如何创建对象
1.用原生形式创建对象（也叫用json格式创建对象）
var iphone9 = {color:'黑色',
price:'8000元',
size:'5.5寸',
weight:'200g',
chat:function(){
alert('能聊天')
},
call:function(){
alert('能打电话')
}
};
注意：每行后面是逗号
获得对象里面的属性：alert(iphone9.color);
调用对象里的函数：iphone9.call();
2.用构造函数的方法创建对象
function pgsj(){ #构造函数
this.size = '5.5寸';
this.color = '土豪金';
this.weight = '200g';
this.price = '8000元';
this.call = function(){
alert('能打电话！');
}
}
#通过上面的类或者构造函数创建对象
var iphone9 = new pgsj(); #创建一个iphone9对象
var iphone10 = new pgsj(); #创建一个iphone10对象
通过构造函数创建数组 var shuiguo = new Array('苹果','桃子','鸭梨','西瓜','芒果');
iphone9.weight = '199g'; #修改一个属性
iphone9.yan = '挂绳子的眼'; #新增属性
iphone9.huo = function(){ #新增方法
alert('能点火');
}
获得对象里面的属性：alert(iphone9.color);
调用对象里的函数：iphone9.call();
对象属性的访问
document.write(iphone9.color);
document.write(iphone9['color']);
对象方法的访问
iphone9.call();
iphone9['call']();
对对象进行遍历
for(x in iphone9){
document.write(iphone9[x]);
#这里的 x 是字符串形式的属性或者方法名
}
删除对象的属性和方法
delete iphone9.color;
销毁对象（可用于节约内存）
iphone9 = null;
字符串
<script type="text/javascript">
var zifu = 'haohaoxuexi好好学习';
// 获取字符串长度（每个汉字是算一个字符）
document.write(zifu.length);
// 获得字符串中3号位置上的字符
zifu.charAt(3);
// 获得字符串中3号位置上的字符的Unicode编码
zifu.charCodeAt(3);
// 将Unicode编码转成原始字符
String.fromCharCode(100);
// 获得u在zifu中第一次出现的位置
zifu.indexOf('u');
// 获得u在zifu中自后一次出现的位置
zifu.lastIndexOf('u');
// 在字符串中检索指定的值，返回的值就是指定的值
zifu.match('nr'); //如果有就返回'nr',没有时返回null
// 字符串替换
// replace默认只替换第一个符合条件的字符串，返回结果为复制出来修改后的值，原来的值不变
zifu.replace('ao','****');
// 字符串截取
zifu.splice(3,-1); //截取3至-1的值
zifu.substr(3,4);//从3号开始，截取4个
// 字符串分割为数组
zifu.split('a'); //通过a将字符串风格为数组
// 字符串转换为大写
zifu.toUpperCase();
// 字符串转换为小写
zifu.toLowerCase();
</script>
替换条件的所有字符
<script type="text/javascript">
var temp = '后盾人php后盾人论坛后盾人网站后盾人';
/*
replace(); 函数返回值为复制出来修改后的值
*/
function tihuan(str){
while(str.match('后盾')){
var str = str.replace('后盾','****');
}
return str;
}
var re = tihuan(temp);
document.write(re);
</script>
找出所以符合条件词的位置
<script type="text/javascript">
var zifu = '后盾视频下载地址：bbs.houdunwang.com,论坛地址：bbs.houdunwang.com,官方网站：www.houdunwang.com';
/*
1.不确定循环次数，所以用 while 循环
2.循环终止的条件是：找到了最后一个符合条件的位置
3.indexOf() 函数只能找到第一个符合条件的值，所以每找一次之后就将找到的值改变掉，使得下次循环可以找到下一个值
*/
function zwz(str){
var ck = [];
while(str.match('houdunwang')){
var re = str.indexOf('houdunwang');
ck.push(re);
var str = str.replace('houdunwang','**********');
}
return ck;
}
var result = zwz(zifu);
document.write(result);
</script>
数字对象 随机数
// 取绝对值
Math.abs(-10);
// 四舍五入
// round四舍五入之后的结果一定是整数
Math.round(5.6);
//向上取整
Math.ceil(8.1); //值为9
//向下取整
Math.floor(4.1); //值为4
***********************************
// Math.random()获得一个0-1中间的随机小数，取值范围无限接近于0和1
// 取0-5之间的随机小数
Math.random()*5;
//取10-15之间的随机小数
Math.random()*(15-10)+10;
//取x到y之间的随机小数
Math.random()*(y-x)+x;
//取x到y之间随机整数
Math.floor(Math.random()*(y+1-x)+x);
例 Math.floor(Math,random()*(15+1-10)+10); //10-15之间（包括10和15）
浏览器对象——BOM
BOM 定时器
<script type="text/javascript">
function hi(){
document.write('嗨！你好！');
}
//1.鞭炮
//每隔两秒执行一次 hi 函数
setInterval(hi,2000);
//2.定时炸弹
// 页面打开后2秒钟，执行一次 hi 函数，且仅执行一次
setTimeout(hi,2000);
//3.清除定时器
var timer = setInterval(function(){
alert('你好！');
},2000);
setTimeout(function(){
//5秒钟后清理上面的 timer 定时器
clearInterval(timer);
},5000)
// 4.window对象下的其他方法
alert();
prompt(); //显示可提示用户输入的对话框
confirm(); //显示带有一段消息以及确认按钮和取消按钮的对话框
var re = confirm('你确定删除吗？');
if(re){
document.write('删除成功');
}else{
document.write('删除操作被取消');
}
</script>
history 对象
//访问记录数
alert(histoy.length);
//加载history列表中的前一个URL
history.back();
//加载history列表中的下一个URL
history.forward();
//前往指定的URL
histoy.go(number);
location 对象
// 三秒钟后跳转到这个网址
setTimeout(function(){
location.replace('http://houdunren.com');//跳转后没有记录
location.assign('http://houdunren.com'); //跳转后有记录
location.href = 'http://houdunren.com';
},3000);
// 一秒钟后刷新页面
setTimeout(function(){
location.reload();
})
事件初识 鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
#hd{
width:500px;
height:300px;
background: purple;
margin:0 auto;
}
</style>
<script type="text/javascript">
// 需要用js操作body里面的元素的时候，就要写window.onload
//页面加载玩之后再执行里面的代码
window.onload = function(){
//抓到id是hd的元素，然后绑定单机事件
document.getElementById('hd').onclick = function(){
alert('你好！');
}
// 双击事件
document.getElementById('hd').ondblclick = function(){
alert('你好！');
}
// 鼠标按下事件 (可用于拖拽)
onmousedown
// 鼠标抬起事件
onmouseup
// 鼠标移入事件
onmouseover
//鼠标移动事件(可用于放大镜)
onmousemove
// 鼠标移出事件
onmouseout
}
</script>
</head>
<body>
<div id="hd"> </div>
</body>
</html>
事件绑定的两种方式
通过js脚本绑定事件
<head>
<meta charset="utf-8">
<style media="screen">
#suzy{
background: url(./suzy.jpg);
width:2500px;
height: 1000px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementById('suzy').onclick = function(){
alert('嗨！你好！');
}
}
</script>
</head>
<body>
<p id='suzy'></p>
</body>
通过 html 标签绑定事件
<head>
<meta charset="utf-8">
<style media="screen">
#suzy{
background: url(./suzy.jpg);
width:2500px;
height: 1000px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
function hi(){
alert('你好！');
}
</script>
</head>
<body>
<p id='suzy' onclick='hi()'></p>
</body>
事件监听
事件监听和绑定事件的区别是：绑定事件如果重复，后面的函数会覆盖前面的，而监听不会
<head>
<meta charset="utf-8">
<style media="screen">
#suzy{
background: url(./suzy.jpg);
width:2500px;
height: 1000px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 事件监听（也是在元素上加事件）
//注意：这里是 click ,不是 onclick
document.getElementById('suzy').addEventListener('click',function(){
alert('好好学习！');
})
}
</script>
</head>
<body>
<p id='suzy'></p>
</body>
- 事件监听存在兼容性问题（w3c 和低版本 ie 不兼容）
<head>
<meta charset="utf-8">
<style media="screen">
#suzy{
background: url(./suzy.jpg);
width:2500px;
height: 1000px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
if(document.all){//ie
document.getElementById('suzy').attachEvent('onclick',function(){
alert('可执行低版本 ie 标准');
});
}else{// w3c
document.getElementById('suzy').addEventListener('click',function(){
alert('可执行 w3c 标准');
});
}
}
</script>
</head>
<body>
<p id='suzy'></p>
</body>
获得和设置元素行内样式
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn').onclick = function(){
// 获得行内样式设定的宽度
// 注意，元素.style.css样式 这种方法只能获得元素的行内样式
var re = document.getElementById('hd').style.width;
alert(re);
// 设置css样式(如果属性中带横线 如：margin-top 写成 marginTop)
document.getElementById('hd').style.width = "500px";
}
}
</script>
</head>
<body>
<input type="button" value="点击" id="btn">
<div id='hd' style="width: 300px; height:260px; background:green;
margin:0 auto;"></div>
</body>
点击让元素变大
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
// 抓元素
var btn = document.getElementById('btn');
var hd = document.getElementById('hd');
// 给按钮加单击事件
btn.onclick = function(){
// 获得元素当前的宽度
var old_width = hd.style.width;
// 计算新的宽度值
var new_width = parseInt(old_width) + 10;
// 将新的宽度值赋值回元素
hd.style.width = new_width + 'px';
}
}
</script>
</head>
<body>
<input type="button" value="点击" id="btn">
<div id='hd' style="width: 300px; height:260px; background:green"></div>
</body>
JS 运动效果原理
点击按钮实现图片显隐（1）
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#suzy{
width:600px;
height: 387px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
var suzy = document.getElementById('suzy');
btn.onclick = function(){
if(suzy.style.display == 'inline'){
suzy.style.display = 'none';
}else{
suzy.style.display = 'inline';
}
}
}
</script>
</head>
<body>
<input type="button" value="点我" id="btn">
<br/><br/>
<img src="./suzy.jpg" id="suzy" style="display:inline">
</body>
点击按钮实现图片显隐（2）老师思路
变量的不同值对应图片的不同状态
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#suzy{
width:600px;
height: 387px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
var suzy = document.getElementById('suzy');
var cs = 1;
btn.onclick = function(){
if(cs == 1){
suzy.style.display = 'none';
cs = 2;
}else if(cs == 2){
suzy.style.display = 'inline';
cs = 1;
}
}
}
</script>
</head>
<body>
<input type="button" value="点我" id="btn">
<br/><br/>
<img src="./suzy.jpg" id="suzy" style="display:inline">
</body>
图片折返跑
/*
思路：
1.当距离到达限定值时，清理掉定时器，添加一个反向运动的定时器，回到零点时再清理掉········ （没有尽头）
2.之所以元素不断的运动，是因为不断的给 left 赋新值。当每次增加的值为正值时向右移动，
当增加的值为负值时向左移动
*/
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#run{
height: 170px;
width: 170px;
position:absolute;
top:30px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
var run = document.getElementById('run');
var speed = 10;
var timer;
btn.onclick = function(){
clearInterval(timer);
var timer = setInterval(function(){
var old_left = run.style.left
var new_left = parseInt(old_left) + speed;
run.style.left = new_left + 'px';
if(new_left == 100){
speed = -10;
}
if(new_left == 0){
speed = 10;
}
},100);
}
}
</script>
</head>
<body>
<input type="button" value="走你" id='btn'>
<img src="./run.gif" id="run" style="left:0">
</body>
if(new_left == 100){
speed = -10;
}
if(new_left == 0){
speed = 10;
}
等价于
if(new_left == 100 || new_left == 0){
speed = speed*-1;
}
解决定时器叠加问题
/*
叠加效果的原因：每次点击按钮之后，就会在内存中独立运行一个函数，多次点击就会导致多个函数叠加
解决办法：每次点击之后清楚掉之前的定时器。
注意：因为定时器定义的变量名是局部变量（timer），如果想要清理掉之前的定时器，需要将函数里的变量（timer）改成全局变量。
*/
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
var run = document.getElementById('run');
var speed = 10;
var timer;
btn.onclick = function(){
clearInterval(timer);
var timer = setInterval(function(){
var old_left = run.style.left
var new_left = parseInt(old_left) + speed;
run.style.left = new_left + 'px';
if(new_left == 100){
speed = -10;
}
if(new_left == 0){
speed = 10;
}
},100);
}
}
</script>
抓取元素、获得元素里的内容
<script type="text/javascript">
数据调试方法：
1.
document.title = document.getElementById('title').style.left;
2.
console.loge(document.getElementById('title').style.left);
3.
alert();
抓取元素：
getElementById('dan');
getElementsByTagName('tagName'); //数组
getElementsByName('name'); //数组
getElementsByClassName('className'); //数组
var title = document.getElementById('title');
// 获得h1里所有的内容（包括标签）
var con = title.innerHTML;
// 设置元素里的所有内容
title.innerHTML = '我是新内容';
// 获得纯文本内容（过滤掉标签）
if(document.all){
var con = title.innerText;//ie
}else{
var con = title.textContent;//w3c
}
// 或者
var con = title.innerText || title.textContent;//短路写法
</script>
对元素属性的操作
<script type="text/javascript">
对元素属性的操作
// 1.获得元素属性值
（1）document.getElementById('title').id; //只能获得特殊的属性，不能获取自定义的属性
（2）document.getElementById('title').getAttribute('class');
// 2.设置任意属性
document.getElementById('title').setAttribute('class','wwww');
</script>
行内样式和外部样式通用的获取方法
<script type="text/javascript">
行内样式和外部样式通用的获取方法
// 1.IE
对象.currentStyle.CSS样式
// 2.W3C
getComputedStyle(对象,null).CSS样式
`
var hd = document.getElementById('hd');
if(document.all){//IE
var w = hd.currentStyle.width;
}else{//W3C
var w = getComputedStyle(hd,null).width;
}
/*
注意：如果是 margin-top 写成 marginTop
如果想要查看背景颜色，不能用background，而是backgroundColor (特殊情况)
*/
</script>
节点的创建 追加 复制 替换 删除
<script type="text/javascript">
// 获得节点关系的属性
对象.parentNode //获得父节点
对象.childNodes //获得子节点的集合
对象.firstChild //获得第一个子节点
对象.lastChild //获得最后一个节点
对象.nextSibling //获得下一个兄弟节点
对象.previousSibling //获得上一个兄弟节点
/*
一、创建元素节点
1.创建空元素节点
document.createElement('元素标签');
2.创建属性节点
对象.setAttribute(属性名,属性值);
3.创建文本节点
对象.innerHTML='';
二、追加到页面当中
作用：可以添加一个新的元素过来，也可以将抓取的元素移动过来
1. 父对象.appendChild(追加的对象)
在指定元素节点的最后一个子节点后添加节点
2. 父对象.insertBefore(要插入的对象,之前的对象)
插入到某个对象之前
三、删除节点
父对象.removeChild(删除的对象);
如果确定要删除节点，最好也清理内存 对象=null;
四、修改（替换）节点
父对象.replaceChild(新节点,被修改节点);
五、复制节点
待复制的节点.cloneNode(true);
创建指定节点的副本，该方法有个参数（true 或 false）。如果
设置为 true ,所有的子节点也会克隆，否则只克隆标签和属性
*/
</script>
元素的位置和尺寸操作 滚动条位置操作
<script type="text/javascript">
/*
一、元素的位置
offsetTop offsetLeft
返回元素相对于有定位属性 position 的最近前辈元素的坐标（left top 值），
如果所有的前辈元素都没有定位属性，那么就是相对浏览器窗口的距离
二、元素尺寸
offsetWidth offsetHeight
获得元素实际的高度和宽度（包括边框）
clientWidth clientHeight
获得可见区域的高度和宽度
三、获取（设置）具有滚动条元素的属性
scrollTop scrollLeft
滚动条的位置（滚动上去（左去）的内容的值）
scrollHeight scrollWidth
滚动元素的高度和宽度
新事件
news.onscroll = function(){} //onscroll 指的是当滚动条移动时
*/
</script>
漂浮广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漂浮广告一</title>
<style media="screen">
*{
margin:0;
padding: 0;
}
#ad{
height:160px;
width: 200px;
background: purple;
position: absolute;
top:0;
left:0;
}
#close{
color: white;
width: 20px;
text-align: center;
margin: 2px;
padding: 3px;
font-weight: bolder;
background-color: #7900ff;
}
</style>
<script >
window.onload = function(){
var ad = document.getElementById('ad');
var close = document.getElementById('close');
var win_height = document.documentElement.clientHeight;//测量显示区域的固定写法
var win_width = document.documentElement.clientWidth;
var max_top = win_height - ad.offsetHeight; //元素运动的最大距离
var max_left = win_width - ad.offsetWidth;
var speed_top = 10;
var speed_left = 10;
function run(){
var old_top = ad.offsetTop;
var old_left = ad.offsetLeft;
var new_top = old_top + speed_top;
var new_left = old_left + speed_left;
/*
元素在运动的时候可能存在跳过界限值的情况。
例如：
if(new_top == 99){
alert('到底了');
}
new_top 的取值可能是...70，80，90，100... 错过了99这个条件值，
所以用下面的四个判断解决这个问题
*/
if(new_top > max_top){
new_top = max_top;
}
if(new_left > max_left){
new_left = max_left;
}
if(new_top < 0){
new_top = 0;
}
if(new_left < 0){
new_left = 0;
}
ad.style.top = new_top + 'px';
ad.style.left = new_left + 'px';
if(new_top >= max_top || new_top == 0){
speed_top = speed_top*(-1);
}
if(new_left >= max_left || new_left == 0){
speed_left = speed_left*(-1);
}
}
----------
/*
为了避免定时器叠加，这里将定时器赋值给全局变量 timer ，鼠标移入清理掉这个定时器，鼠标移除时调用这个定时器。
*/
var timer = setInterval(run,100);
ad.onmouseover = function(){
clearInterval(timer);
}
//恢复定时器
ad.onmouseout = function(){
timer = setInterval(run,100);
}
---------------
close.onclick = function(){
ad.style.display = "none";
}
// 改变窗口尺寸的时候，元素回到起点
window.onresize = function(){
ad.style.top = 0;
ad.style.left = 0;
/*
有可能在元素回到起点的瞬间 speed_top speed_left 还是负值，
这样会飞出去，用下面的代码解决这些问题
*/
speed_top = 10;
speed_left = 10;
win_height = document.documentElement.clientHeight;
win_width = document.documentElement.clientWidth;
max_top = win_height - ad.offsetHeight;
max_left = win_width - ad.offsetWidth;
}
}
</script>
</head>
<body>
<div id='ad'>
<div id="close">
x
</div>
<span>好好学习</span>
</div>
</body>
</html>
//测量显示区域的固定写法
var win_height = document.documentElement.clientHeight;
//窗口尺寸改变时
window.onresize = function(){};
事件对象
<script type="text/javascript">
/*
事件对象
获得事件对象
hd.onclick = function(abc){
var ev = window.event || abc; //window.event(IE),另一种是W3C
}
一、鼠标事件
1.（1）相对于浏览器位置
clientX //鼠标相对浏览器左侧的距离
clientY //鼠标相对浏览器顶部的距离
· 例 alert(ev.clientX);
（2）相对于事件源
IE
offsetX //距左侧的距离
offsetY //距顶部的距离
W3C （注意：添加layerX Y 时需要给事件源元素添加定位属性）
layerX
layerY
兼容写法 var l = ev.offsetX || ev.offsetY;
*/
</script>
放大镜
<style media="screen">
*{
margin:0;
padding:0;
}
#left{
position: relative;
width: 400px;
height: 400px;
background: url(./left.jpg);
margin:10px;
border:solid 2px blue;
float: left;
cursor:crosshair; /*改变鼠标指针的样式*/
}
#cover{
position: relative;
width: 400px;
height: 400px;
background-color: black;
opacity:0; /*W3C 透明度*/
filter: alpha(opacity=0); /*IE 透明度*/
}
#box{
position: absolute;
top: 0;
left: 0;
width: 220px;
height: 200px;
background-color: orange;
opacity:0.5;
filter: alpha(opacity=60);
display: none;
}
#right{
position: relative;
width: 440px;
height: 400px;
border: solid 2px gray;
top: 10px;
float: left;
overflow: hidden; /*将溢出部分隐藏*/
display: none;
}
#image{
position: absolute;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
var left = document.getElementById('left');
var box = document.getElementById('box');
var cover = document.getElementById('cover');
var image = document.getElementById('image');
cover.onmousemove = function(e){
// 获得事件对象
var ev = window.event || e;
// 获得鼠标相对父元素的位置
var mouse_left = ev.offsetX || ev.layerX;
var mouse_top = ev.offsetY || ev.layerY;
var box_left = mouse_left - 110 ;
var box_top = mouse_top - 100 ;
if(box_top < 0){
box_top = 0;
}
if(box_top > 200){
box_top = 200;
}
if(box_left < 0){
box_left = 0;
}
if(box_left > 180){
box_left = 180;
}
var right_left = box_left * (-2);
var right_top = box_top * (-2);
// 给色块赋值
box.style.left = box_left + 'px';
box.style.top = box_top + 'px';
// 给右侧图片赋值
image.style.left = right_left + 'px';
image.style.top = right_top + 'px';
}
// 给左侧加鼠标移入事件
cover.onmouseover = function(){
box.style.display = 'block';
right.style.display = 'block';
}
// 给左侧加鼠标移出事件
cover.onmouseout = function(){
box.style.display = 'none';
right.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="left">
<div id="box"></div>
<div id='cover'></div>
</div>
<div id="right">
<img src="./right.jpg" id='image'>
</div>
</body>
cursor:crosshair; /*改变鼠标指针的样式*/
opacity:0; /*W3C 透明度*/
filter: alpha(opacity=0); /*IE 透明度*/
overflow: hidden; /*将溢出部分隐藏*/
键盘事件
/*
键盘事件
1.
onkeydown 键盘按下事件
onkeyup 键盘抬起事件
onkeypress 键盘抬起并松开任意的数字或字母键
window.onkeydown = function(){
alert('你按下键盘了');
}
2.
keyCode 获得键盘码
altKey 判断 alt 键是否被按下,值为 true 或 false
ctrlKey
shiftKey
按 Ctrl 和回车键快速提交
window.onkeydown = function(e){
var ev = window.event || e;
if(ev.ctrlKey && ev.keyCode == 13){
alert('提交成功！');
}
}
*/
事件流 阻止元素默认事件
冒泡型事件流是由最明确的事件源到最不明确的事件源依次触发。
离鼠标越近，就表示越明确
1.
阻止事件流（事件对象）
IE: 事件对象.cancelBubble = true;
W3c: 事件对象.stopPropagation();
2.
阻止浏览器默认行为
IE: 事件对象.returnValue = false;
W3c: 事件对象.preventDefault();
让 a 标签不触发的做法
(1)
window.onload = function(){
document.getElementById('link').onclick = function(e){
var ev = window.event || e;
if(document.all){
ev.returnValue = false;
}else{
ev.preventDefault();
}
}
}
(2)
<a href="javascript:void(0)">点击这里</a>
日期对象
日期对象
1.
var time = new Date(); 代码执行时本地计算机的时间
2.
要注意月份，js 中月份是 0-11 来规定的，如果是平常的 7 月，那么写的时候应该写 6
var time = new Date(1990,6,6,12,59,0); 1990年7月（不是6月）6日12时59分00秒
3.
getFullYear() 获得日期对象中的年份
getMonth() 获得月份（0 ~ 11）
getDate() 获得日信息 （1 ~ 31）
getHours() 获得小时 （0 ~ 23）
getMinutes() 获得分钟数 （0 ~ 59）
getSeconds() 获得秒数 （0 ~ 59）
getDay() 获得日期是周几 （0 代表周天，1-6代表周1-6）
getTime() 获得日期与 1970 年 1 月 1 日 相差的毫秒数
*/
this 的用法
<script type="text/javascript">
// this用法
window.onload = function(){
var hd = document.getElementById('hd');
// this在事件中指向的是事件源对象
hd.onclick = function(){
this.style.background = 'orange';
}
}
</script>
visibility:hidden; 隐藏元素，但是元素的依然占位
tab 切换效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab 切换</title>
<style media="screen">
*{
margin:0;
padding:0;
}
#tab{
border: solid 2px gray;
margin: 10px auto;
width: 600px;
height: 580px;
position: relative;
}
ul li{
list-style: none;
float: left;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
}
#tab .con{
width: 580px;
height: 510px;
position: absolute;
left: 10px;
top: 60px;
margin: auto;
display: none;
}
</style>
<script type="text/javascript">
/*
思路：
有三个 li ,有三个 con ,希望达到的效果是，点击 0号 li ，就显示 0 号 con ,以此类推
循环所有的 li ,给每个 li 绑定一个事件，事件执行第 i 个 cons 被显示，其余的 cons
被隐藏。
问题：li 的序号如何被记录下来，用来设置第 i 个 cons 的属性？
1.错误思路：用循环 li 时候的 i 。（这个思路看上去是对的，其实不对）
（1）循环是在代码开始执行的瞬间从头到尾走一遍，并完成相应的操作（比如
给每个元素上绑定一个单击事件），然后结束
（2）触发点击事件的时候，循环已经结束了，循环过程中的参数早都用过了，无法再
去调用
2.正确思路：给每个 li 元素增加一个属性用来存储相应的序号，随时可供调用
for(var i=0;i<lis.length;i++){
lis[i].xuhao = i;
}
*/
window.onload = function(){
var tab = document.getElementById('tab');
var lis = tab.getElementsByTagName('li');
var cons = tab.getElementsByClassName('con');
// 循环所有的 li
for(var i=0;i<lis.length;i++){
// 给每一个 li 元素都添加一个属性 xuhao ,用来储存他的序号
lis[i].xuhao = i;
// 给每个 li 元素绑定事件
lis[i].onmouseover = function(){
// 让所有的 con 隐藏
for(var i=0;i<cons.length;i++){
cons[i].style.display = 'none';
}
// 让 i 号 con 显示出来
cons[this.xuhao].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li style='background: blue'>新闻</li>
<li style='background: green'>图片</li>
<li style='background: purple'>军事</li>
</ul>
<div class="con" style='background: blue;display:block'></div>
<div class="con" style='background: green'></div>
<div class="con" style='background: purple'></div>
</div>
</body>
</html>
轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style media="screen">
*{
padding: 0;
margin:0;
}
#tab{
border: solid 1.5px gray;
width: 1200px;
height: 535px;
margin:20px auto;
position: relative;
}
#tab img{
position: absolute;
top: 0;
left: 0;
display: none;
z-index: -1;
}
#tab ul {
position: absolute;
bottom: 23px;
left: 548px;
}
#tab ul li{
list-style: none;
width: 12px;
height: 12px;
float: left;
background: black;
border-radius: 6px;
margin-right: 8px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var tab = document.getElementById('tab');
var imgs = tab.getElementsByTagName('img');
var lis = tab.getElementsByTagName('li');
var c = 0; //总管变量
// 显示一组，隐藏其他函数（每执行一次，总管变量的值会变一下）
function run(){
c++;
if(c>4){
c = 0;
}
for(var i=0;i<imgs.length;i++){
imgs[i].style.display = 'none';
lis[i].style.background = 'black';
}
imgs[c].style.display = 'block';
lis[c].style.background = 'red';
}
// 让 run 函数跑起来的定时器
var timer = setInterval(run,1000);
// 给每个 li 绑定一个事件，显示一个隐藏其他
for(var i=0;i<lis.length;i++){
lis[i].xuhao = i;
lis[i].onmouseover = function(){
clearInterval(timer); //当事件被触发时清除掉定时器
// 隐藏掉所有的 img, 变黑所有 li
for(var j=0;j<lis.length;j++){
imgs[j].style.display = 'none';
lis[j].style.background = 'black';
}
imgs[this.xuhao].style.display = 'block';
lis[this.xuhao].style.background = 'red';
}
lis[i].onmouseout = function(){
timer = setInterval(run,1000);
c = this.xuhao; //从松开的地方开始计时
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<img src="./1.jpg" style='display:block;'>
<img src="./2.jpg" >
<img src="./3.jpg" >
<img src="./4.jpg" >
<img src="./5.jpg" >
</div>
</body>
</html>
