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 name="abc">
    <img src="1.jpg">
</a>
锚点：含有名字属性的a连接叫锚点
<a name='top'></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()

<!DOCTYPE html>
<html>
<head>
	<title>表单事件</title>
</head>
<body>
	<form action="">
		<p>用户名：</p>
		<p><input type="text" value="xiaoming" id="tid"></p>
		<p><input type="submit" value="ok"></p>
	</form>
</body>
<script type="text/javascript">
	oTid = document.getElementById('tid');

	oTid.onfocus = function () {
		this.select();//1.表单内元素被选中
	}
	oTid.onkeydown = function (event) {
		kc = event.keyCode;
		document.title = kc;
		if(kc==32){
			this.blur();
		}//2.鼠标移开失去焦点
	}
	oTid.focus();//3.直接获取焦点
</script>
</html>

————————————————————————————————————————————
如何阻止表单默认行为
1.<a href=""></a>
return false;
<a href="javascript:;"></a>
2.<input type="submit">
return false;

第五课时

BOM定义（browser Object Model）浏览器对象模型：
1.window对象
属性：
frames  //窗口数组
opener  //打开我的那个窗口
top        //顶级窗口
方法:
alert();
confirm();
prompt();
setInterval();
clearInterval();
setTimeout();
clearTimeout();
____________________________________________________________
2.navigator浏览器特性
属性：useragent

<!DOCTYPE html>
<html>
<head>
	<title>检查浏览器内核</title>
</head>
<body>

</body>
<script type="text/javascript">
	nav = navigator.userAgent;
	ntype = nav.match(/chrome|firefox|trident/i);
	switch(ntype[0]){
		case 'Chrome':
			document.body.style.background = '#f00';
			break;
		case 'Firefox':
			document.body.style.background = '#0f0';
			break;
		case 'Trident':
			document.body.style.background = '#00f';
			break;
	}
</script>
</html>

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()

————————————————————————————————————
元素对象标准属性：（应该有的属性）
<form action="" method=""></form>
1.obj.id
2.obj.className
3.obj.style
4.obj.title

——————————————————————————————
元素对象非标准属性：
<form action="" method="" age="5" sex="nv" index="3"></form>
,其中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;