JS笔记-强化版2

1、DOM：

 

DOM : Document Object Model 文档对象模型

文档：html页面

文档对象：页面中元素

文档对象模型：定义 为了能够让程序(js)去操作页面中的元素

 

DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）DOM节点（document-html-（head、body）..）

 

getElementById

getElementByTagName

document

document.body

 

1）childNodes 不推荐使用

 

元素.childNodes : 只读 属性 子节点列表集合

childNodes只包含一级子节点，不包含后辈孙级以下的节点

 

标准浏览器下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点 //比如ul里的p标签。

非标准浏览器下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点

 

元素.nodeType : 只读 属性 当前元素的节点类型

 

DOM节点的类型有12种

常见的如下：

元素节点 : 1

属性节点 : 2

文本节点 : 3 // 比如ul和第一个li的回车，也算一个空文本节点

 

为ul每一个元素设置背景颜色

for (var i=0; i<oUl.childNodes.length; i++) {

if ( oUl.childNodes[i].nodeType == 1 ) { //通过判断nodetype是不是元素节点来兼容标准和不标准浏览器

oUl.childNodes[i].style.background = 'red';

}

 

 

元素.attributes : 只读 属性 属性列表集合

 

oUl.attributes.length //标签含有的属性，比如 id style class 等

oUl.attributes[0].name // 第一个属性的名称

oUl.attributes[0].value // 第一个属性的值

2）children 推荐使用

 

元素.children : 只读 属性 子节点列表集合

标准下：只包含元素类型的节点,，也会包含非法嵌套的子节点 //比如ul里的p标签。

非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点

 

为ul每一个元素设置背景颜色

for (var i=0; i<oUl.children.length; i++) {

oUl.children[i].style.background = 'red';

}

 

 

3) firstChild（不推荐使用）、firstElementChild

 

元素.firstChild :

只读 属性 第一个子节点

标准下：firstChild会包含文本类型的节点

非标准下：只包含元素节点

 

元素.firstElementChild : 非标准不支持

只读 属性 标准下获取第一个元素类型的子节点

 

if ( oUl.firstElementChild ) {

oUl.firstElementChild.style.background = 'red'; //标准下

} else {

oUl.firstChild.style.background = 'red'; //非标准下

}

 

简写：var oFirst = oUl.firstElementChild || oUl.firstChild;

oFirst.style.background = 'red';

 

如果含有空节点：

 

if ( oUl.children[0] ) {

oUl.children[0].style.background = 'red';

} else {

alert( '没有子节点可以设置' );

}

 

 

4) lastChild

 

/*

元素.lastChild || 元素.lastElementChild 最后一个子节点

*/

var oLast = oUl.lastElementChild || oUl.lastChild;

oLast.style.background = 'yellow';

 

5) nextSibling

 

/*

元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点

*/

var oNext = oFirst.nextElementSibling || oFirst.nextSibling;

oNext.style.background = 'blue';

 

6) previousSibling

 

/*

元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点

*/

var oPrev = oLast.previousElementSibling || oLast.previousSibling;

oPrev.style.background = 'orange';

 

7）parentNode

 

元素.parentNode :

只读 属性 当前节点的父级节点，只有一个，没有兼容问题

 

8）offsetParent、offsetLeft

 

元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点

如果没有定位父级，默认是body

ie7以下，如果当前元素没有定位默认是body，如果有定位则是html

ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上

 

元素.offsetLeft[Top] : 只读 属性 当前元素到定位父级的距离（偏移值） 到当前元素的offsetParent的距离

 

如果没有定位父级

offsetParent -> body

offsetLeft -> html

 

如果有定位父级

ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离

如果自己有定位，那么就是到定位父级的距离

 

其他浏览器：到定位父级的距离

 

 

9）宽高

/*

width height

style.width : 样式宽

clientWidth : 可视区宽

offsetWidth : 占位宽

*/

<div id="div1" style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>

alert( oDiv.style.width ); //100

alert( oDiv.clientWidth ); //样式宽 + padding = 120

alert( oDiv.offsetWidth ); //样式宽 + padding + border 可视区宽 + 边框 = 122

 

 

10）getPos（）；元素距浏览器最外部的绝对距离。

 

