小试牛刀——JavaScript基础部分
二.属性操作,图片切换,短信发送模拟
2.1 HTML属性操作
html属性操作:读 写
属性名
属性值
属性读操作:获取 找到
元素.属性名
属性写操作: ("添加")替换,修改
元素.属性名=新的值
oP.innerHTML 读取元素内的所有HTML内容
oP.innerHTML=新值 替换元素内的所有HTML内容
2.2条件判断
if(条件){
...
}
if(条件){
}else{
...
}
if(条件1){
}else if(条件2...){
}else{
}
2.3 数组应用及实例应用
2.8 图片切换及函数合并扩展模拟短信作业
三.for应用,自动生成,this关键字
3.1 动态方法:ByTagName()
var oUl=document.getElementById("list") -- 静态方法
var aLi=oUl.getElementByTagName("li") -- 动态方法
document.getElementByTagName("li");
aLi.length
aLi[0]
3.2 ByTagName动态方法特性
前边可以放document,也可以用元素
是一堆元素的集合,[]访问
3.3 初识for循环
3.4 for循环执行顺序
for(var i=0;i<arr.length;i++){
}
3.5 for应用:选取 生成 性能
var str="";
for(var i=0;i<100;i++){
str+='<input type="button" value="按钮" />
}
document.body.innerHTML=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:这个
this:指的是调用当前方法(函数)的那个对象
window是JS老大
四.自定义属性,索引值
4.1 自定义属性,自定义一组开关应用
JS可以为任何的html元素添加任意个自定义属性
for(var i=0;i<arr.length;i++){
arr[i].onOff=true;
arr[i].onclick=function(){
if(this.onOff){
...
this.onOff=false;
}else{
...
this.onOff=true;
}
}
}
4.2 获取自身递增数字及匹配数组内容
var aBtn=document.getElementsByTagName("input");
var arr=['A','B','C','D'];
for(var i=0;i<aBtn.length;i++){
aBtn[i].num=0;
aBtn[i].onclick=function(){
this.value=arr[this.num]
this.num++;
if(this.num===arr.length){
this.num=0;
}
}
}
4.3 添加索引值 匹配数组 HTML元素
var aBtn=document.getElementsByTagName("input");
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
this.value=this.index;
}
}
4.4 图片切换综合实例
4.8 QQ菜单实例2:实现点击高亮显示,3道作业要求
五.JS数据类型,类型转换
5.1 JS数据类型及相关操作
js中的数据类型 原始类型: Number String Boolean null undefined
引用类型:函数 对象(obj [] {} )
typeof 判断数据类型
str.charAt() 根据下标获取子字符串
5.2 数据类型转化Number
var a="100";
Number(a);//100
var a="";
Number(a)://0
var a=true;
Number(a);//0
var a=[];
Number(a);//0
var a="w";
Number(a);//NaN
5.3 parsetInt与parsetFloat的区别
var a="200px"
parsetInt(a)//20
var a="200.332px"
parseFloat(a);//200.332
5.4 Js中稀奇古怪的隐式类型转换
+ - * / %
++ --
><
!
==
5.5 isNaN应用实例
一旦程序中出现 NaN 肯定是进行了非法的运算操作
is Not a Number 不是数字
isNaN();//true false
5.6 数据类型转换所对应的小练习
六.函数传参,重用,价格计算
6.1函数传参 参数类型
函数传递参数 参数=js的数据类型 数字 字符串 布尔 函数 对象 未定义
6.2 传参应用 类型判断及多组
尽量保证HTML代码结构一致 可以通过父级选取子元素
把核心主程序实现,用函数包起来
把每组里不同的值找出来,通过传参实现
七.作用域,JS预解析机制
7.1 js作用域和预解析机制
作用域:
域:空间 范围 区域
逐行解读代码
7.2 全局与局部作用域解析 作用域链
由上到下 由内到外
- 预解析:var function 参数...
function a(){alert(4)}
a=....(未定义)X
遇到重名的:只留下一个
变量和函数重名了,就只留下函数 - 逐行解读代码
表达式:= + / *...
表达式可以修改预解析的值
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),? :
循环:while ,for
跳出:break , continue
什么是真,什么是假
真:非零的数字,字符串,true,函数,Object:[] {}(存在)
假:零,NaN,空字符串,false,null,未定义
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;i<arguments.length;i++){
n+=argumenst[i];
}
}
9.3 currentStyle与getComputedStyle应用
getComputedStyle(element).width/height/.... //获取计算机计算后的样式
background:url() red... 复合样式不要获取 单一样式不要做判断
不要有空格 不要获取未设置后的样式: 不兼容
getStyle(,'width');
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
9.4 setInterval详解,定时器管理,背景选择实例
定时器:时间概念
setInterval(函数,毫秒);//重复执行
clearInterval(timer) //清除
注意 : 定时器如果是由事件控制的 一定要先关后开 每次点击之前先清除一下
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;}
<input type="button" value="向前" id="btn1">
<input type="button" value="向后" id="btn2">
<div id="div1"></div>
<script>
/*
* obj 对象
* attr css属性 方向 宽高云云
* dir 步长
* target 目标
* endFn 回调函数
* */
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oDiv=document.getElementById("div1");
oBtn1.onclick=function(){
doMove(oDiv,"left",10,800,function(){doMove(oDiv,"top",10,500)});
}
oBtn2.onclick=function(){
doMove(oDiv,"left",10,0);
}
function doMove(obj,attr,dir,target,endFn){
dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=parseInt(getStyle(obj,attr))+dir;
if(speed>target&&dir>0||speed<target&&dir<0 ){
speed=target;
}
obj.style[attr]=speed+"px";
if(speed===target){
clearInterval(obj.timer);
endFn&&endFn();
}
},50)
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
</script>
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<len;i++){
str+='<div style="width:50px;height:50px;background:red;position:absolute;top:0px;left:'+i*60+'px;"></div>'
}
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()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
| 方法名 | 描述 |
|---|---|
| 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对象参数:
数字形式: new Date(2017,4,1,9,48,12);
字符串形式: new Date('June 10,2017 12:12:12');
月份取值:January February Match April May June July August September October November December
时间转换公式:
天:Math.floor(t/86400)
时:Math.floor(t%86400/3600)
分:Math.floor(t%86400%3600/60)
秒:t%60
时间戳: getTime()
返回从1970年1月1日0点0分0秒0毫秒
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开始
两个特点:两个参数会自动交换位置,所有的负数当0处理
总而言之,就记着str.subString(x,y)---从x开始截取到y结束 x<y - str.slice(x,y)---从x开始到y结束 可以支持负数
12.5 大小写转换,split分割字符串
- str.toUpperCase();------转化为大写
- str.toLowerCase();------转化为小写
- str.split('x'); 字符串分割成一个数组
12.6 split彩色文字效果实例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{width:300px;height:300px;border:1px solid red;padding:5px;}
span{padding:5px 15px;display:inline-block;margin:5px 0;}
</style>
</head>
<body>
<div id="div"></div>
<input type="text">
<input type="button" value="按钮">
<script>
var oDiv=document.getElementById("div");
var aInp=document.getElementsByTagName("input");
aInp[1].onclick=function(){
var str=aInp[0].value;
var arr=str.split("");
var color=["#f2a0a1","#c1e4e9","#5b7e91","#eaf4fc"];
for(var i=0;i<arr.length;i++){
arr[i]="<span style='background:"+color[i%color.length]+"'>"+arr[i]+"</span>";
}
oDiv.innerHTML=arr.join("");
}
</script>
</body>
12.7 高亮显示关键字实例,替换搜索关键字实例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{border:10px solid #ddd;width:360px;height:200px;background:#ebf6f7;font-size:14px;padding:6px;margin: 5px 0;}
span{background:#ff4;}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="button" value="替换">
<div id="div">
老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。
</div>
<script>
window.onload=function(){
var div=document.getElementById("div");
var text=div.innerHTML;
var input=document.getElementsByTagName("input");
input[2].onclick=function(){
var str=input[0].value;
var newStr=input[1].value;
if(!str) return;
div.innerHTML=text.split(str).join('<span>'+newStr+'</span>');
}
}
</script>
12.8 字符串方法总结,两道有趣的课后练习
var str = '字符串方法总结字符串方法总结www.com';
str.charAt(1); // '字'
str.charCodeAt(1); // 21619
String.fromCharCode(22937, 21619); // '妙味'
str.indexOf('m', 4); // 9
str.lastIndexOf('o'); // 16
'1000' < '2' // true
'1000' > 2 // true
str.substring(0, 4); // '字符串方'
str.slice(-3); // 'com'
str.toUpperCase(); // '妙味课堂-WWW.COM'
str.toLowerCase(); // '妙味课堂-www.com'
str.split('.', 2); // [ '字符串方法总结字符串方法总结www','com']
十三.JSon,数组方法,随机函数,数组去重
13.1 json数据格式及json语法
var json={name:'leo',age:'32'}
json.name-----leo
var json={name:'leo',age:'32'}
var json={'name':'leo','age':'32'}---安全系数高
13.2 for in遍历json语法
for( var attr in json){
console.log(json[attr])
}
13.3 数据定义及清空数据效率问题
arr.length="";
13.4 数组4个小宝贝方法与技巧
arr.push("abc")
arr.unshift("abc") ---IE6 7不支持
arr.pop("abc") -----如果不写任何参数 默认为1
arr.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()
arr.reverse()
数组去重splice()方法
var arr=[2,5,6,8,5,3,9,7,5,2,6];
for(var i=0;i<arr.length;i++){
for(var n=i+1;n<arr.length;n++){
if(arr[i]===arr[n]){
arr.splice(n,1);
}
}
}
随机产生100个从0-1000之间不重复的整数
var n=100;
for(var i=0,str=[];i<n;i++){
str.push(Math.round(Math.random()*n));
if(str.length>1){
for(var a=0;a<str.length;a++){
for( b=a+1;b<str.length-1;b++){
if(str[a]===str[b]){
str.splice(b,1);
n++;
}
}
}
}
}
str=str.join(" | ");
document.body.innerHTML=str;
为数组编写indexOf();方法
var arr=[6,9,3,8,7,4,5];
indexOf(arr,5);
function indexOf(arr,elem){
for(var i=0;i<arr.length;i++){
if(arr[i]===elem){
return i;
}
}
return -1;
}
冒泡排序
var arr=[5,26,3,59,18,22,66,37,42,26];
for(var n=1;n<arr.length;n++){
for(var i=0;i<arr.length-n;i++){
if(arr[i]>arr[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<arr.length-1;i++){
if(max<arr[i+1]){
max=arr[i+1]
}
}
console.log(max)
去掉数组中重复的元素(哈希去重),并统计原数组中每个值出现的次数,输出出现次数最多的那个字符和次数
var arr=[5,26,3,59,18,22,66,37,42,26,3,18,5,5];
var hash={};
for(var i=0;i<arr.length;i++){
if(hash[arr[i]]!==undefined){
hash[arr[i]]++;
}else{
hash[arr[i]]=1;
}
}
console.log(hash);//{3: 2, 5: 3, 18: 2, 22: 1, 26: 2, 37: 1, 42: 1, 59: 1, 66: 1}
arr=[];
var max=maxKey=0;
for(var key in hash){
arr[arr.length]=(key-=0);
if(hash[key]>max){
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;i<str.length;i++){
if(hash[str[i]]===undefined){
hash[str[i]]=1;
}else{
hash[str[i]]++;
}
}
var max=maxKey=0;
for(var key in hash){
if(hash[key]>max){
max=hash[key];
}
if(max===hash[key]){
maxKey=key;
}
}
console.log(hash)
console.log(max)
console.log(maxKey)
