javascript中级笔记

DOM : Document Object Model 文档对象模型

文档：html页面

文档对象：页面中元素

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

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

DOM节点

getElementById

getElementByTagName

document

document.body

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

标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点

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

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

DOM节点的类型有很多种 12种

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

元素节点 : 1

属性节点 : 2

文本节点 : 3

childNodes问题很多建议使用children

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

标准下：只包含元素类型的节点（不包含文本节点了）

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

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

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

}

元素.firstChild : 只读属性第一个子节点

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

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

元素

var oFirst = oUl.firstElementChild || oUl.firstChild;

oFirst.style.background = 'red’;

//在不支持firstElementChild的时候它返回null，后面返回textNode，所以会报错。

正确的使用方法如下：

if ( oUl.children[0] ) {

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

} else {

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

}

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

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

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

元素.parentNode : 只读属性当前节点的父级节点没有兼容性问题

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

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

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

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

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

到当前元素的offsetParent的距离

如果没有定位父级

offsetParent -> body

offsetLeft -> html

如果有定位父级

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

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

其他：到定位父级的距离

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

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

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

创建元素：

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

var oLi = document.createElement('li');

//oLi.innerHTML = oText.value + '<a href="javascript:;">删除</a>';

oLi.innerHTML = oText.value;

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

oA.innerHTML = '删除';

oA.href = 'javascript:;';

oA.onclick = function() {

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

oUl.removeChild( this.parentNode );

}

oLi.appendChild( oA );

//添加到页面中

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

//oUl.appendChild( oLi );

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

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

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

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

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

获取所有节点

document.getElementsByTagName(‘*’);

表单元素：

</form>

var oForm = document.getElementById('form1’);

获取表单中一个元素表单.元素name

alert( oForm.username.value );

table里面会默认有一个tbody

获取第二个tr里的第二个元素的写法：

oTab.children[0].children[1].children[1].innerHTML;

tHead : 表格头

tBodies ：表格正文

tFoot ：表格尾

rows ：行

cells ：列

oTab.tBodies[0].rows[1].cells[1].innerHTML;

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

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

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

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

//alert(opener == window)

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

window.close(); 关闭窗口

ff : 无法关闭 chrome : 直接关闭 ie : 询问用户

//window.navigator.userAgent : 浏览器信息

//alert( window.navigator.userAgent )

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

alert('我是ie');

} else {

alert('我不是ie');

}

window.location.href = window.location内容

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

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

//可视区尺寸

//alert( document.documentElement.clientHeight );

//滚动距离

//alert( document.documentElement.scrollTop ); 可视区域到顶部的距离

//alert( document.body.scrollTop );

//document.documentElement.scrollTop = 100

//var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 这样做才兼容

//alert(scrollTop)

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

//scrollHeight : 内容实际宽高

//offsetHeight

//alert( document.body.offsetHeight );

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

//alert( document.documentElement.offsetHeight );

alert( document.body.offsetHeight );

//onscroll : 当滚动条滚动的时候触发

var i = 0;

window.onscroll = function() {

document.title = i++;

}

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

window.onresize = function() {

document.title = i++;

}

事件：

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

我们可以通过一些方式给元素设置焦点

1.点击

2.tab

3.js

不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点

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

oText.onfocus = function()

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

oText.onblur = function()

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

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

obj.select() 选择指定元素里面的文本内容选中的是用户输入的内容，div里的内容不行

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

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

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

兼容

ie/chrome : event是一个内置全局对象 ff下面是没有这个对象的 var ev = ev || event;

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

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

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

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

/*document.onclick = function() {

alert(event);

};*/

function fn1(ev) {

//alert( event );

//alert( ev );

var ev = ev || event;

//alert(ev);

/*for ( var attr in ev ) {

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

}*/

alert(ev.clientX);

}

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

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

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

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

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

document.onmousemove = function(ev) {

//document.title = i++;

var ev = ev || event;

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

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

oDiv.style.top = ev.clientY + scrollTop + 'px';

}

事件冒泡：

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

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

var oDiv2 = document.getElementById('div2');

var oDiv3 = document.getElementById('div3');

function fn1() {

alert( this.id );

}

//oDiv1.onclick = fn1; 给**加事件，给元素加事件处理函数

//事件函数绑定

oDiv1.onclick = fn1;//告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1

//oDiv2.onclick = fn1;

oDiv3.onclick = fn1;

//我在马路边捡到一分钱，把他交个警察叔叔

/*我.on马路边捡到一分钱 = function() {

把他交个警察叔叔

}*/

</div>

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

ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡

事件捕获

IE下是没有的，在绑定事件中，标准下是有的

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

//obj.onclick = fn;

function fn1() {

alert(this);

}

function fn2() {

alert(2);

}

//document.onclick = fn1;

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

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

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

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

1.没有捕获

2.事件名称有on

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

4.this指向window

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

1.有捕获

2.事件名称没有on

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

4.this触发该事件的对象

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

fn1.call(document);

});

document.attachEvent('onclick', fn2);*/

//是否捕获 : 默认是false false:冒泡 true：捕获冒泡和捕获是一个相对的东西，不冒泡就捕获

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

document.addEventListener('click', fn2, false);*/

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

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

function fn1(a, b) {

alert(this);

alert(a + b);

}

//fn1(); //window

fn1.call(null, 10, 20); //调用函数 fn1() == fn1.call()

捕获：

//false = 冒泡

//告诉div1，如果有一个冒泡的事件触发了你，你就去执行fn1这个函数

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

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

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