function getPos(obj) {

 

var pos = {left:0, top:0};

while (obj) {//offsetLeft(Top)是到定位父级元素的距离

pos.left += obj.offsetLeft;

pos.top += obj.offsetTop;

obj = obj.offsetParent;//定位父级

}

return pos;

}

 

11）操作元素属性的方法：

 

oText.value = '222';//对其进行赋值

alert( oText.value );//对其进行读取

 

oText['value'] = '222';//对其进行赋值

alert( oText['value'] );//对其进行读取

 

对于变量必须用中括号 [] 形式

var name = 'value';

oText.name; 有问题

oText[name]; OK

 

元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值

 

//alert( oText.getAttribute('value') );

 

元素.setAttribute(属性名称，属性值); 方法 给指定元素指定的属性设置值

 

//oText.setAttribute( 'value', 'hello' );

 

元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性

 

//oText.removeAttribute( 'value' );

 

用 . 和[]的形式无法操作元素的自定义属性

getAttribute可以操作元素的自定义属性

 

//alert( oText._name_ ); //undefined

//alert( oText['_name_'] ); //undefined

 

//alert( oText.getAttribute('_name_') ); //可以

 

 

var oImg = document.getElementById('img1');

可以获取元素属性实际的值

ie7下还是会返回资源的绝对路径

 

//alert( oImg.src ); 弹出内容有图片所属的绝对路径

//alert( oImg['src'] );弹出内容有图片所属的绝对路径

 

//alert( oImg.getAttribute('src') );

 

//alert( oImg.style.getAttribute('width') );

 

11） 元素的动态创建：

 

在点击oBtn时把输入到oText中的内容追加到oLi中，在每个oLi中增加a标签，点击a标签进行删除该oLi

 

oBtn.onclick = function() {

 

/*
document.createElement(标签名称); 创建元素
*/

 

var oLi = document.createElement('li');//创建

oLi.innerHTML = oText.value;//设置li显示内容

 

var oA = document.createElement('a');

oA.innerHTML = '删除';

oA.href = 'javascript:;';

 

oA.onclick = function() {

/*

父级.removeChild(要删除的元素); 删除元素

*/

oUl.removeChild( this.parentNode );//把li删除

}

/*

父级.appendChild(要添加的元素) 方法 追加子元素

*/

oLi.appendChild( oA ); //把a添加 li 中

 

/*

父级.insertBefore(新的元素，指定元素) 方法 在指定元素前面插入一个新元素

 

在ie下如果第二个参数的节点不存在，会报错

在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加

*/

//兼容IE判断：

if ( oUl.children[0] ) {//如果存在子节点

oUl.insertBefore( oLi, oUl.children[0] );

} else {

oUl.appendChild( oLi );

}

}

 

/*

父级.replaceChild(新节点，被替换节点) 替换子节点

*/

//document.body.replaceChild( oDiv, oP );

 

/*

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点

*/

//oP.appendChild( oDiv );

 

 

12) 通过class获取元素：getElementsByClassName();

 

document.getElementsByClassName("box");//获取文档所有的box

var oUlid = document.getElementById("ul");

oUlid.getElementsByClassName("box");//获取oUlid所有的box

 

 

13)写一个addClass()和removeClass()方法：

 

//addClass

addClass(box,"xxxx");

function addClass(obj,className) {

if(obj.className === ''){// 如果之前不存在class

obj.className = className;

}else {//如果存在class

var arrClassName = obj.className.split(' ');

var index = arrIndexOf(arrClassName,className);

if(index == -1){//如果添加的class在原先的class中不存在

obj.className += ' ' + className;

}//如果添加的class在原先的class中存在了,就不用添加了

}

}

//removeClass

removeClass(dd,'b');

function removeClass(obj,className) {

 

//如果原先存在class

 

if(obj.className != ''){

 

var arrClassName = obj.className.split(' ');

 

var index = arrIndexOf(arrClassName,className);

 

//如果有匹配的

 

if(index != -1){

 

arrClassName.splice(index,1);

 

obj.className = arrClassName.join(' ');

 

}

 

 

}

 

}

//判断要添加的class与原先class进行比较是否相等

