JS--运动

****JS第二定律：凡是好用的都不兼容。***

一，运动基础　

clearInterval（timer）➡️function（）

 

运动框架和应用

  运动开始前关闭之前的定时器；

  运动和停止隔开

 

运动框架实例：（向左向右，透明度）

例子1：分享到侧边栏

例子2：淡入淡出的图片

 

缓冲运动：

例子1：缓冲菜单「距离大速度小，距离小速度大」

  比如：speed=(300-oDiv.offsetLeft)/10

  向上向下取整设置：speed=speed>0?Math.ceil(speed):Math.floor(speed);

 

例子2:缓冲菜单，跟随页面滚动的缓冲侧边栏

   oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px');

注意点：速度取整

 

二，JS运动应用

▲多物体同时运动

单个定时器存在问题，开多个定时器（每个Div一个定时器）

▲多物体运动框架

所有东西都不能公用（分对象设定）

 

去掉offset，改成getStyle（），用currentStyle代替offset

 

▲任意值运动框架

四舍五入：Math.round（）

 

▲仿flash展示

 

**************************

JS--运动中级

一，链式运动框架

startMove(obj, attr,iTarget, fn)

例子：

oDiv.onmouseover=function()
{
    startMove(oDiv, 'width', 300, function(){
        startMove(oDiv, 'height', 300, function(){
            startMove(oDiv, 'opacity', 100);
        });
    });
};

 

二，完美运动框架

startMove(obj, json, fn)

网盘有具体资料

 

三，总结与应用

运动框架的应用：幻灯片

链式运动：新浪微博

 

JS--事件基础

一，event对象和事件冒泡

获取事件的具体信息

document的本质：document.childNodes[0].tagNmame()

 

获取鼠标的x，y坐标：

var oEvent.ev || event;

alert(oEvent.clientX + ',' + oEvent.clientY);

 

事件流：

取消冒泡：oEvent.cancelBubble=true；

 

二，鼠标事件

**鼠标位置**

可视区：clientX，clientY

注意：scrollTop

 

三，键盘事件

keyCode：按键对应的阿斯克码

onkeydown：键盘按下发生的事件

ctrl+回车提交留言：oEvent.onkeydown==13 && oEvent.ctrlKey

 

其他属性：shiftKey，altKey等

 

**************

*JS事件中级*

1，默认行为

阻止默认事件

document.oncontextmenu=function()
{
    return false; //阻止默认事件
}

 

例子1:屏蔽右键菜单

例子2:只能输入数字

 

2，拖拽

简易拖拽

靠谱拖拽：做判断。左边，上边等于零；右边下边等于可视区减去div长度宽度

 

*****************

**JS事件高级应用**

事件绑定：

代码例子：

IE下：
oBtn.attachEvent('onclick', function()
{
    alert('a');
});

或者(解决兼容性问题)火狐，chrome下：
addEventListener('click', function()
{

    alert('a');
});

解除绑定detachEvent（事件名称，函数）

 

   IE方式

   DOM方式

 

高级拖拽：限制范围（不拖出窗口，不拖出指定对象的div），磁性吸附（等于某个值，比如：l=50）

   事件捕获（解决IE6，7的兼容性问题）:IE专用

       捕获：oDiv.setCapture()

       释放捕获：oDiv.releaseCapture()

 

自定义滚动条：拖拽，控制其他对象

 

******************

**AJAX基础****

1，什么是服务器

 

2，什么是Ajax

无刷新读取数据

 

3，使用Ajax

字符集编码

缓存

阻止缓存：ajax('aaa.txt?t='+new Date().getTime())

eval(str)：把字符串读成数组

 

4，Ajax原理

HTP请求方法：

    GET：把值放入（提交到）URL中一起传递；

             但是网址长度有限，容量小，不适合传递大数据；

              安全性差

              有缓存 

              更适合获取数据（比如浏览帖子）

    POST：不通过网址传递（通过http context）传递数据

             容量大（上线可达2G左右）

             安全性好一点

             更适合上传数据（比如用户注册）

 

*****************

**AJAX中级***

1，编写Ajax

 创建Ajax对象（方法如下）：

     只在IE下可用：ActiveXObject（“Microsoft.XMLHTTP”）

    IE以外的：XMLHttpRequest()

四个步骤：创建Ajax对象；连接到服务器；告诉服务器，要哪个文件；接受返回值

注意：JS中，用没有定义的变量则报错；用没有定义的属性则返回undefined

比如：window.XMLHttpRequest()

 

 连接服务器：

  open（方法，文件名，异步传输）

            同步：事件一件一件来

            异步：多个时间一起做

比如：oAjax.open('GET', 'filename', true)

 

 发送请求：

  比如：oAjax.send（）

 

接受返回：

 比如：

oAjax.onreadystatechange=function()
{
    if(oAjax.readyState==4) //4代表读取完成
    {
         if(oAjax.status==200){alert('成功');}
         else{alert('失败');}
     }
}

 