//告诉div1，如果有一个捕获的事件触发了你，你就去执行fn1这个函数

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

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

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

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

alert(1);

}, false);

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

alert(3);

}, true);

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

alert(2);

}, false);

取消绑定事件

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

function fn1() {

alert(1);

}

function fn2() {

alert(2);

}

//document.onclick = fn1;

//document.onclick = null; //取消

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

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

/*document.attachEvent('onclick', fn1);

document.attachEvent('onclick', fn2);

document.detachEvent('onclick', fn1);*/

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

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

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

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

键盘事件：

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

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

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

ctrlKey,shiftKey,altKey 布尔值

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

document.onkeydown = function(ev) {

//alert(1);

var ev = ev || event;

//alert(ev.keyCode);

}

document.onclick = function(ev) {

var ev = ev || event;

alert(ev.ctrlKey);

}

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

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

//onkeydown : 如果按下不抬起，那么会连续触发（刚开始有间隔不能立刻反应过来，玩游戏的话会卡一下）

//定时器

document.onkeydown = function(ev) {

var ev = ev || event;

switch(ev.keyCode) {

case 37:

oDiv.style.left = oDiv.offsetLeft - 10 + 'px';

break;

case 38:

oDiv.style.top = oDiv.offsetTop - 10 + 'px';

break;

case 39:

oDiv.style.left = oDiv.offsetLeft + 10 + 'px';

break;

case 40:

oDiv.style.top = oDiv.offsetTop + 10 + 'px';

break;

}

阻止默认事件

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

怎么阻止？

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

document.onkeydown = function() {

return false;

}

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

document.oncontextmenu = function() {

//alert(1)

return false;

}

事件的深入应用

文件拖拽

onmousedown : 选择元素

onmousemove : 移动元素

onmouseup : 释放元素

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

oDiv.onmousedown = function(ev) {

var ev = ev || event;

var disX = ev.clientX - this.offsetLeft;

var disY = ev.clientY - this.offsetTop;

document.onmousemove = function(ev) {

var ev = ev || event;

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

oDiv.style.top = ev.clientY - disY + 'px';

}

document.onmouseup = function() {

document.onmousemove = document.onmouseup = null;

}

拖拽问题：

1.拖拽的时候，如果有文字被选中，会产生问题

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

解决：

标准：阻止默认行为（两种结局办法）

非标准ie：全局捕获

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

oDiv.onmousedown = function(ev) {

var ev = ev || event;

var disX = ev.clientX - this.offsetLeft;

var disY = ev.clientY - this.offsetTop;

if ( oDiv.setCapture ) {

oDiv.setCapture();

}

document.onmousemove = function(ev) {

var ev = ev || event;

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

oDiv.style.top = ev.clientY - disY + 'px';

}

document.onmouseup = function() {

document.onmousemove = document.onmouseup = null;

//释放全局捕获 releaseCapture();

if ( oDiv.releaseCapture ) {

oDiv.releaseCapture();

}

return false;

}

var aInput = document.getElementsByTagName('input');

aInput[0].setCapture(); // 设置全局捕获，当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发

ie : 有，并且有效果

ff : 有，但是没效果

chrome : 没有

aInput[0].onclick = function() {

alert(1);

}

aInput[1].onclick = function() {

alert(2);

}

1.拖拽的时候，如果有文字被选中，会产生问题

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

解决：

标准：阻止默认行为

非标准ie：全局捕获

拖拽图片会有问题，原因，解决的办法同上

鼠标滚轮事件

ie/chrome : onmousewheel

event.wheelDelta

上：120

下：-120

firefox : DOMMouseScroll 必须用addEventListener

event.detail

上：-3

下：3

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

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

oDiv.onmousewheel = fn;

if (oDiv.addEventListener) {

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

}

//alert(2);

function fn(ev) {

//alert(1);

var ev = ev || event;

//alert( ev.wheelDelta );

//alert(ev.detail)

var b = true;

if (ev.wheelDelta) {

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

} else {

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

}

//alert(b);

if ( b ) {

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

} else {

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

}

if (ev.preventDefault) {

ev.preventDefault(); 阻止默认行为

}

return false;

}

/*document.oncontextmenu = function() {

return false;

}*/

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

return false;

});

/*document.addEventListener('contextmenu', function(ev) {

ev.preventDefault();

//return false;

});*/

操作cookie

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

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

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

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

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

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

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

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

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

//document.cookie = '名字=值';

/*document.cookie = 'username=leo';

document.cookie = 'age=32';*/

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

var oDate = new Date();

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

//alert(typeof oDate)

//alert(typeof oDate.toGMTString());

//内容最好编码存放,encodeURI

//alert( encodeURI('你好') );

//alert( decodeURI('%E4%BD%A0%E5%A5%BD') )

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

document.cookie = 'age=32';*/

//document.cookie

//alert(decodeURI(document.cookie)); //username=leo; age=32

/*document.cookie = 'username=leo;expires=' + oDate.toGMTString();

document.cookie = 'age=32';*/

function setCookie(key, value, t) {

var oDate = new Date();

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

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

}

function getCookie(key) {

var arr1 = document.cookie.split('; ');

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

var arr2 = arr1[i].split('=');

if ( arr2[0] == key ) {

return decodeURI(arr2[1]);

}

function removeCookie(key) {

setCookie(key, '', -1);

}

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

//alert( getCookie('age') );

removeCookie('username');

removeCookie('age');

removeCookie('sex');

posted @ 2015-04-25 15:26 前端小果阅读(183) 评论(0) 收藏举报

刷新页面返回顶部

前端小果

javascript中级笔记

公告