function arrIndexOf(arr,className) {

for(var i = 0;i<arr.length;i++){

if(arr[i] == className){

return i;

}

}

return -1;

}

 

 

14) 表格操作：

 

<table>

 

<thead>

 

<tr>

<th>表头</th>

<th>表头</th>

<th>表头</th>

</tr>

 

</thead>

 

<tbody>

 

<tr>

<td>表内容</td>

<td>表内容</td>

<td>表内容</td>

</tr>

<tr>

<td>表内容</td>

<td>表内容</td>

<td>表内容</td>

</tr>

<tr>

<td>表内容</td>

<td>表内容</td>

<td>表内容</td>

</tr>

 

</tbody>

 

</table>

 

获取：

 

tHead : 表格头

tBodies : 表格正文

tFoot : 表格尾

rows : 行

cells : 列

 

 

15) 表单

 

<form id="form1">

<input type="text" id="text1" name="username" value="" />

 

<input type="radio" name="sex" value="男" />男

<input type="radio" name="sex" value="女" />女

 

<input type="checkbox" name="aihao" value="电影" />电影

<input type="checkbox" name="aihao" value="音乐" />音乐

<input type="checkbox" name="aihao" value="体育" />体育

 

<select name="city" value="">

<option>请选择一个城市</option>

<option value="北京">北京</option>

<option value="上海">上海</option>

<option value="广州">广州</option>

<option value="深圳">深圳</option>

</select>

</form>

 

可以用name获取表单中一个元素

表单.元素name：form1.username

 

onchange : 当表单值发生改变的时候触发。

 

文本：

text : 当光标离开元素的时候再去判断值是否发生了变化，如果发生了变化则触发onchange事件

oForm.username.onchange = function() {

alert('值变了');

}

 

单选、多选：

name值要相同为一类，否则失效。

radio、checkbox: 标准下点击的时候如果值变化了就会触发on change

非标准下焦点离开的时候如果值变了会触发

 

oForm.sex[0].onchange = function() {

alert(this.value);//值

alert(this.checked);//是否被选中

}

 

下拉菜单：

选择后就会触发onchange事件。

oForm.city.onchange = function (){

alert(this.value );

}

 

 

<form id="form1" action="http://www.baidu.com">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>

onsubmit : 事件 当表单被提交的时候触发
oForm.submit(); 方法 提交表单

oForm.onsubmit = function() {

if (this.username.value == '') {
alert('请填写用户名');
return false;
}

}

onreset : 当表单要重置的时候触发
oForm.onreset = function() {

/*if ( confirm('你确定要重置？') ) {
return true;
} else {
return false;
}*/

return confirm('你确定要重置？');

}

 

 

---

2、BOM

 

 

BOM : Browser Object Model 浏览器对象模型

 

1) window.open() \ close()

open(地址默认是空白页面，打开方式默认新窗口) 打开一个新窗口

aInput[0].onclick = function() {

window.open('http://www.baidu.com', '_self');

opener = window.open();//返回值 返回的新开页面的window对象

opener.document.body.style.background = 'red';

 

window.close();

ff : 无法关闭

chrome : 直接关闭

ie : 询问用户

 

opener.close(); //可以通过关闭用window.open方法打开的新窗口

 

}

 

 

2）window.navigator.userAgent : 浏览器信息

 

alert( window.navigator.userAgent )

 

if ( window.navigator.userAgent.indexOf('MSIE') != -1 ) {

alert('我是ie');// ie8的MSIE是8.0 ，7是7.0 ..

} else {

alert('我不是ie');

}

 

 

3）window.location : 地址

 

 

window.location.href = window.location内容

window.location.search = url?后面的内容

window.location.hash = url#后面的内容

 

 

4)宽高

 

 

可视区尺寸

alert( document.documentElement.clientHeight );

 

document.onclick = function() {

//滚动距离

//alert( document.documentElement.scrollTop );//除去chrome

 

//alert( document.body.scrollTop );//chrome

 

//document.documentElement.scrollTop = 100

 

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

 

//alert(scrollTop)

 

var oDiv = document.getElementById('div1');

 

//scrollHeight : 内容实际宽高

 

alert(oDiv.scrollHeight);

 

//offsetHeight

//alert( document.body.offsetHeight );

 

//ie : 如果内容没有可视区高，那么文档高就是可视区

//alert( document.documentElement.offsetHeight );

 

 

}

 

