Javascript复习大纲重点难点详细总结
第一课时
何为js特效：
1.定义时间（触发时机+行为）
2.触发事件（行为发生）
3.事件发生具有重复性
————————————————————————————
面向对象编程：（js是一门基于对象的语言）
1.如何获得该对象
2.如何调用该对象的属性
3.如何调用该对象的方法
————————————————————————————
对象的组成部分：
1.属性（特性）
2.方法（行为）
————————————————————————————
js标签放置位置（执行顺序）
1.内联
2.内部
3.外部
_______________________________________________________
定义变量：
var str = '小金'
________________________________________________________
输出变量：
alert("my name is "+str)
document.write("my name is "+str);
__________________________________________________________
js注释
1.//单行注释
2./* */多行注释
_____________________________________________________________
js变量类型
1.字符串 var a = '小金'
2.整型 var a = 100 进行数值运算
3.浮点 var a = 100 .1 (小数)
4.布尔 true 和false
5.数组 ps = new Array('小金','小帅','小明','小苏')
ps = ['小金','小帅','小明','小苏']
6.对象 js对象：
obj = new Object();
obj.username = 'user1';
obj.say =function(){
alert(1);
}
和dom对象:
eleobj = document;
7.json对象
jsonObj = {
'username':'user1',
'age':'20',
'sex':'nan',
'say':function(){
alert(1);
},
}
8.NaN （not a number）str = '10abs'
num = Number(str)
9.null :空。无值 str = null(下文可能会用到的变量)
10.undefined 变量未定义
____________________________________________________________________
定义函数：
1.传统定义方法
function say(){
alert(1);
}
2.匿名定义方法
say = function(){
alert(1);
}
___________________________________________________
调用函数
say();
——————————————————————————————
变量作用域：
1.全局变量
变量定义时前面如果没有var则全部都是全局变量
2.局部变量
只有在函数内部前面带var的变量为局部变量，局部变量只能在函数体内使用
——————————————————————————————————————
第二课时
变量类型测试：
1.typeof();
//typeof()可判断的类型：
1.string
2.number
3.boolean
4.object
5.undefined
2.arr instanceof Array;可以测试数组类型
arr = [1,2,3];
alert(arr instanceof Array); //true
______________________________________________________________
顶级全局方法
typeof(); //
parseInt(); //强制转整型
parseFloat(); //强制转浮点型 '10px'---->'10'
Number(); //将字符转换为数字
String(); //将整型转字符串
Boolean(); //转布尔值true 1 false 0
eval（）执行字符春表达式
b='a=1+1';
eval(b);
alert(a);//2
__________________________________________________________________
js中前面的对象不用写的两种情况：
1.Global对象（js内部对象）
typeof();
parseInt();
parseFloat();
Number();
String();
Boolean();
eval（）
2.window对象（浏览器提供的对象）
alert();
______________________________________________________________________
变量类型转换
1.整型转字符串
1）String();
2） num+'';
2.字符串转整型
1）parseInt();
2）Number();
3.所有类型-->布尔类型
1）v = ' ';
b = Boolean(v);
2）v = ' ';
b = !!v;
4.所有类型-->布尔类型（为假的情况）
1）字符串（‘’）
2）整型（0）
3）浮点型（0.0）
4）null
5）NaN
6）undefined
5.json字符串转json对象
v = "{'username':'user1','age':'20'}";
obj = eval('('+v+')');
alert(obj);
_______________________________________________________________________
变量运算符：
1.+-*/
2.in：
1）判断一个属性是否在对象身上
v = "{'username':'user1','age':'20'}";
alert('username' in obj);//true
2）判断数组中的下标在不在数组上
arr = ['a',''b,'c'];
alert(2 in arr);//false 2为下标 （0,1,2）
3.instanceof ：检查某个对象是否由某个构造函数产生的
4.delete:删除变量
v = 'abc';
delete v;
alert(v);//报错，v被删除； 但delete不能删除局部变量
——————————————————————————————————
js语法
1.ifElse语句
2.switch语句
3.while循环
4.for循环
5.forIn遍历（针对于json）
———————————————————————————————————
消息框：
1.弹出框alert()
2.确认框confirm('你确认删除吗')
3.提示框promp('请输入图片的名字')
第三课时
js内置对象
1.数学对象
属性：Math.PI;//圆周率
方法：Math.ceil();//上一个整数（入）
Math.floor();//下一个整数
Math.round();//四舍五入
Math.random();//随机数（0-1之间的一个小数）
Math.max(1,100,2);//100
Math.min(1,100,2);//1
—————————————————————————————
2.日期对象
1）生成对象
dobj = new Date();
2）方法
year = dobj.getFullYear();
month = dobj.getMonth();
day= dobj.getDate();
hour= dobj.getHours();
minute= dobj.getMinutes();
second= dobj.getSeconds();
str = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
alert(str);//获取年月日时分秒
_____________________________________________________________________
3.定时器（周期性）
1）定义
var timer = null;
timer = setInterval(func,1000);
2）清除
oBtn.onclick = function(){
clearInterval(timer);
}
————————————————————————————————————
4.超时器（一次性任务）
1）定义
timer = setTimeout(func,1000);
2）清除
clearTimeout(timer);
_________________________________________________________________
5.字符串
1)属性：
length
2)方法:
str = 'linux';
indexOf('n'); //2检索某一个字符在大字符串里的位置 下标
lastIndexOf(); //检索最后一个字符的位置
substr(0,5); //字符串截取 (1,3) 从1位置截取3个
slice(start,end); //（1,3）从1开始截取到3，不包含最后一个 -1为最后一个
split(reg); //('.')以.分割开，字符串分割成数组
search(reg); //检查字符串在文中的位置（正则）
search(reg|正则表达式) //字符串差债 i忽略大小写
match(reg|正则表达式);//把字符串中的所有reg都匹配出来 g全部都显示出来
replace(reg|正则表达式,"str"); //替换 把reg替换为str
split也支持正则分割
截取文件中的目录部分代码：
str = '/web/home/index.php'
pos = str.lastIndexOf('/');
dir = str.substr(0,pos);
alert(dir); //目录web/home
file = str.substr(pos+1);
alert(file); //文件名index.php
pos1 = str.lastIndexOf('.');
file1 = str.substr(pos1+1);
alert(file1); //后缀 php
str = '2019-2+18'
str.split('-|+'); //正则以-或+分割成数组 2019,2,18
函数返回值：
return val；
function(){
return val;
}
字符串转大写：str.toUpperCase();
字符串转小写：str.toLowerCase();
———————————————————————————————————————
6.数组
1）属性：
length
2）方法：
join("/"); //把一个数组用/连起来成一个字符串
pop() //把数组最后一个值弹出，并改变原数组
push() //从数组从最后插入一个值，并改变原数组
shift() //把数组最前面弹出一个值，并改变原数组
unshift() //从数组从最前插入一个值，并改变原数组
reverse() //反转原数组，不改变原数组
contact() //连接两个数组
arr = ['1','2']
arr1 = ['3','4']
arr2 = arr.contact(arr1);
alert(arr2); //1,2,3,4
slice(start,end) //从哪开始，到哪结束，但不包括最后一个
sort(show) //排序
show(a,b){
return a-b; //升序asc
return b-a; //降序desc
}
splice() //从哪开始，到哪结束，但不包括最后一个
————————————————————————————
运算符
1）数学运算符：
+-*/%
2）比较运算符：
>, <,==,!=,>=,<=
3）逻辑运算符
&&，||，！与（两边都为真则为真）或（一边为真则为真）非
——————————————————————————
正则表达式
腾讯课堂视频：https://ke.qq.com/webcourse/index.html#cid=190052&term_id=100225123&taid=1065242083911268&vid=a1416r5u6qe
js对象：
1.js内置对象
2.js时间对象
3.BOM浏览器对象
4.DOM文档对象
第四课时
js特效：
1.触发事件
2.属性改变
3.样式改变
————————————————————————————————
绑定事件：
1.标签身上
2.js代码中
————————————————————————————————
鼠标事件：
onclick
ondblclick //双击
onmouseenter //鼠标移入
onmouseleave //鼠标移除
onmousemove //鼠标移动
——————————————————————————————————
键盘事件：
onkeydown
onkeyup
onkeypress
_________________________________________________________
获取的3个高度
1.有效的高 屏幕可视的高
document.documentElement.clientHeight
2.屏幕的总高度
document.documentElement.scrollHeight
3.滚动的高度
document.documentElement.scrollTop
document.body.scrollTop(chrome)
___________________________________________________________
表单事件：
onfocus //获得焦点时触发的事件
onblur //鼠标移开，失去焦点
onchange //当表单元素的值发生改变
onselect //选中表单元素的时候执行
onsubmit //当表单提交的时候
obj.onsubmit = function(){
r = confirm('你确认提交表单吗？');
if(!r){
return false;
}
onreset //当表单重置的时候
obj.onreset = function(){
r = confirm('你确认清除表单数据吗？');
if(!r){
return false;
}
小例子onkeyup实现预览效果
________________________________________________________
其他事件：
onload //网页是否加载完毕，图片是否加载完毕
onerror //当图片加载失败的时候
onresize //当浏览器的大小发生改变的时候
onscroll //当滚动条滑动的时候
<--浏览器回到顶点
区分浏览器内核
-->
function isChrome(){
nu = navigator.userAgent;
if(nu.match(/chrome/i)){
return true;
}else{
return false;
}
}//封装函数是否是谷歌浏览器
window.onscroll = function(){
if(isChrome()){
st = document.body.scrollTop;//谷歌
document.title = st;
}else{
st = document.documentElement.scrollTop;//谷歌
document.title = st;
}
}
锚点：含有名字属性的a连接叫锚点
#top锚点回到顶部兼容性最高网页加载：
1.标签加载完毕 js代码放body后边
2.窗口加载完毕（图片）window.onload = function(){}
position3个定位置
1.absolute
2.relative
3.fixed
position4个定位
1.左上角(top,left)
2.右上角(top,right)
3.左下角(bottom,left)
4.右下角(bottom,right)
_____________________________________________________________________________
事件方法：（事实上每一个事件对应一个方法）
1.select()
2.blur()
3.focus()
4.click()
5.submit()
6.reset()
表单事件
————————————————————————————————————————————
如何阻止表单默认行为
1.
return false;
2.
return false;
第五课时
BOM定义（browser Object Model）浏览器对象模型：
1.window对象
属性：
frames //窗口数组
opener //打开我的那个窗口
top //顶级窗口
方法:
alert();
confirm();
prompt();
setInterval();
clearInterval();
setTimeout();
clearTimeout();
____________________________________________________________
2.navigator浏览器特性
属性：useragent
检查浏览器内核
3.screen屏幕对象
4.history对象
5.location地址栏
DOM(document object model) 文档对象模型
1.document
2.document.documentElement
3.document.head
4.document.title
5.document.body
——————————————————————————————————
获取元素对象方法：
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByNamed()
————————————————————————————————————
元素对象标准属性：（应该有的属性）
1.obj.id
2.obj.className
3.obj.style
4.obj.title
——————————————————————————————
元素对象非标准属性：
,其中age,sex,和index是非标准属性
1.obj.getAttribute('age');
2.obj.setAttribute('age','50');
——————————————————————————————————
元素对象js属性
1.obj.tagName //获取标签名
2.obj.innerHTML //获取标签所有的内容
3.obj.outerHTML //获取标签全部内容
4.obj.textContent //获取标签名所有的文本内容，标签除外
————————————————————————————————————————
直接获取dom元素对象集合：
1.document.links; //集合
2.document.images;
3.document.forms;
4.document.anchors; //锚点
5.tableObj.rows;
6.tableRowObj.cols;
7.selectObj.options;