js学习笔记(1)
-
字面量（常量）；
-
--元素.style.属性=xxx是修改行间样式
--之后再修改className不会有效果。className控制id.
-
style加样式 行间
-
从style取样式 行间
-
-
样式优先级-------* < 标签 < class < 行间
-
function 名字()
{
...........
}
obtn onclick=名字
obtn onclick=function()
{
。。。。。。。。。
}
以上三种方法结果都相同。
-
window.onload 页面加载完成的时候发生
-
获取一组元素：getElementsByTagName
-
数组的使用
-
里面的
for(var i=0;i<aDiv.length;i++) { aDiv[i].style.background='red'; }//i<div的长度，可以让样式的变化动态，即只需要修改div就行
-
-
this
js的组成
ECMAScript(解释器、翻译,把人看懂的代码翻译成计算机能看懂的代码)+---------几乎没有兼容性问题
Bom（浏览器，window）+----------有一些兼容性问题
Dom（赋予js操作html的功能,document）-----------没有兼容
-
常见数据类型：数字（number）、String boolean undefined object function
一个变量应该只存放一种类型的数据
-
显式类型转换：
-
parseInt:字符串改成数字。特性：浏览器从左到右解析，遇到不是数字的就直接输出。字符串输入字母的时候，输出NaN.------------NaN和NaN不相等。
-
parseFloat：字符串转小数。
-
-
隐式转换
-
==（字面量）---------先转换类型，然后比较
-
===（全等）-------------不转换类型，直接比较
-
减法。因为在js中没有字符串相减的功能，所以计算机在处理两个字符串相减时只能是计算。
-
-
局部变量：只能在定义它的函数里使用。
-
闭包：子函数可以使用父函数的局部变量。
-
% 应用：隔行变色、秒转时间
<script type="text/javascript"> window.onload=function() { var aLi=document.getElementsByTagName('li');for(var i=0;i<aLi.length;i++)
{
//i 0 1 2
if(i%2==0)
{
//0 1 2 3 4 5 6
aLi[i].style.background='#CCC';
}
else
{
//1 3 5 7 9
aLi[i].style.background='';
}
}
}; -
<script type="text/javascript"> var s=156; alert(parseInt(s/60)+'分'+s%60+'秒'); </script>
-
&& 与、 ||或、 ！否-------实例：全选，全不选
-
json 与数组的区别：
-
json下标是字符串，alert{json['a']}; 数组下标是数字alert{arr[0]};
-
json没有length.数组有length.所以json需要用循环，
数组：for 0 - len
json: for in
for(var i=0;i<arr.length;i++){} 等于 for(var i in arr){}
-
-
函数返回值：可以把函数的东西传到外面来。
json可以让函数同时返回多个东西。
-
arguments 可变参 不定参（参数的个数是不定的），其实就是一个数组
<script type="text/javascript"> function sum() { var result=0;for(var i=0;i<arguments.length;i++)
{
result+=arguments[i];
}
return result;
}
alert(sum(12,2,2,2,2,2,2,2,2,2,2,2,2,2,)); -
css()函数 判断arguments.length，给参数取名，增强可读性
css(oDiv,'width') 两个参数是获取样式
css(oDiv,'width'，‘200px’) 三个参数是设置样式
-
取非行间样式（不能用来设置）
-
obj.currentStyle[attr]
-
getComputedStyle(obj,false)[attr]
-
不能取复合样式
-
复合样式：background、border 简单样式：width、height
-
-
js第二定律：但凡好东西一定不兼容；大多数兼容问题都是用if解决的
-
为了每次取样式的时候方便点，不需要每次都写if.....else，可以把常用的功能封装成一个函数，每次需要的时候直接调用。
-
数组使用原则：数组中应该只存一种类型的变量。
-
push() 尾部添加) pop() 尾部删除）
-
unshift() (头部添加) shift() (头部删除)
-
splice(起点，长度)，从中间删除（先删除，再插入）
-
concat() 数组连接-------alert(a.concat(b));
-
join（分隔符）-------用分隔符，组合数组元素，生产字符串
-
sort(比较函数)-----sort只认识字符串，在数字排序时，需要帮助sort认识字符串以外的东西。
<script type="text/javascript"> var arr=[12,8,9,19,112];arr.sort(function(n1,n2){
//第二种方法
return n1-n2;
-
-
•
•
// 第一种方法
// if(n1<n2)
// {
// return -1;
// }
// else if(n1>n2)
// {
// return 1;
//
// }
// else{
// return 0;
// }
• });
•
```javascript
alert(arr);
</script>
```
17. 定时器的作用
- 开启定时器
- setInterval 间隔型
- setTimeout 延时型
- 停止定时器
- clearInterval
- clearTimeout
### js是单线程，所以也可以说是主线程，所以js代码都是在主线程执行的，
只不过我们要区分它是同步执行还是异步执行；
当一个代码是异步的话，对应的是回调函数。
不同的任务对应不同的回调，比如：定时器的回调，发送js的回调，对应事件的回调
定时器模块，网络请求模块，事件处理模块，回调的执行取决于模块什么时候将回调函数放入到事件队列eq，
js引擎会通过轮询方式去询问这个事件队列是否有可执行的回调，如果有，就会将函数钩出去，钩到主线程去执行。
所以回调函数也叫钩子函数。
*
* */
/*
宏任务
分类：setTimeout setInterval
requestAnimationFrame(用于提前告诉提醒浏览器我们将要在下一次进行动画之前，帮我们调用对应的回调函数)
* 它们都是异步任务的同时又是宏任务
*
* 1.宏任务所处的队列就是宏任务队列
* 2.第一个宏任务队列只有一个任务：执行主线程的js代码
* 3.宏任务队列可以有多个
* 4.当宏任务队列中的任务全部执行完之后会查看是否有微任务，
* 有则先执行微任务队列中的所有任务，
* 没有则查看是否有宏任务队列
* */
* 其实，在js执行过程中，分为一个主执行栈和一个任务队列。js的代码执行会在主执行栈中进行，遇到http请求和定时器等异步操作的时候会丢给对应线程执行。而每个异步任务都有一个回调函数，等到请求操作完成或者定时器数秒完成之后，会把对应的回调函数放入到任务队列中。而js主执行栈里面的内容为空后，就会来任务队列里面按队列顺序取一个函数到主执行栈里执行，等函数执行完成之后栈又空了，再来任务队列里取函数执行，如此反复循环直到任务队列和栈都为空，这就是所谓的事件循环机制EventLoop。
*
-
charAt()--可以获取字符串上的某一个位上的东西。用str.charAt(i)代替str.[i]，使得兼容低版本浏览器。
-
设置年 alert(oDate.getFullYear()); 设置月 alert(oDate.getMonth()+1);//计算机计算月份是从0开始的，所以要+1
设置日 alert(oDate.getDate());
设置星期 alert(oDate.getDay());--------周日是0.
-
offsetLeft.用来获取物体的左边距。特点：可以综合考虑所有影响这个物体位置因素之后的
出来的最终的结论。
offsetTop获取上边距
-
无缝滚动实现原理：让ul一直想左移动。
-
复制li-----------innerHTML和+= 修改ul的width
-
滚动过界后，重设位置---------判断过界。
-
-
DOM:---------在js中的docunment.
DOM节点：childNodes nodeType------------获取子节点，两个配合起来就可以循环所有子节点。并且不会出现文本节点。nodeType==1时是元素节点，2是属性节点，3是文本节点。
parentNode--------例子：点击链接、隐藏整个li
offsetParent-------例子：获取元素在页面上的实际位置
css中绝对定位是根据有定位的父级进行定位的，一直找到body为止。
父节点没有设置定位的时候，子节点会一直找定位。所以两个div以上的布局，都需要设置定位。
父节点设置相对定位的时候，所以一般都是父节点设置相对定位，子节点设置绝对定位。
-
首尾子节点：
firstChild（IE）、firstElementChild(高级浏览器)
有兼容问题的话，使用if...else判断
lastChild、lastElementChild
-
兄弟节点：
nextSibling nextElementSibling
previousSibling previousElementSibling
-
元素属性操作：
-
第一种：oDiv.style.display="block";
-
第二种：oDiv.style[ "display" ]="block";
-
第三种：dom方式
-
-
dom元素灵活查找：好处：可以批量化的去获取元素、还可以有选择性的、当页面发生变化的时候程序不会出错，除非连class也改了。
-
如何用className选择元素
-选出所有元素
-通过className条件筛选
-
封装成函数
-
-
使用封装的函数
创建节点，插入元素--------例如微博和论坛的评论，都是插入元素，并且插到内容前边，实时更新
这是插入到后边---------oUl.appendChild(oLi);
插入到前边-----------oUl.insertBefore(oLi,aLi[0]);不显示的代码同上。
ul本身没有li.所以没有第0个li
删除节点、删除元素： oUl.removeChild(this.parentNode);
文档碎片：就相当于袋子。
---------文档碎片可以提高DOM操作性能-
文档碎片原理
document.createDocumentFragment()
表格应用
tbody在不写的情况下浏览器也是可以显示出来的，推荐写。
表格在js中有便捷得操作，因为在90年代的时候div,ul还没有流行，用的大部分都是表格。
tBodies[0]与getElementsByTagName('tbody')[0]结果一样//tBodies相当于数组
rows[1]与getElementsByTagName('tr')[1]结果一样// 取这一行
cell[1]与getElementsByTagName('td')[1]结果一样// 取这一行里的所有单元格
隔行变色
表格的添加
优化上面的添加，因为上面的添加是通过行数来算的。以下是删除之后再添加不会出现错误。
优化表格应用1.忽略大小写
优化表格应用1.模糊搜索
同时搜索几个关键字原理：就是把要搜的字符串把它切开，切成几段，每段都分别找一次；循环j是关键。
js运动
-
运动框架原则：-
-
在开始运动时，关闭已有定时器
-
把运动和停止隔开（if/else）
if是到达终点后要做的事情。else是到达终点前要做的事情。
-
-
缓冲运动
-
逐渐变慢，最后停止
-
距离越远速度越大
-
速度由距离决定
-
速度=（目标值-当前值）/缩放系数
-
例子：缓冲菜单
-
speed不能是小数，计算机会自动忽略。添加代码（向上取整）---speed=Math.ceil(speed);
就能正确取到所选位置
总结：让物体动起来就是开一个定时器，让它往右走。速度在程序里是以变量而存在，速度可正（左）可负（右）
遇到的小bug:
1,运动不会停----因为没关定时器
2.速度取某些值停不下来----直接判断距离
3.到达位置后再点击还会运动---------因为点击之后定时又打开了
4.重复点击速度加快-----需要每次都先关闭定时器再打开
一. 多物体运动框架
-
多物体同时运动
-----多个div,鼠标移入变宽
-
每个div一个定时器
-
多物体运动框架
-
定时器作为物体的属性
-
参数的传递：物体，目标值
-
多个div淡入淡出
-
-
-
链式运动
-
回调函数
-
运动停止时，执行函数
-
运动停止时，开始下一次运动
-
-
完美运动框架总结：
-
框架演变过程：
-
startMove(iTarget) 运动框架----不能同时支持多个物体运动，不能随意的去指定让哪个值运动
-
startMove(obj,iTarget) 多物体
-
startMove(obj,attr,iTarget) 任意值
-
startMove(obj,attr,iTarget,fn) 链式运动--fn（fnEnd）最大的作用就是在我前一次运动结束之后可以利用它做好多事情，把事情分阶段。
-
startMove(obj,json) 多值运动
-
startMove(obj,json,fn) 完美运动框架
-
二.js事件
-
event对象和事件冒泡
-
event对象：鼠标位置、键盘按键
-
例子：获取鼠标位置：clientX
-
document的本质：document.childNodes[0].tagName
-
-
-
获取event对象
-
var oEvent=ev||event;
-
-
事件流
- 事件冒泡----就是最典型的事件流-----就是事件会顺着它的层级一直往它的父级上传，一直到document.
- 取消事件冒泡：oEvent.cancelBuble=true
- 例子：仿select控件
- DOM事件流
client需要配合scrollTop使用;
-
事件高级应用
-
事件绑定
-
IE方式
-
attachEvent(事件名称，函数)，绑定事件处理函数
-
detachEvent(事件名称，函数)，解除绑定
-
-
DOM方式
-
addEventListener(事件名称，函数，捕获)
-
removeEventListener(事件名称，函数，捕获)
-
-
何时使用事件绑定
-
绑定事件和this
-
绑定匿名函数，会无法删除
-
事件捕获的作用是把网所有的事件都集中在按钮身上。可以解决IE下的拖拽问题
-
-
三. Ajax
-
什么是ajax-----在自己本地下载wamp，文件都保存在www文件中
-
无刷新数据 读取
-
-
用户注册、在线聊天室
-
同步、异步
-
get----通过网址传输数据.
网址地址是限制长度的，一般在4k到10k.
所以get方式容量小...有缓存
post----通过http Content
容量大（2G）。。。。。无缓存
-
编写Ajax对象
-
创建Ajax对象----
-
ActiveXObject("Microsoft.XMLHTTP")----IE
-
XMLHttpRequest() ---这个才是ajax真正的对象----高级浏览器
-
连接服务器
-
open(方法，文件名，异步传输)
-
同步和异步
-
发送请求
-
send()
-
接收返回值
第四步主要关心的是oAjax.readyState 的值
0---------（未初始化，还没有调用open()方法）
1----------（载入）已调用send()方法，正在发送请求
2------------（载入完成）send()方法完成，已收到全部响应内容
3-------------(解析)正在解析响应内容
4-------------（完成）响应内容解析完成，可以在客服端调用了
-
一. 在js中，用没有定义的变量------报错----alert(a);
用没有定义的属性-----undefined----alert(window.a);
window.的都是属性
四.面向对象
-
面向对象：不了解原理的情况下，会使用功能。
-------使用对象时，只关注对象提供的功能，不关注其内部细节（不需要知道其工作原理）
--------对象：不了解内部的结构，知道表面的各种操作。（黑盒子）
-
js中的面向对象
-
抽象：抓住核心内容
-
封装：不考虑内部结构，只用功能
-
继承：从父类继承出一些方法、属性、子类，又有一些自己的特性。
-
多重继承
-
多态
-
-
-
对象的组成：变量，属性。
--------变量：自由的，不属于任何人
----------属性：属于一个对象
-
函数：自由------------function aaa(){};
方法：属于一个对象---------arr.aaa=function(){};\
给对象添加一个事件其实就是给它添加一个方法,只不过这个方法不是我们自己调用，而是系统在我们触发事件的时候调用。
oDiv.onclick=function(){};
-
this-----当前的方法属于谁，this就是谁
-
全局的方法是属于window下的。
-
-
-不能在系统对象中随意附加方法，属性，否则会覆盖已有方法、属性.
----------Object 没有功能，相当于一张白纸。
构造函数的功能是构造对象
-
构造函数 类似于 工厂模式-----工作流程和工厂很像。
工厂方式问题：1. 没有new 2.函数重复定义----一模一样的函数不能直接相等，就会平白占用系统大量资源。资源浪费。
------------解决办法
-
在调用函数前加new，就不需要手动创建，系统会替我们创建好。
也会不需要我们自己返回，系统会偷偷返回。
-
-
-
原型：给对象家属性
css中的class--------一次给一组元素加样式
行间样式------一次给一个元素加样式
js中的原型就相当于css中的class
类：模子
对象：产品（成品）
var arr=new Array(1,2,2,3);
Array 类
arr 对象
--------Array.push() 编写错误----Array仅仅是模子，不具备功能，
---------new arr() 编写错误---它仅仅能去用，不能当成模子去生成别的东西
-----------arr.push 编写正确
-
面向对象编程：
json---简单，但是不适合多个对象----适合整个程序只有一个对象。
把方法包在一个json里。
-
继承的好处：子类的功能跟父类有区别，只需要实现由区别的不一样的一部分就行了。
-
js宿主就是js的运行环境（浏览器）
当我们在node编写js的时候就是在后台进行了。
-
js的对象分类：
-
本地对象+内置对象是js本身具备的，跟运行环境无关。
-
本地对象（非静态对象）----Object,Function,Array,String,Boolean,Number,Date,RegExp,Error(多需要实例化)
-
内置对象（非静态对象）-----Global,Math----不需要经过new(实例化),直接就能用的类
-
宿主对象(浏览器提供的)----DOM,BOM
-
-
-
字面量（常量）；
-
--元素.style.属性=xxx是修改行间样式
--之后再修改className不会有效果。className控制id.
-
style加样式 行间
-
从style取样式 行间
-
-
样式优先级-------* < 标签 < class < 行间
-
function 名字()
{
...........
}
obtn onclick=名字
obtn onclick=function()
{
。。。。。。。。。
}
以上三种方法结果都相同。
-
window.onload 页面加载完成的时候发生
-
获取一组元素：getElementsByTagName
-
数组的使用
-
里面的
for(var i=0;i<aDiv.length;i++) { aDiv[i].style.background='red'; }//i<div的长度，可以让样式的变化动态，即只需要修改div就行
-
-
this
js的组成
ECMAScript(解释器、翻译,把人看懂的代码翻译成计算机能看懂的代码)+---------几乎没有兼容性问题
Bom（浏览器，window）+----------有一些兼容性问题
Dom（赋予js操作html的功能,document）-----------没有兼容
-
常见数据类型：数字（number）、String boolean undefined object function
一个变量应该只存放一种类型的数据
-
显式类型转换：
-
parseInt:字符串改成数字。特性：浏览器从左到右解析，遇到不是数字的就直接输出。字符串输入字母的时候，输出NaN.------------NaN和NaN不相等。
-
parseFloat：字符串转小数。
-
-
隐式转换
-
==（字面量）---------先转换类型，然后比较
-
===（全等）-------------不转换类型，直接比较
-
减法。因为在js中没有字符串相减的功能，所以计算机在处理两个字符串相减时只能是计算。
-
-
局部变量：只能在定义它的函数里使用。
-
闭包：子函数可以使用父函数的局部变量。
-
% 应用：隔行变色、秒转时间
<script type="text/javascript"> window.onload=function() { var aLi=document.getElementsByTagName('li');for(var i=0;i<aLi.length;i++)
{
//i 0 1 2
if(i%2==0)
{
//0 1 2 3 4 5 6
aLi[i].style.background='#CCC';
}
else
{
//1 3 5 7 9
aLi[i].style.background='';
}
}
}; -
<script type="text/javascript"> var s=156; alert(parseInt(s/60)+'分'+s%60+'秒'); </script>
-
&& 与、 ||或、 ！否-------实例：全选，全不选
-
json 与数组的区别：
-
json下标是字符串，alert{json['a']}; 数组下标是数字alert{arr[0]};
-
json没有length.数组有length.所以json需要用循环，
数组：for 0 - len
json: for in
for(var i=0;i<arr.length;i++){} 等于 for(var i in arr){}
-
-
函数返回值：可以把函数的东西传到外面来。
json可以让函数同时返回多个东西。
-
arguments 可变参 不定参（参数的个数是不定的），其实就是一个数组
<script type="text/javascript"> function sum() { var result=0;for(var i=0;i<arguments.length;i++)
{
result+=arguments[i];
}
return result;
}
alert(sum(12,2,2,2,2,2,2,2,2,2,2,2,2,2,)); -
css()函数 判断arguments.length，给参数取名，增强可读性
css(oDiv,'width') 两个参数是获取样式
css(oDiv,'width'，‘200px’) 三个参数是设置样式
-
取非行间样式（不能用来设置）
-
obj.currentStyle[attr]
-
getComputedStyle(obj,false)[attr]
-
不能取复合样式
-
复合样式：background、border 简单样式：width、height
-
-
js第二定律：但凡好东西一定不兼容；大多数兼容问题都是用if解决的
-
为了每次取样式的时候方便点，不需要每次都写if.....else，可以把常用的功能封装成一个函数，每次需要的时候直接调用。
-
数组使用原则：数组中应该只存一种类型的变量。
-
push() 尾部添加) pop() 尾部删除）
-
unshift() (头部添加) shift() (头部删除)
-
splice(起点，长度)，从中间删除（先删除，再插入）
-
concat() 数组连接-------alert(a.concat(b));
-
join（分隔符）-------用分隔符，组合数组元素，生产字符串
-
sort(比较函数)-----sort只认识字符串，在数字排序时，需要帮助sort认识字符串以外的东西。
<script type="text/javascript"> var arr=[12,8,9,19,112];arr.sort(function(n1,n2){
//第二种方法
return n1-n2;
-
-
•
•
// 第一种方法
// if(n1<n2)
// {
// return -1;
// }
// else if(n1>n2)
// {
// return 1;
//
// }
// else{
// return 0;
// }
• });
•
```javascript
alert(arr);
</script>
```
17. 定时器的作用
- 开启定时器
- setInterval 间隔型
- setTimeout 延时型
- 停止定时器
- clearInterval
- clearTimeout
### js是单线程，所以也可以说是主线程，所以js代码都是在主线程执行的，
只不过我们要区分它是同步执行还是异步执行；
当一个代码是异步的话，对应的是回调函数。
不同的任务对应不同的回调，比如：定时器的回调，发送js的回调，对应事件的回调
定时器模块，网络请求模块，事件处理模块，回调的执行取决于模块什么时候将回调函数放入到事件队列eq，
js引擎会通过轮询方式去询问这个事件队列是否有可执行的回调，如果有，就会将函数钩出去，钩到主线程去执行。
所以回调函数也叫钩子函数。
*
* */
/*
宏任务
分类：setTimeout setInterval
requestAnimationFrame(用于提前告诉提醒浏览器我们将要在下一次进行动画之前，帮我们调用对应的回调函数)
* 它们都是异步任务的同时又是宏任务
*
* 1.宏任务所处的队列就是宏任务队列
* 2.第一个宏任务队列只有一个任务：执行主线程的js代码
* 3.宏任务队列可以有多个
* 4.当宏任务队列中的任务全部执行完之后会查看是否有微任务，
* 有则先执行微任务队列中的所有任务，
* 没有则查看是否有宏任务队列
* */
* 其实，在js执行过程中，分为一个主执行栈和一个任务队列。js的代码执行会在主执行栈中进行，遇到http请求和定时器等异步操作的时候会丢给对应线程执行。而每个异步任务都有一个回调函数，等到请求操作完成或者定时器数秒完成之后，会把对应的回调函数放入到任务队列中。而js主执行栈里面的内容为空后，就会来任务队列里面按队列顺序取一个函数到主执行栈里执行，等函数执行完成之后栈又空了，再来任务队列里取函数执行，如此反复循环直到任务队列和栈都为空，这就是所谓的事件循环机制EventLoop。
*
-
charAt()--可以获取字符串上的某一个位上的东西。用str.charAt(i)代替str.[i]，使得兼容低版本浏览器。
-
设置年 alert(oDate.getFullYear()); 设置月 alert(oDate.getMonth()+1);//计算机计算月份是从0开始的，所以要+1
设置日 alert(oDate.getDate());
设置星期 alert(oDate.getDay());--------周日是0.
-
offsetLeft.用来获取物体的左边距。特点：可以综合考虑所有影响这个物体位置因素之后的
出来的最终的结论。
offsetTop获取上边距
-
无缝滚动实现原理：让ul一直想左移动。
-
复制li-----------innerHTML和+= 修改ul的width
-
滚动过界后，重设位置---------判断过界。
-
-
DOM:---------在js中的docunment.
DOM节点：childNodes nodeType------------获取子节点，两个配合起来就可以循环所有子节点。并且不会出现文本节点。nodeType==1时是元素节点，2是属性节点，3是文本节点。
parentNode--------例子：点击链接、隐藏整个li
offsetParent-------例子：获取元素在页面上的实际位置
css中绝对定位是根据有定位的父级进行定位的，一直找到body为止。
父节点没有设置定位的时候，子节点会一直找定位。所以两个div以上的布局，都需要设置定位。
父节点设置相对定位的时候，所以一般都是父节点设置相对定位，子节点设置绝对定位。
-
首尾子节点：
firstChild（IE）、firstElementChild(高级浏览器)
有兼容问题的话，使用if...else判断
lastChild、lastElementChild
-
兄弟节点：
nextSibling nextElementSibling
previousSibling previousElementSibling
-
元素属性操作：
-
第一种：oDiv.style.display="block";
-
第二种：oDiv.style[ "display" ]="block";
-
第三种：dom方式
-
-
dom元素灵活查找：好处：可以批量化的去获取元素、还可以有选择性的、当页面发生变化的时候程序不会出错，除非连class也改了。
-
如何用className选择元素
-选出所有元素
-通过className条件筛选
-
封装成函数
-
-
使用封装的函数
创建节点，插入元素--------例如微博和论坛的评论，都是插入元素，并且插到内容前边，实时更新
这是插入到后边---------oUl.appendChild(oLi);
插入到前边-----------oUl.insertBefore(oLi,aLi[0]);不显示的代码同上。
ul本身没有li.所以没有第0个li
删除节点、删除元素： oUl.removeChild(this.parentNode);
文档碎片：就相当于袋子。
---------文档碎片可以提高DOM操作性能-
文档碎片原理
document.createDocumentFragment()
表格应用
tbody在不写的情况下浏览器也是可以显示出来的，推荐写。
表格在js中有便捷得操作，因为在90年代的时候div,ul还没有流行，用的大部分都是表格。
tBodies[0]与getElementsByTagName('tbody')[0]结果一样//tBodies相当于数组
rows[1]与getElementsByTagName('tr')[1]结果一样// 取这一行
cell[1]与getElementsByTagName('td')[1]结果一样// 取这一行里的所有单元格
隔行变色
表格的添加
优化上面的添加，因为上面的添加是通过行数来算的。以下是删除之后再添加不会出现错误。
优化表格应用1.忽略大小写
优化表格应用1.模糊搜索
同时搜索几个关键字原理：就是把要搜的字符串把它切开，切成几段，每段都分别找一次；循环j是关键。
js运动
-
运动框架原则：-
-
在开始运动时，关闭已有定时器
-
把运动和停止隔开（if/else）
if是到达终点后要做的事情。else是到达终点前要做的事情。
-
-
缓冲运动
-
逐渐变慢，最后停止
-
距离越远速度越大
-
速度由距离决定
-
速度=（目标值-当前值）/缩放系数
-
例子：缓冲菜单
-
speed不能是小数，计算机会自动忽略。添加代码（向上取整）---speed=Math.ceil(speed);
就能正确取到所选位置
总结：让物体动起来就是开一个定时器，让它往右走。速度在程序里是以变量而存在，速度可正（左）可负（右）
遇到的小bug:
1,运动不会停----因为没关定时器
2.速度取某些值停不下来----直接判断距离
3.到达位置后再点击还会运动---------因为点击之后定时又打开了
4.重复点击速度加快-----需要每次都先关闭定时器再打开
一. 多物体运动框架
-
多物体同时运动
-----多个div,鼠标移入变宽
-
每个div一个定时器
-
多物体运动框架
-
定时器作为物体的属性
-
参数的传递：物体，目标值
-
多个div淡入淡出
-
-
-
链式运动
-
回调函数
-
运动停止时，执行函数
-
运动停止时，开始下一次运动
-
-
完美运动框架总结：
-
框架演变过程：
-
startMove(iTarget) 运动框架----不能同时支持多个物体运动，不能随意的去指定让哪个值运动
-
startMove(obj,iTarget) 多物体
-
startMove(obj,attr,iTarget) 任意值
-
startMove(obj,attr,iTarget,fn) 链式运动--fn（fnEnd）最大的作用就是在我前一次运动结束之后可以利用它做好多事情，把事情分阶段。
-
startMove(obj,json) 多值运动
-
startMove(obj,json,fn) 完美运动框架
-
二.js事件
-
event对象和事件冒泡
-
event对象：鼠标位置、键盘按键
-
例子：获取鼠标位置：clientX
-
document的本质：document.childNodes[0].tagName
-
-
-
获取event对象
-
var oEvent=ev||event;
-
-
事件流
- 事件冒泡----就是最典型的事件流-----就是事件会顺着它的层级一直往它的父级上传，一直到document.
- 取消事件冒泡：oEvent.cancelBuble=true
- 例子：仿select控件
- DOM事件流
client需要配合scrollTop使用;
-
事件高级应用
-
事件绑定
-
IE方式
-
attachEvent(事件名称，函数)，绑定事件处理函数
-
detachEvent(事件名称，函数)，解除绑定
-
-
DOM方式
-
addEventListener(事件名称，函数，捕获)
-
removeEventListener(事件名称，函数，捕获)
-
-
何时使用事件绑定
-
绑定事件和this
-
绑定匿名函数，会无法删除
-
事件捕获的作用是把网所有的事件都集中在按钮身上。可以解决IE下的拖拽问题
-
-
三. Ajax
-
什么是ajax-----在自己本地下载wamp，文件都保存在www文件中
-
无刷新数据 读取
-
-
用户注册、在线聊天室
-
同步、异步
-
get----通过网址传输数据.
网址地址是限制长度的，一般在4k到10k.
所以get方式容量小...有缓存
post----通过http Content
容量大（2G）。。。。。无缓存
-
编写Ajax对象
-
创建Ajax对象----
-
ActiveXObject("Microsoft.XMLHTTP")----IE
-
XMLHttpRequest() ---这个才是ajax真正的对象----高级浏览器
-
连接服务器
-
open(方法，文件名，异步传输)
-
同步和异步
-
发送请求
-
send()
-
接收返回值
第四步主要关心的是oAjax.readyState 的值
0---------（未初始化，还没有调用open()方法）
1----------（载入）已调用send()方法，正在发送请求
2------------（载入完成）send()方法完成，已收到全部响应内容
3-------------(解析)正在解析响应内容
4-------------（完成）响应内容解析完成，可以在客服端调用了
-
一. 在js中，用没有定义的变量------报错----alert(a);
用没有定义的属性-----undefined----alert(window.a);
window.的都是属性
四.面向对象
-
面向对象：不了解原理的情况下，会使用功能。
-------使用对象时，只关注对象提供的功能，不关注其内部细节（不需要知道其工作原理）
--------对象：不了解内部的结构，知道表面的各种操作。（黑盒子）
-
js中的面向对象
-
抽象：抓住核心内容
-
封装：不考虑内部结构，只用功能
-
继承：从父类继承出一些方法、属性、子类，又有一些自己的特性。
-
多重继承
-
多态
-
-
-
对象的组成：变量，属性。
--------变量：自由的，不属于任何人
----------属性：属于一个对象
-
函数：自由------------function aaa(){};
方法：属于一个对象---------arr.aaa=function(){};\
给对象添加一个事件其实就是给它添加一个方法,只不过这个方法不是我们自己调用，而是系统在我们触发事件的时候调用。
oDiv.onclick=function(){};
-
this-----当前的方法属于谁，this就是谁
-
全局的方法是属于window下的。
-
-
-不能在系统对象中随意附加方法，属性，否则会覆盖已有方法、属性.
----------Object 没有功能，相当于一张白纸。
构造函数的功能是构造对象
-
构造函数 类似于 工厂模式-----工作流程和工厂很像。
工厂方式问题：1. 没有new 2.函数重复定义----一模一样的函数不能直接相等，就会平白占用系统大量资源。资源浪费。
------------解决办法
-
在调用函数前加new，就不需要手动创建，系统会替我们创建好。
也会不需要我们自己返回，系统会偷偷返回。
-
-
-
原型：给对象家属性
css中的class--------一次给一组元素加样式
行间样式------一次给一个元素加样式
js中的原型就相当于css中的class
类：模子
对象：产品（成品）
var arr=new Array(1,2,2,3);
Array 类
arr 对象
--------Array.push() 编写错误----Array仅仅是模子，不具备功能，
---------new arr() 编写错误---它仅仅能去用，不能当成模子去生成别的东西
-----------arr.push 编写正确
-
面向对象编程：
json---简单，但是不适合多个对象----适合整个程序只有一个对象。
把方法包在一个json里。
-
继承的好处：子类的功能跟父类有区别，只需要实现由区别的不一样的一部分就行了。
-
js宿主就是js的运行环境（浏览器）
当我们在node编写js的时候就是在后台进行了。
-
js的对象分类：
-
本地对象+内置对象是js本身具备的，跟运行环境无关。
-
本地对象（非静态对象）----Object,Function,Array,String,Boolean,Number,Date,RegExp,Error(多需要实例化)
-
内置对象（非静态对象）-----Global,Math----不需要经过new(实例化),直接就能用的类
-
宿主对象(浏览器提供的)----DOM,BOM
-
-
浙公网安备 33010602011771号