offsetTop :（left）

指 obj 距离body最上方或者定位父级的位置

 

clientHeight:（width）

大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

 

offsetHeight:（width）

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

 

scrollHeight:（width）

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight

 

对某个HTML控件:（div...）

offsetHeight（width）是自身元素的高度，scrollHeight（width）是 自身元素的高度+隐藏元素的高度。

 

 

 

onscroll事件 : 当滚动条滚动的时候触发，在指定毫秒时间内触发一次

 

onresize事件 : 当窗口大小发生变化的时候触发

 

 

 

---

3、Event

 

1）焦点事件

 

焦点 : 使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。

我们可以通过一些方式给元素设置焦点 1.点击 2.tab 3.js

不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点。比如文本输入框、a标签..

 

onfocus : 当元素获取到焦点的时候触发

 

onblur : 当元素失去焦点的时候触发

 

oText.onfocus = function() {

 

if ( this.value == '请输入内容' ) {

this.value = '';

}

 

}

oText.onblur = function() {

 

if ( this.value == '' ) {

this.value = '请输入内容';

}

 

}

 

obj.focus() 给指定的元素设置焦点

obj.blur() 取消指定元素的焦点

obj.select() 选择指定元素里面的文本内容，适用于具有焦点事件的元素。

 

 

2）event事件对象、clientX、clientY

 

event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。飞机-黑匣子

 

事件对象必须在一个事件调用的函数里面使用才有内容

事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候

 

兼容：

ie/chrome : event是一个内置全局对象

标准所有浏览器下 : 事件对象是通过事件函数的第一个参数传入

获取事件（Event）对象的兼容：ev = ev || window.event

 

如果一个函数是被事件调用的那么，这个函数定义的第一个参数就是事件对象

 

clientX、clientY : 当一个事件发生的时候，鼠标到页面可视区的距离

 

 

alert( event ); //这里没有事件

 

document.onclick = function() {

alert(event);

};

 

function fn1(ev) {

//alert( event );

//alert( ev );

var ev = ev || event; //event对象的兼容

//alert(ev);

 

/*for ( var attr in ev ) { // 把该事件对象的所有属性都列出来

console.log( attr + ' = ' + ev[attr] );

}*/

 

alert(ev.clientX);

}

 

//fn1(); //不是事件调用的函数

document.onclick = fn1; //是事件调用的函数，所以event有内容

 

eg：红色小方块跟随鼠标移动而移动：

 

<body style="height: 2000px;">

<div id="div1"></div>

</body>

 

#div1 {width: 100px; height:100px; background: red; position: absolute;}

 

window.onload = function() {

 

//onmousemove : 当鼠标在一个元素上面移动的触发

//触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次

 

 

var oDiv = document.getElementById('div1');

 

document.onmousemove = function(ev) {

 

var ev = ev || event;

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

//body有2000px高度，则需要用到滚动距离，可视区域高仅为2000px

oDiv.style.left = ev.clientX + 'px';

oDiv.style.top = ev.clientY + scrollTop + 'px';//滚动条向下滚动后，鼠标到body顶部的距离就是clientY（鼠标到可视区顶部距离）+ scrollTop（滚动距离）

 

}

 

}

 

 

3）事件冒泡：

 

 

事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制

 

oDiv1.onclick = fn1; 给**加事件，给元素加事件处理函数，告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1

 

如果oDiv1有父级元素设置了点击事件，即使oDiv1没有设置上一句点击事件函数，但它也能接受到点击事件，接受后将事件传给父级元素。

 

阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

 

例如：在一个页面中，有很多元素，只有点击oBtn按钮才会显示oDiv,点击其他元素则隐藏。

 

oBtn.onclick = function(ev) {

 

var ev = ev || event;

 

ev.cancelBubble = true;

//阻止当前对象的当前事件的冒泡，不会传给父级（最后的父级为document）

 

oDiv.style.display = 'block';

 

}