JS面向对象基础

 

1，什么是面向对象：

     不了解原理的情况下会使用功能

 

例子：电视，按钮的关系

 

对象：黑盒子，不了解内部的结构，知道表面的各种操作

 

2，JS中的面向对象

面向对象编程（OOP）

  抽象：“抽”—>把最主要的特点，跟问题相关的

特征抽出

  封装：看不到里面的东西，用好表面的功能就行了

  继承（遗传）：从父类上继承出一些方法属性，子类又有一些自己的特征

      多重继承：继承多个父级的特征

      多态：

 

对象的组成：方法（函数），属性（变量）

 

**this：当前的方法属于谁，则this就是谁**

 

构造函数：用来构造对象

工厂方式：原料，加工，出厂（问题点：没有new；函数重复，导致资源浪费）

 

******************************************

JS的原型是？

 

CSS中                                               JS中

class：一次给一组元素加样式             原型

行间样式：一次给一个元素加样式         给对象加事件

 

******************************************

 例子：Array.prototype.sum=function()

所有数组都加上sum方法

 

类：模子—>蛋糕模子

对象：产品（成品）—>蛋糕

 

3，原型的使用

用构造方法加属性，用原型加方法

 

 

***************

**JS高级应用**

实例：面向对象的选项卡

1，把面向过程的程序，改写成面向对象的形式

     原则：不能有函数套函数，但可以有全局变量

     过程：onload（构造方法）；全局变量（属性）；函数（方法）

     改错：this，事件，闭包，传参

 

2，对象和闭包

    通过闭包传递this

 

3，Json方式的面向对象

把方法包在一个Json里面（适用整个程序只有一个，写起来简单）

 

命名空间：把相同命名的方法，分别写在不同的Json中

 

4，继承

比如：

属性的继承：

function B()

{ 

    A.call(this);

}

 

原型的继承:

for(var i in A.prototype)

{

    B.prototype[i]=A.prototype[i];

}

 

5，使用继承

 

6，系统对象

宿主对象（有浏览器提供的对象）：DOM，BOM

内置对象（静态对象）：Math

本地对象（非静态对象）：需要实例化的对象，比如object

 

 

*****************

**BOM应用**

1，BOM基础

打开关闭窗口

document.write（）：先清空在写

window.open('about:blank', '_blank')

window.close()

 

userAgent：当前浏览器的版本信息

location：返回当前的网址，或者赋值（网址）

 

2，尺寸

clientWidth：可视区大小

scrollTop：滚动距离

document.body.scrollTop()

 

div 窗口的位置：clientHeight-offsetHeight+scrollTop

 

3，常用方法和事件

警告框：alert（）

选择框：confirm（）

输入框：prompt（）

 

window对象常用事件：onload，onsroll，onsize

***************************

***COOKIE基础与应用***

1，什么事cookie

页面用来保存信息的：用户名等

特性：容量小，同一个网站只有一套，数量有限，有过期时间

 

2，cookie的使用

JS中的：document.cookie

例子：提交时记录用户名等，浏览记录等 

 

****************************

**正则表达式**********重点****

search：查找字符串

substring：获取子字符串

charAt：获取某个字符

split：切分字符串，获得数组

 

1，什么是正则表达式：

正则：规则，模式

强大的字符串表达式，是一种正常人很难读懂的文字

正则写法：JS风格；perl风格

               JS方法：new RegExp（‘a’， ‘i’） // i 表示忽略大小写

               perl方法：/a/i

正则转义（比如\d 表示数字）

g：找到全部（globle）

match（/\d/）

 

量词：个数

+：表示若干

match（/\d+/g）

 

replace：替换

例子：敏感词过滤

re=/北京|淘宝|百度/g；

replace（re，‘*****’）； //用****替换北京，淘宝，百度

 

元字符（方括号）：[]

点. --> 代表任意字符

    例子1：[abc] 表示任意字符

    例子2：[^a-z] 表示除了字母

    例子3：过滤html标签

//表示除了<>以外，<>中的内容用空白代替

re=/< [^<>]+>/g；
replace（re，‘’）；

 

常用的转义字符

\d：代表数字 [0-9]

\w：英文，数字，下划线 [a-z0-9_]

\s：空白字符（空格等）

 

\D：[^0-9]

\W：[^a-z0-9_]

\S：非空白字符

 

量词：

 ：正好出现n次 

{n，m} ：最少n次，最多m次数

{n，} ：最少n次，最多无限次数

？：表示前面的可以有，也可以没有

+：表示若干，最少1次

*：可以没有，也可以有，且不限次数（0～无限次）

 

常用正则例子：邮箱校验

//一串英文，数字，下划线 @ 一串英文，数字 . 一串英文
//^：字符串行首 $：字符串行尾
var re=/^\W+@[a-z0-9]+\.+[a-z]+$/i；
if(re.test(oTxt.value))
{
    alert('true 合法邮箱');
}
else

{
    alert('邮箱写错了');
}