1、前端学习网站：智能社
变量类型
1.强制转换（显示转换）
parseInt()
parseFloat()
2.隐式类型转换
==、===
减法
Alert(a==b); //true 先转换类型，然后比较
Alert(a===b); //false 不转换类型，直接比较
真：true、非零数字、非空字符串、非空对象
假：false、数字零、空字符串、空对象、undefine
Json(javascript object notation)和数组的区别：1. json的下标是个字符串，而数组是数字
For(var i in arr){} for(var i in json){}
数组：for 0 - len json:for in
Arguments可以获取样式。
Alert(oDiv.currentStyle.width);浏览器不兼容
Alert(getComputedStyle(oDiv,false).width);IE9可以，其他不行
Push(元素)，从尾部添加
Unshift(元素)，从头部添加
Pop(),从尾部弹出
Shift();从头部弹出
getElementsBytagName()方法可返回带有指定签名的对象的集合。返回元素的顺序是他们在文档中的顺序。传递给它的字符串可以不区分大小写。2、可获取任何类型的HTML元素列表。需要操作某个特定元素，使用getElementById()更有效。
IE下兼容性问题，获取字符串用str.charAt(0)。
innerHTML返回表格行开始和结束标签间的代码。
DOM基础-1
DOM基础：什么是DOM;浏览器支持情况
DOM节点：
childNodes:获取子节点；children
parentNode:点击链接，隐藏整个li
offsetParent:获取元素在页面上的实际位置
DOM节点（2）
首尾子节点：有兼容性问题；firstChild,firstElementChild;lastChild,lastElementChild
兄弟节点：有兼容性问题；nextSibling,nextElementSibling;previousSibling、previousElementSibling。
操纵元素属性
元素属性操作
一：oDiv.style.display=”block”;
二：oDiv.style[display]=”block”;
三：Dom方式
DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称、值)
删除：removeAttribute(名称)
DOM元素灵活查找
用className选择元素
如何用className选择元素
选出所有元素
通过className
封装成函数
DOM=document;
nodeType：文本节点
Children和childNode的区别：Children只包括属性，不包括文本，childNode包括文本。
创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子：为ul插入
插入元素
insertBefore(节点，原有节点) 在已有元素前插入
例子：倒序插入li
删除DOM元素
removeChild(节点) 删除一个节点
例子：删除li
文档碎片
文档碎片可以提高DOM操作性能（理论上）
文档碎片原理
document.createDocumentFragment()
表格应用-1
获取
tBodies、tHead、tFoot、rows、cells
隔行变色
鼠标移入高亮
添加、删除一行
DOM方法的使用
搜索
1：基础版本--字符串比较
2.忽略大小写--大小写转换
3.模糊搜索--march的使用
4.多关键词--split
高亮显示、筛选
排序
移动Li
元素排序：转换----排序----插入
表单基础知识
什么是表单
向服务器提交数量、比如：用户注册
Action
表单事件
Onsubmit 提交时发生
Onreset重置时发生
表单内容验证
阻止用户输入非法字符 阻止事件
输入时、失去焦点时验证 onkeyup、onblur
提交时检查 onsubmit
后台数据检查
表格的tbody就算不写浏览器也会自动帮你加上。
.getElementsByTagName('tbody')[0]=tBodies[0]
.getElementsByTagName('tr')[1]=rows[1]
.getElementsByTagName('td')[1]=cells[1]
tBodies[0]
.toLowerCase()将大小写变成纯小写，易于搜索。
appendChild()1.先把元素从原有父级上删掉 2.添加到新的父级
快捷键End将鼠标移到行尾，Home移到行首。
课时15 js运动
运动基础
让Div运动起来
速度-----物体运动速度
运动中的Bug
不会停止
速度取某些值会无法停止
到达位置后再点击还会运动
重复点击速度加快
匀速运动
速度不变
运动框架及应用
运动框架
在开始运动时，关闭已有计时器
把运动和停止隔开
运动框架实例
例子1：“分享到”侧边栏
通过目标点，计算速度值
例子2：淡入淡出的图片
用变量存储透明度
缓冲运动
逐渐变慢，最后
距离越远速度越大
速度由距离决定
速度=（目标值-当前值）/缩放系数
例子：缓冲菜单
Bug:速度取整
跟随页面滚动的缓冲侧边栏
潜在问题：目标值不是整数时
Alert(Math.ceil(-9.8)); //向上取整
Alert(Math.floor(4.5)); //向下取整
多物体运动框架
多物体同时运动
例子：多个Div
单定时器，
每个Div一个
多物体运动框架
定时器作为物体的属性
参数的传递：物体、目标值
例子：多个Div淡入淡出
所有东西都不能共用
属性与运动对象绑定：速度、其他属性值（如透明度等）
仿Flash图片展示-1
效果思路
两边的按钮---淡入淡出
大图下拉-----层级深度变化
下方的li---多物体淡出
下方的UI-----位置计算
左右按钮
淡入淡出
鼠标移到按钮上，按钮会消失
层级问题
按钮和遮罩上都得加上事件
仿Flash图片展示-2
下方li效果
点击切换大图
Li淡入淡出----
UI移动-----位置
大图片切换
图片层级------zIndex一直加1
图片下拉效果（运动框架）
可以改为淡入淡出
加入自动播放
和选项卡一样
Math.round()四舍五入；
Math.ceil();向上取整
Math.floor();向下取整
链式运动框架
回调函数
运动停止时，执行函数
运动停止时，开始下一次运动
例子：土豆网右侧
完美运动框架
多个值同时变化
setStyle同时设置
参数传递
Json的使用
For in遍历属性
运用到运动框架
检测运动停止
标志变量
例子：伸缩同时淡入淡出菜单
运动框架总结
运动框架演变过程
startMove(iTarget) 运动框架
startMove(obj,iTarget) 多物体
startMove(obj,attr,iTarget) 任意值
startMove(obj,attr,iTarget,fn) 链式运动
startMove(obj,json) 多值运动
startMove(obj,json,fn) 完美运动框架
运动框架应用
例子：幻灯片
例子：新浪微博
链式运动
Event对象和事件冒泡
什么是event对象
用来获取事件的详细信息：鼠标位置、键盘按键
例子：获取鼠标位置：client
Document的本质：Element.childNodes[0].tagName
获取event对象（兼容性写法）
Var oEvent=ev||event;
事件流
事件冒泡
取消冒泡：oEvent,cancelBubble=true
例子：仿select控件
DOM事件流
鼠标事件
鼠标位置
可视区位置：clientX,clientY
例子1：跟随鼠标的div
消除滚动
滚动条的意义----可视区与页面顶部的距离
获取鼠标在页面的绝对位置
封装函数
例子2：一串跟随鼠标的Div
键盘事件
keyCode
获取用户按下键盘的那个键
例子：键盘控制Div移动
其他属性
ctrKey、shiftKey/altKey
例子：提交留言
回车提交
Ctrl+回车提交
Document代表的是页面
默认行为
默认行为
什么是默认行为
阻止默认行为
普通写法：return false;
例子1.屏蔽右键菜单
弹出自定义右键菜单
例子2.只能输入数字的输入框
Keydown、keyup事件的区别
拖拽
简易拖拽
拖拽原理
距离不变
三个事件
靠谱拖拽
原有拖拽的问题
直接给document加事件
FF下，空Div拖拽Bug
防止默认事件
修正位置
事件绑定
事件绑定
IE方式
attachEvent(事件名称，函数)，绑定事件处理函数
detachEvent(事件名称，函数)，解除绑定
DOM方式
addEventListener(事件名称，函数，捕获)
removeEventListener(事件名称、函数，捕获)
何时使用事件绑定
绑定事件和this
绑定匿名函数，会无法删除
高级拖拽-1
复习拖拽原理
距离不变
三个事件：down、move、up
限制范围
对位置进行判断
例子1：不能拖出窗口的Div
例子2：不能拖出指定对象的Div
磁性吸附
图片拖拽
阻止默认事件
IE下拖动有问题
事件捕获
与DOM配合
带框的拖拽
保留原有位置的拖拽
自定义滚动条
拖拽
只有横向拖拽
限制范围-----范围的大小
计算比例-----当前的大小值
控制其他对象
例子1：控制物体的大小
例子2：控制物体的透明度
例子3：控制文字滚动
Ajax基础-1
什么是服务器
网页浏览过程分析
如何配置自己的服务器程序（AMP）
什么是Ajax
无刷新数据读取
用户注册、在线聊天室
异步、同步
使用Ajax
基础：请求并显示静态TXT文件
字符集编码
缓存、组织缓存
动态数据：请求JS(或json)文件
Eval的使用
DOM创建元素
局部刷新：请求并显示部分网页文件
HTTP请求方法
GET-------用于获取数据（如：浏览帖子）
POST------用于上传数据（如：用户注册）
GET、POST的区别
Get是在url重传数据：安全性、容量
缓存
编写Ajax-1
创建Ajax对象
ActiveXObject(MicrosoftXMLHTTP)
XMLHttpRequest()
连接服务器
Open(方法，文件，同步传输)
同步和异步
发送请求
Send()
编写Ajax-2
请求状态监控
Onreadystatechange事件
readyState属性请求状态
0 （未初始）还没在调用open()方法
1 （载入）一调用send()方法，正在发送请求
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了
Status属性：请求结果
responseText
Ajax数据
数据类型
什么叫数据类型-------英语、中文
XML、Json
字符集
所有文件字符集相同
Ajax的同步：事件一件件来
异步：多个事情可以一起做
用Ajax注意：1.开WAMP5; 2.前缀用localhost/
实例：面向对象的选项卡
把面向过程的程序，改写成面向对象的形式
原则：
不能有函数套函数，但可以有全局变量
过程
Onload 构造函数
全局变量 属性
函数 方法
改错
This、事件、闭包、传参
对象与闭包
通过闭包传递this
Json方式的面向对象
把方法包在一个Json里
有人管他叫-----命名空间
在公司里，把同一类方法，包在一起
拖拽和继承
面向对象的拖拽
改写原有的拖拽
对象的继承
什么是继承
在原有类的基础上，略作修改，得到一个新的类
不影响原有类的功能
Instanceof运算符
查看对象是否是某个类的实例
限制范围的拖拽类
构造函数伪装
属性的继承
原理：欺骗
Call的使用
原型链
方法的继承
原理：复制方法
覆盖原型和方法复制
系统对象
本地对象（非静态对象）
什么是本地对象
常用对象
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error
内置对象（静态对象）
什么是本地对象
Glocal、Math
宿主对象（由浏览器提供的对象）
DOM、BOM
Json 简单、不适合多个对象
单体 整个程序里只有一个，写起来比较简单
Substring 不包括最后一个字符，若没写结束字符，则默认到最后结束
Search 查找
Substring 获取子字符串
charAt 获取某个字符
Split 分割字符串，获得数组
找出字符串中的所有数字
用传统字符串操作完成
用正则表达式完成
什么是正则表达式
什么叫“正则”
规则、模式
强大的字符串匹配功能
是一种正常人类很难读懂的文字
RegExp对象
JS风格----------new RegExp(“a”,”i”)
perl风格------------/a/i
\d代表数字；\i忽略大小写；\g
Search
字符串搜索
返回出现的位置
忽略大小写：i-ignore
判断浏览器类型
Match
获取匹配的项目
量词：+
量词变化：\d、\d\d和\d+
全局匹配：g-----global
例子：找出所有数字
字符串-1
任意字符
[abc]
例子：o[usb]t----obt、lost、out
范围
[a-z]、[0-9]
例子：id[0-9]---------id0、id5
排除
[^a]
例子：o[^0-9]t-------oat、o?t、ot
[^a-z]除了abc，其他字符都要
字符串-2
组合
[a-z0-9A-Z]
实例：偷小说
过滤HTML标签
自定义innerText方法
转义字符
（点）--------任意字符
\d、\w、\s
\D、\W、\S
Confirm:有确定，取消按钮
Prompt:输入内容，返回内容。
量词
什么是量词
出现的次数
{n,m},至少出现n次，最多m次
例子：查找QQ号
常用量词
{n,} 至少n次
* 任意次{0，}
？ 零次或一次{0,1}
+ 一次或任意次{1，}
{n} 正好n次
Css如果调不了位置一般是position:relative;或者position:absolute;
扫一扫
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