document.onclick = function() {

 

//点击除了oBtn的其余所有元素都会产生事件冒泡，传给document，执行oDiv消失

 

oDiv.style.display = 'none';

 

}

 

4)事件捕获、绑定事件的形式、call

 

事件捕获：捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，和一个石子儿从水面向水底下沉一样，要说明的是在 IE，opera浏览器中，是不存在这个阶段的。

 

给一个对象绑定一个事件处理函数的第一种形式：

obj.onclick = fn;

缺点：

document.onclick = fn1;

document.onclick = fn2; //会覆盖前面绑定fn1

 

 

给一个元素绑定事件函数的第二种形式：

 

给一个对象的同一个事件绑定多个不同的函数

 

ie：obj.attachEvent(事件名称，事件函数);

1.没有捕获

2.事件名称有on

3.事件函数执行的顺序：标准ie->正序 非标准ie->倒序

4.函数中的this指向window

标准：obj.addEventListener(事件名称，事件函数，是否捕获);

 

1.有捕获，第三个参数boolean值，就是决定注册事件发生在捕获阶段还是冒泡阶段: 默认是false，false:冒泡，true：捕获

2.事件名称没有on

3.事件执行的顺序是正序

4.函数中的this触发该事件的对象obj

 

call ：函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法从第二个参数开始都是原来函数的参数列表

 

function fn1() {

alert(this);

}

document.attachEvent('onclick', function() {

fn1.call(document); //把函数中this原来指向的window改成document

});

 

 

 

function fn1(a, b) {

alert(this);

alert(a + b);

}

 

//fn1(); //window

fn1.call(null, 10, 20); //调用函数 fn1() == fn1.call()；第一个参数为null，则不改变this 原来的指向

 

事件绑定兼容写法：

 

function bind(obj, evname, fn) {

if (obj.addEventListener) {

obj.addEventListener(evname, fn, false);

} else {

obj.attachEvent('on' + evname, function() {

fn.call(obj);

});

}

}

 

调用：

bind(document, 'click', fn1);

bind(document, 'click', fn2);

 

 

事件捕获和事件冒泡例子：

 

<div id="div1">

<div id="div2">

<div id="div3"></div>

</div>

</div>

 

eg1：

 

false为冒泡，告诉div1\div2：如果有一个出去的事件触发了你，你就去执行fn1这个函数。所以点击div3的时候，执行顺序div3-div2-div1

oDiv1.addEventListener('click', fn1, false);

oDiv2.addEventListener('click', fn1, false);

oDiv3.addEventListener('click', fn1, false);

 

true为捕获，告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数。所以点击div3的时候，执行顺序div1-div2-div3

oDiv1.addEventListener('click', fn1, true);

oDiv2.addEventListener('click', fn1, true);

oDiv3.addEventListener('click', fn1, true);

 

 

eg2：

 

oDiv1.addEventListener('click', function() {

alert(1);

}, false);//冒泡，最后执行

oDiv1.addEventListener('click', function() {

alert(3);

}, true);//捕获，点击div3的时候先进入div1，首先执行

oDiv3.addEventListener('click', function() {

alert(2);

}, false);//冒泡，第二执行

 

点击div3的时候弹出的内容的先后顺序为：3-2-1

 

 

5)事件取消：

 

第一种事件绑定形式的取消:

 

document.onclick = null;

 

第二种事件绑定形式的取消:

 

ie : obj.detachEvent(事件名称，事件函数);

标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);

 

document.addEventListener('click', fn1, false);

 

document.removeEventListener('click', fn1, false);

 

 

6）键盘事件

 

onkeydown : 当键盘按键按下的时候触发

onkeyup : 当键盘按键抬起的时候触发

 

event.keyCode : 数字类型 键盘按键的值 键值

ctrlKey,shiftKey,altKey 布尔值

当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false

 

document.onkeydown = function(ev) {

var ev = ev || event;

alert(ev.keyCode);//按下任意键，弹出该键的键值

 

}

 

 

同时按下回车和ctrl键：if (ev.keyCode == 13 && ev.ctrlKey)

 

不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件

 

onkeydown : 如果按下不抬起，那么会连续触发

 

7）时间默认行为

 

事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情

怎么阻止？

