二.属性操作,图片切换,短信发送模拟
2.1 HTML属性操作
html属性操作:读 写
属性写操作: ("添加")替换,修改
2.2条件判断
if(条件){
if(条件){
if(条件1){
2.3 数组应用及实例应用
2.8 图片切换及函数合并扩展模拟短信作业
三.for应用,自动生成,this关键字
3.1 动态方法:ByTagName()
var oUl=document.getElementById("list") -- 静态方法
3.2 ByTagName动态方法特性
前边可以放document,也可以用元素
3.3 初识for循环
3.4 for循环执行顺序
for(var i=0;i }
3.5 for应用:选取 生成 性能
var str="";
3.6 for循环生成坐标
3.7 for循环遍历2维数组,嵌套
3.8 cssText文本格式化与属性操作
oDiv.onclick=function(){
//oDiv.style.width='200px';
oDiv.style.cssText='width:200px;height:200px;
}
//cssText没有太大兼容性问题 比较好用 没有改变原属性
3.9 综合实力:生成一组新闻及思路分析
3.10 this指向及this应用
this:这个
四.自定义属性,索引值
4.1 自定义属性,自定义一组开关应用
JS可以为任何的html元素添加任意个自定义属性
for(var i=0;i4.2 获取自身递增数字及匹配数组内容
var aBtn=document.getElementsByTagName("input");
var arr=['A','B','C','D'];
for(var i=0;i4.3 添加索引值 匹配数组 HTML元素
var aBtn=document.getElementsByTagName("input");
for(var i=0;i4.4 图片切换综合实例
4.8 QQ菜单实例2:实现点击高亮显示,3道作业要求
五.JS数据类型,类型转换
5.1 JS数据类型及相关操作
js中的数据类型 原始类型: Number String Boolean null undefined
5.2 数据类型转化Number
var a="100";
5.3 parsetInt与parsetFloat的区别
var a="200px"
5.4 Js中稀奇古怪的隐式类型转换
+ - * / %
5.5 isNaN应用实例
一旦程序中出现 NaN 肯定是进行了非法的运算操作
5.6 数据类型转换所对应的小练习
六.函数传参,重用,价格计算
6.1函数传参 参数类型
函数传递参数 参数=js的数据类型 数字 字符串 布尔 函数 对象 未定义
6.2 传参应用 类型判断及多组
尽量保证HTML代码结构一致 可以通过父级选取子元素
七.作用域,JS预解析机制
7.1 js作用域和预解析机制
作用域:
7.2 全局与局部作用域解析 作用域链
由上到下 由内到外
预解析:var function 参数...
逐行解读代码
alert(a);// function a(){alert(4)}
var a=1;
alert(a);//1
function a(){alert(2)}
alert(a);//1
var a=3;
alert(a);//3
function a(){alert(4)}
alert(a);//3
7.3 调用局部数据 全局声明 for嵌套函数中i取值
var a=1;
function fun(a){
alert(a);//1
a=2;
}
fun(a);
alert(a);//1
八.运算符,流程控制
运算符流程控制
判断: if,switch(case break default),? :
var str="css"
switch(str){
case "js" : alert("js");
break;
case "html" : alert("html");
default;
case "css" : alert(str);
}
//三目
alert(12<450?"120<450":"120!<450")
//while循环
var i=0;
while(i<3){
alert(i);
i++
}
//for循环
for(var i=0;i<3;i++){
if(i===2){
break;
//continue;
}
alert(i);
}
九.return,定时器基础
9.1函数返回值 return详解应用
return返回值 :数字 字符串 布尔 函数 对象.......(元素 [] {} null) 未定义----数据类型
函数名+括号: fn1()==>return后面的值;
所有函数默认返回值:未定义(undefined)
return 后面的任何代码都不执行了;
9.2 arguments实参集合与局部变量,参数关系
arguments是实参 形参可以不要---实参的集合(类数组集合)
sum(1,2,3);
sum(1,2,3,4);
function sum(){
var n=0;
for(var i=0;i9.3 currentStyle与getComputedStyle应用
getComputedStyle(element).width/height/.... //获取计算机计算后的样式
getStyle(,'width');
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
9.4 setInterval详解,定时器管理,背景选择实例
定时器:时间概念
注意 : 定时器如果是由事件控制的 一定要先关后开 每次点击之前先清除一下
9.5 setTimeout详解,弹窗广告实例(写在demo里)
9.6 定时器应用-自动切换焦点图,qq延时菜单实例(写在demo里)
十.定时器管理,函数封装
10.1 定时器管理-开关设置
要明白定时器使用规则 每次定时器执行时 要先清除定时器
10.2,10.2 函数封装的传参,判断处理,正负值的处理,添加毁掉函数
div{width:60px;height:60px;background:red;position:absolute;left:0;top:35px;}
10.4 doMove应用小练习
引入以上封装js
window.onload=function(){
var str="";
var len=10;
var aDiv=document.getElementsByTagName("div");
var timer=null;
var num=0;
var onOff=true;
for(var i=0;i '
}
document.body.innerHTML=str;
document.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
if(onOff){
doMove(aDiv[num],'top',30,500);
num++;
if(num===len){
clearInterval(timer);
onOff=false;
num=0;
}
}else{
doMove(aDiv[num],'top',30,0);
num++;
if(num===10){
clearInterval(timer);
onOff=true;
num=0;
}
}
},200)
}
}
10.5 抖动原理及实现过程
需要引入以上封装js
img{width:260px;height:auto;display:block;position:absolute;top:100px;left:250px;}
window.onload=function(){
var oImg=document.getElementById("img1");
oImg.onclick=function(){
var pos=parseInt(getStyle(oImg,"left"));
var arr=[];
var timer=null;
var num=0;
for(var i=20;i>0;i-=2){
arr.push(i,-i)
}
arr.push(0);
clearInterval(timer);
timer=setInterval(function(){
oImg.style.left=pos+arr[num]+"px";
num++;
if(num===arr.length){
clearInterval(timer)
}
},50)
}
}
10.6 抖的函数封装及隐患,修复及练习
img{width:260px;height:auto;display:block;position:absolute;top:100px;left:250px;}
window.onload=function(){
var oImg=document.getElementById("img1");
var onOff=true;
oImg.onmouseover=function(){
shake(oImg,'top')
}
function shake(obj,attr,endFn){
if(onOff){
clearInterval(obj.timer);
onOff=false;
var num=0;
var arr=[];
var pos=parseInt(getStyle(obj,attr));
for(var i=20;i>0;i-=2){
arr.push(i,-i)
}
arr.push(0);
obj.timer=setInterval(function(){
oImg.style[attr]=pos+arr[num]+"px";
num++;
if(num===arr.length){
clearInterval(obj.timer);
endFn&&endFn();
onOff=true;
}
},50)
}
}
}
/*
* 心得:如何在一次事件没有执行完毕之前避免当时再次执行该事件 找了两种方法
* 第一种方法:定义一个开关,让它为true,在true的条件下执行事件 执行过程中开关为false 执行完毕开关再变回true
* 第二种方法:定义一个遮罩层,再第一次事件执行的时候生成 然后就可以防止再次执行事件穿透 第一次事件执行完毕遮罩层删掉云云
*
* */
十一.日期对象,时钟倒计时
11.1系统时间对象
系统时间对象 new Date() -----当前系统的时间对象
方法名
描述
getFullYear()
返回Date对象"年份"部分的实际数值
getMonth()
返回Date对象"月份"部分的数值(0-11)
getDate()
返回Date对象"日期"部分数值(1-31)
getDay()
返回Date对象"星期"部分的数值(0-6)
getHours()
返回Date对象"小时"部分的数值(0-23)
getMinutes()
返回Date对象"分钟"部分的数值(0-59)
getSeconds()
返回Date对象"秒"部分的数值(0-59)
getMilliseconds()
返回Date对象"毫秒部分的数值(0-999)"
getTime()
返回Date对象与UTC时间1970年1月1日午夜之间相差的毫秒数
getTimezoneOffset()
返回本地时间与格林威治标准时间(GMT)的分钟差
修改时间信息
setFullYear()
设置Date对象中"年份"部分的实际数
setMonth()
设置Date对象中"月份"部分的数值(0-11,但不限于)
setDate()
设置Date对象中"日期"部分的数值(1-31,但不限于)
setHours()
设置Date对象中"小时"部分的数值(0-23,但不限于)
setMinutes()
设置Date对象中"分钟"部分的数值(0-59,但不限于)
setMilliseconds()
设置Date对象中"毫秒"部分的数值(0-999,但不限于)
setTime()
以毫秒值设置Date对象
时间格式转换
toString
返回Date对象的字符串形式
toDateString()
返回Date对象"日期"部分(年月日)的字符串形式
toTimeString()
返回Date对象"时间"部分(时分秒)的字符串形式
toLocaleString()
基于本地时间格式,返回Date对象的字符串形式
toLocalDateString()
基于本地时间,返回Date对象"日期"部分(年月日)的字符串形式
toLocalTimeString()
基于本地时间格式,返回Date对象"时间"部分(时分秒)的字符串形式
toGMTString()
基于GMT时间格式,返回Date对象的字符串形式
toUTCString()
基于UTC时间格式,返回Date对象的字符串形式
11.3 倒计时原理
Date对象参数:
11.4 倒计时实例
function fnTime(){
var iNow=new Date();
var iNew=new Date(2018,0,2,18,0,0);
var t=Math.floor((iNew-iNow)/1000);
var str=Math.floor(t/60/60/24)+"天"+Math.floor(t%86400/3600)+"时"+Math.floor(t%86400/60)+"分"+Math.floor(t%60)+"秒";
document.body.innerHTML="距离下班还有: "+str;
}
fnTime();
setInterval(function(){
fnTime();
},1000)
十二.字符串,查找高亮显示
12.1 字符串获取类,封装检测数字的方法
str.charAt()------对应下标的内容
str.charCodeAt()------对应下标内容的编码
String.fromCharCode(22937)----根据编码转换为字
12.2 fromCharCode返回字符串实例,字符串加密
12.3 indexOf,lastIndexOf
str.indexOf('x',1) ----从左往右找,第一个参数是一个字符串,默认从0开始查找 ,如果有第二个参数数字就从数字指定的位置开始查找 返回-1表示没找到
str.lastIndexOf('x')----从右往左找 如果第二个参数为负数,默认当成0来处理
12.4 比较类,截取类,substring应用实例
subString()------默认从0开始截取全部,可以检测两个数,小的自动放前边,如果有一个参数为负数 默认从0开始
str.slice(x,y)---从x开始到y结束 可以支持负数
12.5 大小写转换,split分割字符串
str.toUpperCase();------转化为大写
str.toLowerCase();------转化为小写
str.split('x'); 字符串分割成一个数组
12.6 split彩色文字效果实例
Title
12.7 高亮显示关键字实例,替换搜索关键字实例
Title
老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。
12.8 字符串方法总结,两道有趣的课后练习
var str = '字符串方法总结字符串方法总结www.com';
十三.JSon,数组方法,随机函数,数组去重
13.1 json数据格式及json语法
var json={name:'leo',age:'32'}
13.2 for in遍历json语法
for( var attr in json){
13.3 数据定义及清空数据效率问题
arr.length="";
13.4 数组4个小宝贝方法与技巧
arr.push("abc") arr.unshift("abc") ---IE6 7不支持arr.pop("abc") -----如果不写任何参数 默认为1arr.shift("abc") -----如果不写任何参数 默认为1
一种排队的方法
var arr=["小乔","大乔","武则天","诸葛亮","阿珂"];
arr.unshift(arr.pop())
13.5 splice方法,数组去重
//删除 替换 添加arr.splice() 从几开始 删除几个 用于替换或添加内容 取决于第二个参数 如果为0 则是添加 否则为替换
13.6 sort排序
arr.sort() ---字符串的比较arr.sort(function(a,b){return a-b}) ----从小到大arr.sort(function(a,b){return b-a}) ----从大到小
var arrWidth=["345px","58px","90px","1000px"]
arrWidth.sort(function(a,b){
return parseInt(a)-parseInt(b);
})
console.log(arrWidth)//["58px", "90px", "345px", "1000px"]
随机排序
arr.sort(function(a,b){
return Math.random()-0.5;
})
13.7 随机数及随机公式推理过程
Math.round(Math.random()*(max-min)+min)
13.8 concat,reverse,面试题及练习
arr.concat()
数组去重splice()方法
var arr=[2,5,6,8,5,3,9,7,5,2,6];
for(var i=0;i随机产生100个从0-1000之间不重复的整数
var n=100;
for(var i=0,str=[];i1){
for(var a=0;a 为数组编写indexOf();方法
var arr=[6,9,3,8,7,4,5];
indexOf(arr,5);
function indexOf(arr,elem){
for(var i=0;i冒泡排序
var arr=[5,26,3,59,18,22,66,37,42,26];
for(var n=1;narr[i+1]){
arr[i]+=arr[i+1];
arr[i+1]=arr[i]-arr[i+1];
arr[i]-=arr[i+1]
}
}
}
console.log(arr)
找最大
var arr=[5,26,3,59,18,22,66,37,42,26];
var max=arr[0];
for(var i=0;i去掉数组中重复的元素(哈希去重),并统计原数组中每个值出现的次数,输出出现次数最多的那个字符和次数
var arr=[5,26,3,59,18,22,66,37,42,26,3,18,5,5];
var hash={};
for(var i=0;imax){
max=hash[key]
}
if(max===hash[key]){
maxKey=key;
}
}
console.log("输出次数最多的数字是:"+maxKey+" 次数为: "+max);//输出次数最多的数字是:5 次数为: 3
console.log(arr);//去重后 :[3, 5, 18, 22, 26, 37, 42, 59, 66]
统计字符串中每个字符出现的次数,并输出出现次数最多的那个字符
var str="zheshiyigetebiemeidedifang";
var hash={};
for(var i=0;imax){
max=hash[key];
}
if(max===hash[key]){
maxKey=key;
}
}
console.log(hash)
console.log(max)
console.log(maxKey)