当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false;

return false阻止的是 obj.on事件名称=fn 和attchEvent所触发的默认行为，用addEventListener绑定的事件不能用这种方法阻止默认行为。addEventListener绑定的事件需要通过event下面的preventDefault();

 

阻止菜单事件：

 

document.onkeydown = function() {

 

return false;

 

}

 

oncontextmenu : 浏览器右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发

 

 

8）拖拽

 

 

onmousedown : 选择元素

onmousemove : 移动元素

onmouseup : 释放元素

 

元素限制范围的拖拽封装：drag() ：

 

拖拽的时候，如果有文字或图片被选中，会产生问题

原因：当鼠标按下的时候，如果页面中有文字或图片被选中，那么会触发浏览器默认拖拽的效果

解决：

标准：阻止默认行为 return false;

非标准ie：全局捕获 obj.setCapture();

 

全局捕获 ：

当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，事件会被全局捕获元素所劫持，并触发了全局捕获元素含有的事件。

 

ie : 有，并且有效果

ff : 有，但是没效果

chrome : 没有

 

 

var oDiv = document.getElementById('div1');

var oImg = document.getElementById('img1');

 

drag(oImg);

 

drag(oDiv);

 

function drag(obj) {

 

obj.onmousedown = function(ev) {

 

var ev = ev || event;

var disX = ev.clientX - this.offsetLeft;//此时方块还没动，求得鼠标位置距离方块左边的直线距离

var disY = ev.clientY - this.offsetTop;

if ( obj.setCapture ) {//阻止IE浏览器的默认拖拽行为

obj.setCapture();

}

document.onmousemove = function(ev) {//对全部文档设置该事件，鼠标在文档中移动不受其他元素影响

var ev = ev || event;

 

var L = ev.clientX - disX;

var T = ev.clientY - disY;

 

if ( L < 0 ) {

 

L = 0;

//若left值小于0，则让它等于0，限制在可视区范围

//若if（L<100）{L=0;}，则在拖拽到100px位置时，会有磁性吸附效果，吸附到 L = 0 位置

 

} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {

 

L = document.documentElement.clientWidth - obj.offsetWidth;

//若L大于浏览器可视区减去obj的宽度的值时，让它等于该值，元素就不会拖拽出可视区

}

 

if ( T < 0 ) {

T = 0;

} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {

T = document.documentElement.clientHeight - obj.offsetHeight;

}

 

obj.style.left = L + 'px'; //方块跟随鼠标位置移动

obj.style.top = T + 'px';

}

document.onmouseup = function() {

document.onmousemove = document.onmouseup = null;

if ( obj.releaseCapture ) {//释放全局捕获

obj.releaseCapture();

}

}

return false; //阻止标准浏览器的默认拖拽行为

 

}

 

}

 

 

 

9）鼠标滚轮事件

 

ie/chrome : onmousewheel

滚动值event.wheelDelta：上：120 下：-120

 

firefox : DOMMouseScroll 必须用addEventListener

滚动值event.detail：上：-3 下：3

 

return false阻止的是 obj.on事件名称=fn 和attachEvent所触发的默认行为

addEventListener绑定的事件需要通过event下面的preventDefault();

 

滑轮控制方块的高：

 

var oDiv = document.getElementById('div1');

 

oDiv.onmousewheel = fn;

 

if (oDiv.addEventListener) {//兼容FF

oDiv.addEventListener('DOMMouseScroll', fn, false);

}

 

 

function fn(ev) {

 

var ev = ev || event;

 

var b = true;

 

if (ev.wheelDelta) {//不同浏览器值的大小和正负不同，要统一起来

b = ev.wheelDelta > 0 ？true:false;

} else {

b = ev.detail < 0 ? true : false;

}

 

 

if ( b ) {//b为true是向上滚动，如果向上滚动

 

this.style.height = this.offsetHeight - 10 + 'px';

 

} else {//如果向下滚动

 

this.style.height = this.offsetHeight + 10 + 'px';

}

 

if (ev.preventDefault) { //如果存在addEventListener，就取消默认行为

ev.preventDefault();

}

 

return false; //取消默认行为

 

}

 

 

10）cookie

 

cookie : 存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来像访问者电脑上存储数据

 

1.不同的浏览器存放的cookie位置不一样，也是不能通用的

2.cookie的存储是以域名形式进行区分的

3.cookie的数据可以设置名字的

4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样

5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样

 

我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来

username=leo; age=32

 

设置cookie：

document.cookie = '名字=值';

document.cookie = 'username=leo';

document.cookie = 'age=32';

 

如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的字符串格式的时间。

 

cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁

 

设置过期时间：

 

document.cookie = '名称=值;expires=' + 字符串格式的时间;

 

var oDate = new Date();//是个时间对象，以毫秒为基础

 

oDate.setDate( oDate.getDate() + 5 );//从现在时间到5天后，getDate()设置日期天数

 

内容最好编码存放,encodeURI：

 

document.cookie = 'username='+ encodeURI('leo\n你好') +';expires=' + oDate.toGMTString();

//toGMTString()转成字符方法

 

 

 

cookie函数封装：

 

设置cookie：

 

function setCookie(key, value, t) {

var oDate = new Date();

oDate.setDate( oDate.getDate() + t );

document.cookie = key + '=' + encodeURI(value) + ';expires=' + oDate.toGMTString();

}

 

 

得到cookie：

 

function getCookie(key) {

var arr1 = document.cookie.split('; ');//username=leo; age=32

for (var i=0; i<arr1.length; i++) {

var arr2 = arr1[i].split('=');//username=leo; age=32

if ( arr2[0] == key ) {

return decodeURI(arr2[1]);

}

}

}

 

移出cookie：

 

function removeCookie(key) {

setCookie(key, '', -1);//时间设为-1天，过期

}

 

 

//setCookie('sex','男', 10);

//alert( getCookie('sex') );

//removeCookie('sex');

 

 

 

---

4、正则表达式

 

正则 : 也叫做规则，让计算机能够读懂人类的规则。正则都是操作字符串的。

 

1）正则写法：a是填写的规则

 

var re = /a/;

var re = new RegExp('a'); //在re作为参数的时候，只能用这种写法

 

2)转义字符:

 

\s : 空格

\S : 非空格

\d : 数字

\D : 非数字

\w : 字符 ( 字母 ，数字，下划线_ )

\W : 非字符

 

 

. : 任意字符

\. : 真正的点

 

var str = 'a.c';

 

var re = /a\.c/;

 

alert(re.test(str)); //true

 

\b : 所处位置为独立的部分 （ 起始，结束，空格 ）

\B : 所处位置为非独立的部分

 

 

var str = 'onetwo';

 

var re = /\bone/;

 

alert( re.test(str) ); // true //\b所在位置为起始位置

 

 

var str = 'onetwo';

 

var re = /one\b/;

 

alert( re.test(str) ); //false //\b所处位置有t

 

 

\1 : 重复的第一个子项

\2 : 重复的第二个子项，以此类推

 

var str = 'abcb';

 

var re = /(a)(b)(c)\2/;

 

alert( re.test(str) ); //true \2代表和第二项相同的值

 

var re = /(\w)\1/; //代表cc、99等两个字符相等的

 

 

3）正则常用方法：

 

test : 正则去匹配字符串，如果匹配成功就返回真，如果匹配失败就返回假

 

test的写法 : 正则.test(字符串)

 

var str = 'abcdef';

 

var re = /b/;

 

alert( re.test(str) ); // true

 

 

 

search : 正则去匹配字符串 , 如果匹配成功，就返回匹配成功的位置，如果匹配失败就返回 -1

 

search的写法 : 字符串.search(正则)

 

正则中默认是区分大小写的.如果不区分大小写的话，在正则的最后加标识 i

 

var str = 'abcdef';

 

var re = /B/i;

 

//var re = new RegExp('B','i');

 

alert( str.search(re) );

 

 

 

match : 正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null

 

match的写法 : 字符串.match(正则)

 

正则默认：正则匹配成功一次就会结束，不会继续匹配

如果想全部查找，就要加标识 g (global全局匹配)

 

量词 + : 至少出现一次

 

var str = 'haj123sdk54hask33dkhalsd879';

 

var re = /\d+/g;

 

alert( str.match(re) ); //[123,54,33,879]

 

 

 

 

replace : 正则去匹配字符串，匹配成功的字符去替换成新的字符串

 

replace的写法 : 字符串.replace(正则,新的字符串)

 

var str = 'aaa';

var re = /a+/g;

 

str = str.replace(re,'b');

 

alert(str); // b

 

 

 

 

| : 或的意思

 

replace : 第二个参数：可以是字符串，也可以是一个回调函数

 

eg:敏感词过滤：

 

HTML:

 

替换前<br />

<textarea>

</textarea><br />

替换后<br />

<textarea>

</textarea><br />

<input type="button" value="确定" id="input1" />

 

JS:

 

window.onload = function(){

var aT = document.getElementsByTagName('textarea');

var oInput = document.getElementById('input1');

 

var re = /菲称|中国船|监视之下/g;

 

oInput.onclick = function(){

 

//aT[1].value = aT[0].value.replace(re,'*'); //这样只能把几个汉字转成一个*

aT[1].value = aT[0].value.replace(re,function(str){ //函数的第一个参数：就是匹配成功的字符

var result = '';

for(var i=0;i<str.length;i++){

 

result += '*';

}

return result;

});

 

};

 

};

 

 

 

 

 

4）匹配子项 : 小括号 () (还有另外一个意思，分组操作)

 

把正则的整体叫做（母亲）

然后把左边第一个小括号里面的正则，叫做这个第一个子项(母亲的第一个孩子)

第二个小括号就是第二个孩子

 

var str = '2013-6-7';

 

var re = /(\d+)(-)/g;

 

str = str.replace(re,function($0,$1,$2){

//第一个参数：$0（母亲）,第二个参数 : $1(第一个孩子)

//,第三个参数 : $1(第二个孩子)

 

//alert( $2 ); // -

 

//return $1 + '.';

 

return $0.substring(0,$0.length-1) + '.';

 

});

 

alert( str ); //2013.6.7

 

 

 

var str = 'abc';

 

var re = /(a)(b)(c)/;

 

alert( str.match(re) ); //[abc,a,b,c](当match不加g的时候才可以获取到子项的集合)

 

 

5）字符类：

 

字符类 : 一组相似的元素 [] 中括号的整体代表一个字符，[]中的内容都是或的关系

 

var str = 'abdc';

 

var re = /a[bde]c/;

 

alert( re.test(str) ); //true

 

 

排除 : ^ 如果^写在[]里面的话，就代表排除的意思

 

var str = 'abc';

 

var re = /a[^bde]c/;

 

alert( re.test(str) ); // false

 

 

组合写法：[a-z0-9A-Z]：

 

var str = 'abc';

 

var re = /a[a-z0-9A-Z]c/;

 

alert( re.test(str) );// true

 

 

6）量词 : 代表前面的值出现的次数，{n,m}，至少出现n次，最多m次

 

{n,} 至少n次

* 任意次 {0,}

？ 零次或一次 {0,1}

+ 一次或任意次{1,}

{n} 正好n次

 

eg：

 

{4,7} : 最少出现4次，最多出现7次

{4,} : 最少出现4次

{4} : 正好出现4次

 

 

7）正则收尾：^ 开始 $ 结束

 

^ : 正则的最开始位置，就代笔起始的意思

$ : 正则的最后位置 , 就代笔结束的意思

 

eg:去掉前后空格

 

var str = ' hello ';

 

alert( '('+trim(str)+')' ); // (hello)

 

function trim(str){

 

var re = /^\s+|\s+$/g;

 

return str.replace(re,'');

 

}

 

 

8)正则与面向对象

 

把方法包在一个JSON里

 

var re = {

qq : /[1-9][0-9]{4,9}/,

email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/,

number : /\d+/

};

 

用的时候：re.email

 

 

9）常用正则例子：

 

匹配中文：[\u4e00-\u9fa5]

行首行尾空格：^\s*|\s*$

Email：^\w+@[a-z0-9]+(\.[a-z]+){1,3}$

网址：[a-zA-z]+://[^\s]*

QQ号：[1-9][0-9]{4,9}

邮政编码：[1-9]\d{5}

身份证：[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x