js学习笔记

来源：互联网发布：nginx获取header信息编辑：程序博客网时间：2024/06/05 18:52

JavaScript

1.自定义元素属性

1.通过js给元素添加自定义属性，存储在内存中。<script>div.abc=1</script><div id="d1" ></div>

2.手动给元素行间添加自定义属性通过<script>d1.getAttribute("abc") </script> <div id="d1" abc=1></div>

2.数组

1.对象自变量创建数组

var arr=[];定义一个空数组

var arr=[1,2,3,4];

2.实例化数组对象创建数组

var arr=new Array();

var arr=new Array(size);

var arr=new Array("a","b","c");

2.添加删除

例子数组：var arr=[1,2,3,4];

var len=arr.push（8）;//arr[1,2,3,4,8]将元素添加到数组末尾,返回值为数组长度：len=5

var len=arr.unshift(8);//arr[8,1,2,3,4]将元素添加到数组开头，返回值为数组长度：len=5

var last=arr.pop();//arr[1,2,3]删除数组最后一个元素，并返回删除的元素：last=4

var first=arr.shift();//arr[2,3,4]删除数组第一个元素，并返回删除的元素：first=1

3.遍历数组

例子数组：var arr=["a","b","c","d","e"];

1）一般for循环

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

document.write(arr[i]+",");

}

2)for-in遍历

for(var item in arr){

document.write(arr[item]+",");

}

item变量对应数组的下标；

3）forEach遍历数组

var newarr=arr.forEach(function(item,index){

document.write(item+",");

document.write(index+",");

return item;

});

console.log(newarr);返回结果为:undefined,无法返回结果

参数item为数组arr的元素，index参数为数组下标。

结果：a,b,c,d,e

1,2,3,4,5

4)map遍历数组可以返回值

var newarr=arr.map(function(item,index){

document.write(item+",");

return item+5;

});

console.log(newarr);

4.数组操作

例子数组：var arr=["a","b","c","d","e"];

1）splice(1,2)从1(包括自己)的位置开始向后删除2个元素，以数组形式返回所有被移除的元素

var newArray=arr.splice(0,2); 最后newArray数组为[a,b];

arr.splice(1,2,v1,v2)也可再删除元素的位置添加元素v1,v2

2）slice(start,end)以数组的形式返回数组的一部分，不包括end位置的元素，如果缺少end参数，将复制start以及之后的所有元素

var newarr=arr.slice(0,2);

3）join(分隔符)用数组的元素组成字符串

var str =arr.join('-');

4)concat(用于合并数组并返回一个新数组)

var arr1=["1","2","3"]

var newArray=arr.concat(arr1)；

5)reverse()将数组反转(倒过来显示)

var new Array=arr.reverse();

6)sort()用于对数组的元素进行排序(排序规则按ASCALL码大小排序，每次先比较每个元素的第一位，在比较后几位).sort()为冒泡排序，每次比较两个

例如:

var arr1=[2,25,5,63,42,34,68,9];

var newarr=arr.sort();

console.log(newarr);

结果为:[2, 25, 34, 42, 5, 63, 68, 9]

优化:var arr1=[2,25,5,63,42,34,68,9];

var newarr=arr.sort(function(a,b){

return a-b;/return b-a;

});

console.log(newarr);

结果为:[2, 5, 9, 25, 34, 42, 63, 68]/[68, 63, 42, 34, 25, 9, 5, 2]

return a-b：从小到大排序(升序)

return b-a：从大到小排序(降序)

字符串操作

字符串:零个或多个16位unicode字符组成的字符序列,字符串由双引号或单引号表示

1)字面量的法式声明字符变量

var str1="aaaa";

/*创建对象的方式创建字符串*/

var str1 =new String("abcdf");//实例化a对象

length -返回字符串的长度 alert(str1.length);

toLowerCase() -将整个字符串转成小写字母(仅仅返回一个新的字符串，不会改变原来的字符串)

toUpperCase() -将整个字符串转成大写字母

indexOf("asd") -返回字符串中子串第一处出现的索引，没匹配返回-1

lastIndexOf("c") -返回字符串中子串最后出现的索引，没匹配返回-1

slice() -用于从已有字符串中提取部分字符串，返回新的字符串

var str=string.slice(statr,[,end]);

slice()返回的子串包括start处的字符串，但不包括end处字符串

split() -用于把一个字符串分割成字符串数组

var arr=string.split("分隔符"[,length]);length参数表示截取长度

var str3="a=bc=def=g";

var arr1=str3.split("=");

结果:arr1=["a", "bc", "def", "g"]

第一个参数必须指定分隔的符号，第二个参数可选，为返回数组长度

substr() -用于返回一个指定位置开始的指定长度的字符串

var str=string.substr(start[,length]);//start参数必须，表示字符串起始位置，length可选截取字符串长度。

substring() -返回字符串中介于两个指定下标之间的字符

var str=string.substring(start[,end]);

substring() -返回的字符串包括start处的字符。但不包括end处字符

concat() -将两个或多个字符串的文本组合起来，返回一个新的字符串

var str2="ssss";

var str=str1.concat(str2);

charAt() -返回指定位置的字符

var str=string.charAt(index)；

index即字符在字符串中的下标

例子：var str2=str1.charAt(2);

console.log(str2);

parseInt(string) -将字符串转换成一个整数返回

parseFloat(string) -将字符串转化成浮点数返回

如果第一个字符解析不到数字，则返回一个NaN非数字值

var str2="220px";

var str3="a220px";

var num1=parseInt(str2);

var num2=parseInt(str3);

console.log(num1);//结果：220

console.log(num2);//结果：NaN

toString() -用于将当前对象以字符串的形式返回

var str=num.toString();

var str=bool.toString();

funcion函数

1.函数是执行的可重复使用的代码块，函数是js唯一拥有自身作用域的结构

声明：function 函数名(参数){语句;}

调用:函数名(参数);

函数可以有参数也可以没有参数

函数可以有名字也可以没有函数名(匿名函数)

在使用return语句时，函数会停止执行,并返回指定的值

2.函数参数

1)形参:定义函数时的参数为形参：function num(a,b)//a,b为形参

2)实参：调用函数时实际传的参数为实参num(2,3)//2,3即为实参

3）arguments指向实参对象的引用，是一个实参对象。

事件

1.获取元素

1)var 变量名=document.getElementById('标签id名');

2)var 变量名=document.getElementsByTagName('标签名');

3)var 变量名=document.getElementsByClassName('类名');//ie6--ie8不支持

2.常用事件

onclick -单击 ondblclick -双击事件 onblur -失去焦点

onfocus -获取焦点 onkeydown -键盘按下 onkeyup -键盘抬起

onload -页面加载 onresize -窗口大小改变 onscroll -滚动条改变

onmousedown-鼠标按下onmousemove -鼠标移动 onmouseup -鼠标松开

Onmouseover -鼠标移入onmouseout - 鼠标移出 onsubmit -表单提交

onchange -表单改变(改变后控件失去焦点时触发)

oninput -表单改变(只要表单元素改变就会触发）

变量及作用域

1.全局变量:申明在所有函数之外的变量

局部变量：申明在函数体中的变量

局部变量特性：只能在当前函数体中访问

函数体内优先使用局部变量

函数执行完毕时，局部变量立刻销毁(gc回收机制); 2.声明提升：把所有变量和函数的声明提升到当前作用域的最前面。

this指针：js的一个关键字，随着函数使用场合不同，this的值会发生变化，this永远指向其所在函数的所有者，如果没有所有者，指向全局对象window

js计时器

计时器分为：间歇调用和超时调用，通过设置超时值和间歇时间值来调度代码在特定的时刻

行。

间歇调用：每隔一段时间去执行一段代码。

超时调用：在指定的时间过后执行代码。

超时调用需要用到windows对象的setTimeout()方法。

语法：setTimeout(函数/函数名，毫秒数)

如果需要取消超时调用，可以在超时之前取消调用计划：clearTimeout(计时器);

间歇调用需要使用window对象的setInterval()方法。

语法：

setInterval(函数/函数名,毫秒数)

如果需要取消间歇调用：clearInterval(计时器);

Js系列属性

1.scroll系列属性介绍

scrollLeft: 设置或获取当前左滚的距离，即左卷的距离。

scrollTop: 设置或获取当前上滚的距离，即上卷的距离。

scrollHeight:获取对象可滚动的总高度。

scrollWidth: 获取对象可滚动的总宽度。

注：这些属性只能用于元素设置了overflow的css样式中，否者这两个属性没有意义。

且overflow的值不能位visible，但可以为hidden，auto，scroll，其中hidden最常见。（子元素大小超出了父元素）

2.offset系列属性介绍

offsetLeft : 获取对象左侧与父级之间的距离（默认是窗口）

offsetTop :获取对象上侧与父级之间的距离（默认为窗口）

offsetWidth :获取元素自身的宽度（包含边框）

offsetHeight:获取元素自身的宽度(包含边框)

3.client系列属性介绍

clientLeft、clientTop:获取元素内容到边框的距离，效果和边框宽度相同（很少用）.

clientWidth:获取元素自身的宽度（不含边框）

clientHeight:获取元素自身的高度（不含边框）

Javascript图片不间断滚动

1.获取屏幕宽度和高度

2.获取文档宽度和高度

3.获取文档滚动条的距离

获取屏幕的宽度和高度：

document.documentElement.clientHeight 屏幕高度

document.documentElement.clientWidth 屏幕宽度

获取文档宽度和高度

document.documentElement.offsetHeight 文档高度

document.documentElement.offsetWidth 文档宽度

获取滚动条的距离

document.documentElement.scrollTop 只有在ie、opera、ff标准模式下有效

document.body.scrollTop在ie、operation、ff怪异模式或chrome、safari(怪异模式或标准模式)有效。.

DOM操作

节点

1.节点关系

parentNode(父节点):每个节点都有一个parentNode属性，该属性指向文档树中的父节点。

children(所有子节点)：children返回指定元素的子节点集合，只包含元素节点

IE8及更早版本的children属性包含注释节点，IE9之后版本只返回元素节点，所以使用children

时避免子元素有注释

previousSibing:同一节点列表的前一个节点（IE8以下支持,其他浏览器解析与此意义不同）

PreviousElementSibling:同一节点列表的前一个元素节点（IE8以下不认识其他都支持）

nextSibing:同一节点列表的下一个节点（IE8以下支持,其他浏览器解析与此意义不同）

nextElementSibling:同一节点列表的下一个元素节点（IE8以下不认识其他都支持）

firstChild: 节点列表中的第一个子节点（IE8以下支持，其他浏览器解析与此意义不同）

firstElementChild:节点列表的第一个元素子节点（IE8以下不认识,其他浏览器支持)

lastChild: 节点列表中的最后一个子节点（IE8以下支持，其他浏览器解析与此意义不同）

lastElementChild:节点列表的最后一个元素子节点（IE8以下不认识,其他浏览器支持)

2.创建节点

</ul>

</div>

1）createElement():创建一个元素节点（创建好后保存在js文件中)这个节点不会自动添加到文档（document）里

例如： var newlis=document.createElement("li");创建li的新节点

2）createTextNode():创建一个文本节点，常用来往元素节点里添加内容，也不会自动添加到文档里。

例如： var newlitext=document.createTextNode("我是新的节点li");

3）node.setAttribute(“title”,”abc”):设置node节点的title属性值为abc。

例如： newlis.setAttribute("title","pp");//为创建的li新节点添加属性

3.插入和删除节点

4）appendChild(): 节点插入到最后。

例如： inner.appendChild(newlis);

5）insertBefore()：插入节点到目标节点的前面

例如： inner.insertBefore(newlis,lis[1]);

6）node.removeChild(lis[1]): 把上面的lis[0]节点从node节点里删除

例如： inner.removeChild(lis[1]);把插入到inner的lis[1]节点删除

不过一般情况下，不知道要删除的节点的父节点是什么，因此一般会这

node.parentNode.removeChild(node);

例如： lis[1].parentNode.removeChild(lis[1]);//lis[1]节点的父节点中删除lis[1]节点

4.替换复制节点

parentNode.replaceChild(newNode,oldNode);//将oldNode换成newNode

注：他们必须是parent Node的子节点

例如： inner.replaceChild(newlis,lis[1]);

Node.cloneNode(boolean)复制node节点

参数：true（深复制）,复制整个节点和里面的内容；

例如： var newul=inner.cloneNode(true);

outer. appendChild(newul);

false（浅复制）,只复制节点，不会复制节点里的内容。

JavaScript BOM

1.Global对象：一个固有对象，把所有全局方法集中在一个对象中。所有在全局作用域内定义的属性和方法，都是Global对象的属性或方法。

Global对象不直接使用，并且不能new运算符创建例如:isNaN,eval(),paesrInt(),parseFloat()都是Global对象的方法。

2.BOM

1)BOM是browser object model 的缩写，简称浏览器对象模型

2)BOM提供了独立于内容而与浏览器窗口进行交互对象

3)由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window

4)BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

注：如果想在web中使用JavaScript，那么BOM是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，该功能与网页的任何内容无关。

3.Window对象：

BOM的核心对象是window,他表示的是浏览器窗口的实例；在浏览器中，window对象有着双重角色，即是通过js访问浏览器窗口的接口，又是规范的Global对象。所有在全局变量中声明的函数，变量都会成为window的属性和方法。

4.窗口位置

IE,Safari,Opera,Chrome都提供了screenLeft和screenTop属性，分别用来表示窗口相对于屏幕左边和上边的位置。

Firefox则使用screenX和screenY提供相同的信息位置。

所以我们无法去跨越浏览器的条件下获取窗口左边和上边的精确坐标。

导航和打开窗口

window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

1.URL：可选字符串，声明新窗口中文档的URL.

2.Name :声明新窗口的名称，名称可以是<a>属性target的值

3.features:可选的字符串，声明了新窗口要显示的标准浏览器的特征，否则新窗口将具有所有标准特征。（例如：距离左边多少距离，顶部多少距离，新窗口多大）

例如： btn.onclick=function(){

window.open("https://www.baidu.com","_blank","resizable=no,height=400,

width=300,left=40px,top=40px");

}

5.系统对话框

浏览器通过alert(),confirm(),prompt()方法可以调用系统对话框向用户显示信息。

系统对话框在浏览器中的显示和网页没关系，也没有html，外观由浏览器设置决定，而不是css

并且系统对话框都是同步的，也就是说，显示这个对话框的时候代码处于停止状态，关掉对话框后才会继续执行。

alert():接受一个字符串并显示给用户。其中包含了一个OK按钮和一段文本。

通常用来生成“警告”。

confirm():生成的对话框除了由OK按钮外还有一个cancel按钮，可以让用户决定是否执行给定的操作。

我们可以通过confirm()返回的布尔值来判断用户选择的结果，从而进行判断操作。

var abc=confirm("abc");

if(abc){

alert("abc");

}

else{

alert("cba");

}

prompt():显示用户可输入的对话框。

如果用户单击提示框的取消按钮，则返回null，如果用户点击确认按钮，则返回输入字段当前显示的文本。

var abc=prompt("你好，请输入您的名字","");

if(abc==null){

var abc=prompt("你好，请输入您的名字","");

}else{

alert("你好"+abc);

}

navigator对象

navigation对象现在是识别客户端浏览器的事实标准，navigation对象是所有支持JavaScript浏览器所共有的。

navigation对象常用属性：

userAgent:浏览器用户代理字符串（判断浏览器是什么浏览器用于处理浏览器兼容）

onLine：浏览器是否连接了互联网

platform:浏览器所在的系统平台

history对象

history保存用户上网的历史记录，从窗口被打开算起。

使用go()方法可以在用户历史记录中任意跳转，可以向前，也可以向后。

例如： history.go(-2);

JavaScript获取元素样式

getComputedStyle方法：获取元素的样式

getComputedStyle(nodeObj,false)

第一个参数是要获取样式的节点对象；

第二个参数可以写成任何的字符，一般写成false或者null，这里最好用false因为null在IE9+会有问题；

注：IE8以下不支持 getComputedStyle(nodeObj,false)方法

例如： var style= getComputedStyle(con,false).width;

//写法一：只能用属性height

var style= getComputedStyle(con,false).height;

//写法二：可以用变量表示

//1.属性写法

var style= getComputedStyle(con,false)["height"];

//2.变量写法

var attr="height";

var style= getComputedStyle(con,false)[attr];

alert(style);

currentStyle：该属性反悔的是一个对象，计算后的样式的属性值对的合集（可以在IE8中显示）

例如：var style=con.currentStyle.height;

var style=con.currentStyle.["height"];

兼容性函数封装类库：

function getStyle(obj,attr){

if(obj.currentStyle){

var style=obj.currentStyle[attr];

}

else{

var style=getComputedStyle(obj,false)[attr];

}

return style;

}

到时候直接调用getStyle()函数就可以

alert(getStyle(con,"height"));

JavaScript事件对象

event事件对象

event对象代表事件的状态。比如：获取键盘按下或弹起的按键，获取鼠标的位置，获取事件名称等等......

Event对象中包含了所有与事件有关的信息，事件通常与函数结合使用，函数不会在事件发生前被执行。（异步代码）

用途：需要获取和事件的信息时使用

例如：FireFox,Chrome等浏览器中要获取event对像，需要从函数中传入，参数名随意。

Functions f(a,b){}其中函数的第一个参数就是event事件对象

而在IE浏览器中event作为window对象的一个属性存在，可以直接使用event或者window.event

Event事件对象：

type :获取这个事件的类型。例如：click

Target :获取绑定事件的DOM元素

KeyCode :获取键盘的键码

RelatedTarget :获取移入移出目标点离开或进入的那个DOM元素

CurrentTarget :获取冒泡前触发的DOM元素，等同于this

pageX/pageY :获取相当于页面原点的水平/垂直坐标

ScreenX/ScreenY:获取显示器屏幕位置的水平/垂直坐标

ClientX/clientY:获取相当于页面视口的水平/垂直坐标

Result :获取上一个相同事件的返回值

TimeStamp :获取事件触发的事件戳

Which ：获取鼠标的左中右键（1，2，3）获取键盘按键

例如：

var con=document.getElementById('con');

con.onclick=function(e){

//其他的浏览器event事件对象

console.log(e);

//IE的event事件对象写法

console.log(window.event);

//兼容性写法获得event对象事件的方法

var e=e || window.event;

console.log(e);

//type :获取这个事件的类型。例如：click

console.log(e.type);

// Target :获取绑定事件的DOM元素

console.log(e.target);

//ClientX/clientY:获取相当于页面视口的水平/垂直坐标

console.log(e.clientX,e.clientY);

}

//KeyCode :获取键盘的键码

document.onkeydown=function(e){

var e=e || window.event;

console.log(e.keyCode);

}

阻止默认事件

在W3C中支持方法为：

event.preventDefault();

在IE中支持的方法为：

event.returnValue=false;

//例如：阻止右击鼠标事件oncontextmenu兼容写法

con.oncontextmenu=function(e){

var e=e || window.event;

if(e.preventDefault()){

e.preventDefault();

}

else{

e.returnValue=false;

}

Math对象

1.math对像概述：

Math(算数)对象的作用：执行常见的算数任务，保存数学公式和信息

在JavaScript中Math对象是一个全局对象，在使用math对像之前，不需声明变量math对象，也不用定义，js会自动创建，我们只需直接调用就行。

2.Math对象的属性和方法

Math.PI : Math对象的一个属性，返回是一个圆周率。

Math.abs()： Math对象的一个方法，返回数字的绝对值

Math.ceil(): 执行向上舍入，即它总是将数值向上舍入为最接近的整数

Math.floor():执行向下舍入，即它总是将数值向下舍入为最接近的整数

Math.min() :用于确定一组数值的最小值

Math.max():用于确定一组数值的最大值

Math.round():执行标准舍入，即总是将数值四舍五入为最接近的整数

Math.random():用于求出0-1的随机数

例如：

var a=-2.4;

var b=-12;

var c=5;

d=2.5;

//Math.PI : Math对象的一个属性，返回是一个圆周率。

//console.log(Math.PI);

//Math.abs()： Math对象的一个方法，返回数字的绝对值

console.log(Math.abs(a));

console.log(Math.abs(b));

console.log(Math.abs(c));*/

//Math.ceil(): 执行向上舍入，即它总是将数值向上舍入为最接近的整数

// console.log(Math.ceil(2.4));//结果为 3

// console.log(Math.ceil(-2.4));//结果为 -2

//Math.floor():执行向下舍入，即它总是将数值向下舍入为最接近的整数

// console.log(Math.floor(2.4));//结果为 2

// console.log(Math.floor(-2.4));//结果为 -3

//Math.min() :用于确定一组数值的最小值

// console.log(Math.min(a,b,c));

//Math.max():用于确定一组数值的最大值

// console.log(Math.max(a,b,c));

//Math.round():执行标准舍入，即总是将数值四舍五入为最接近的整数

console.log(Math.round(d));

console.log(Math.round(a));

//Math.random():用于求出0-1的随机数

console.log(Math.random());

//20-30之间的整数随机数

/*setInterval(function(){

console.log(Math.floor( Math.random()*10+20));

},1000)*/

</script>

Date对象

1.date对象：用来操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。

Date对像使用自1970年1月1日零点开始通过毫秒来保存日期。

2.创建日期对象：需要使用new操作符，Date构造函数。返回一个表示本地日期和时间的 Date对象.new Ddate();ip

例如：Sun(星期) May(月份) 03(日期) 2017(年份) 13:23:34(时间)GMT(格林尼治时间)+0800(时区)(中国标准)

new Date(milliseconds):把毫秒转换为Date对象

Milliseconds｛int｝:毫秒数；表示从‘1970/01/01 00:00:00’为起点，开始叠加的毫秒数

起点的时分秒还要加上当前所在的时区，北京时间为东8区，固起点时间为:

1970/01/01 08:00:00

new Date(dateStr):把字符串转换date对象

“yyyy/MM/dd HH:mm:ss”

例如：console.log(new Date("2017/8/4 12:11:12"));

New Date (year,month,opt_day,opt_hours,opt_minutes,opt_seconds,opt_milliseconds):把年月日，时分秒转换为Date对象

Year｛int｝：年份；4位数字。例如：1999，2008

Month{int}:月份；2位数字。从0开始计算，0表示1月，11月表示12月。

opt_day{int}:（可选）日：2位数；从1开始计算，1表示1号；

opt_hours{int}:(可选)时：2位数；取值0----23.

opt_minutes{int}:(可选)分：2位数；取值0---59.

opt_seconds{int}:(可选)秒：2位数；取值0---59.

opt_milliseconds{int}(可选)：毫秒；取值0-999；

例如：console.log(new Date(2017,7,4,14,31,23,123));

Date对象的实例方法

getFullYear():返回Date对象的年分值；4位年份。

getMonth():返回Date对象的月份值。从0开始，所以真实月分=返回值+1；

getDate():返回Date对象的月份中的日期值；值的范围1--31.

getHours():返回Date对象的小时值。0---23

getMinutes():返回Date对象的分钟值。0--59

getSeconds():返回Date对象的秒数值。

getMilliseconds():返回Date对象的毫秒值。

getDay():返回Date对象的一周中的星期值；0为星期天，1为星期1.

getTime():返回Date对象与‘1970/01/01 00:00:00’之间的毫秒值，时区不同起点值也会不同。

setFullYear(year):设置Date对象的年分值；4位年份。

setMonth(month):设置Date对象的月份值。0表示1月，11表示12月。

setDate(date):设置Date对象的月份中的日期值；值的范围1--31.

setHours():设置Date对象的小时值。0---23

setMinutes():设置Date对象的分钟值。0--59

setSeconds():设置Date对象的秒数值。

setMilliseconds():设置Date对象的毫秒值。

JavaScript事件冒泡与捕获

1.事件处理程序

通过JavaScript指定事件处理程序的传统方法，就是将一个函数赋值给一个事件处理程序。

例如：btn.onclick=function(){}这就是将一个函数赋值给一个处理程序

优点：简单，可跨浏览器

也可以删除通过指定的事件处理程序btn.onclick=null删除事件

例如：//删除绑定事件

btn.onclick=function(){

con.onclick=null;

body.onclick=null;

}

浏览器解析事件时默认为冒泡模型。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡：通过addEventListener函数，此函数有三个参数，当第三个参数为true时，则表示采用事件捕获，若为false则表示事件冒泡。

ele.addEventListener(‘click’,doSomething,true/false)

由于时间冒泡的事件流模型被所有主流的浏览器兼容，从兼容角度建议使用事件冒泡模型。

removeEventListener()方法用于移除由addEventListener()方法添加的事件模型。

例如： con.removeEventListener("click",fn1,true)

IE不支持addEventListener()函数，不会用第三个参数来表示事件冒泡还是捕获，他提供另外一个函数attachEvent,提供俩个参数：事件处理名称和时间处理函数

ele.attachEvent(“onclick”,doSomething);

detachEvent()方法移除由attachEvent()方法添加的事件。

2.阻止传播

在W3C中使用Event.stopPropagation();

在IE中使用：Event.cancelBubble=true;

事件委托

1.什么是事件委托

事件绑定的缺点：

在js中，添加到页面上的事件处理程序数量直接关系到页面整体运行性能，事件越多，性能越差。

1.每个函数都是对象，都会占用内存，内存中的对象越多，性能越差。

2.必须事先指定所有事件处理程序，并导致DOM访问次数增多，会延迟整个页面的交互就绪时间。

事件委托：例如li的点击事件‘onclick’事件本来是添加到li元素上的，然而却添加到别人身上来做，完成这个事件。

利用冒泡的原理，把事件加到父级上，触发执行效果。

2.target属性

返回事件的目标节点（触发该事件的节点）

火狐等主流浏览器的事件目标：event.target；

IE浏览器的事件目标：target.srcElement

例如：

<body>

</ul>

var box=document.getElementById('box');

var lis=box.children;

//事件委托前

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

// lis[i].onclick=function(){

// console.log(this.innerHTML);

// }

//添加新的li节点

btn.onclick=function(){

var newli=document.createElement("li");

newli.innerHTML="新标题";

box.appendChild(newli);

}

//事件委托的写法

box.onclick=function(e){

var target=e.target || target.srcElement;

if(target.nodeName=="LI"){

console.log(target.innerHTML);

}

</script>

</body>

事件委托的优势

1.事件委托比事件绑定的处理速度要快（在高性能js中尽量使用事件委托进行事件处理）

2.事件委托可以捕获到手动（js）添加的节点，而事件绑定无法获取新添加的节点。因为事件绑定是针对每个元素进行事件绑定处理，但新的元素并没有进行for循环没有进行事件绑定处理，而事件委托，是针对某个选择器下的某种元素，进行事件处理，只要这个元素符合条件，就会被事件处理。

relatedTarget属性

仅仅在发生mouseover和mouseout事件时可用。

relatedTarget：返回与事件的目标节点相关的节点。

对于mouseover该属性是鼠标指针移到节点上时所离开的那个节点(你从哪来的那个节点)，对于mouseout事件，该属性是离开目标时鼠标指针进入的节点。

IE不支持relatedTarget属性，在IE中

mouseover事件触发时，IE的fromElement属性中保存了相关元素。

在mouseout事件触发时，IE的toElement属性中保存了相关元素。

正则表达式

1.什么是正则表达式：

正则表达式是一个描述字符模式对象，也就是把规则说个计算机听。

JavaScript中的RegExp类表示正则表达式。所以可以用RegExp()构造函数来创建RegExp对象，也可以通过直接变量语法来创建。

2.创建正则表达式

1）RegExp(正则表达式)对象语法：

new RegExp(pattern,)；

pattern为一个字符串，代表正则（规则）

attributes为可选字符串，包含属性g,i.

g:代表可以全局匹配

i:代表不区分大小写匹配

2）构造函数RegExp()定义正则表达式

var pattern=new RegExp(“n+”);

构造函数方式：new RegExp（pattern，attributes）；

例如：var reg=new RegExp(“n+”,“g”);

构造函数中的正则可以是一个常量，字符串或一个js变量。

3）使用直接量创建正则表达式：

var pattern=/n+/;

普通方式：/pattern/attributes(/正则/属性)

例如:var reg=/n+/g;

普通方式中的正则必须是一个常量字符串。

3.正则表达式语法

\d：匹配任意一个数字，0-9中的任意一个

\s:匹配任意空白字符(空格)

\b:匹配一个单词边界，不匹配任何字符

\w:匹配任意一个字符（字母，数字，下划线）

\n:查找换行字符

.:匹配任意一个字符，除了换行符（\n）

[abc]:查找方括号之前的任何字符

[^abc]:查找任何不再方括号之前的字符

[0-9]:查找任何从0-9的数字

[a-z]:查找任何从小写a-z的字符

[A-Z]:查找任何从大写A-Z的字符

n+:匹配任何包含至少一个n的字符串

n?:匹配任何包含零个或一个n的字符串

n*:匹配任何包含零个或多个n的字符串

n{X}:匹配包含X个n的序列的字符串

n{X,Y}:匹配包含X到Y个n的序列的字符串

^n:匹配任何开头为n的字符串

n$:匹配任何结尾为n的字符串

|：匹配左边或右边

\：转义符

特殊标点符号，在前面\，就表示该符号本身

^要匹配“^”字符本身，请使用\^

()要匹配小括号本身，请使用$和$

其他特殊标点符号[],{},?,+,*,|

\u：表示匹配汉字，unicode编码16进制的utf-8汉字编码：

4e00最小中文字符 9fa5最大中文字符

/^[\u4e00-\u9fa5]+$/ //常用汉字编码范围

RegExp对象的方法

test():检索字符串中指定的只，返回true或false

reg.test(str);

exec():检索字符串返回查找结果的第一个值

reg.exec(str);

compile()：编译指定的正则表达式

Var reg=new RegExp(“13[4-9](\\d){8}”,“g”);

//重新编译正则表达式

reg.compile(“13[0-3](\\d){8}”,“g”);

String对象方法

search():检索与正则表达式相匹配的值

用法：str.search(reg);(没有返回-1)

Match():返回所有正则表达式的匹配（+g）

用法：str.match(reg);(返回数组)

replace():替换正则表达式匹配的字串

用法：str.replace(reg,“”);

split():将字符串匹配的部分做分割（返回数组）

用法：str.split(reg);

1.什么是cookie

cookie是存储于访问者计算机中的变量

Cookie是浏览器提供的一种机制，可以由JavaScript对其进行控制（设置，读取，删除）

Cookie可以实现跨页面全局变量，

cookie可以跨越同域名下的多个网页，但不能跨越多个域名使用，

同一个网站中所有的页面共享一套cookie，

可以设置有效期，

存储空间4kb左右

cookie的优缺点

优点：Cookie机制将信息存储于用户硬盘，因此可以作为跨页面全局变量（最大的优点）

常用场合：（1）保护用户登录状态（2）跟踪用户行为

（3）定制页面（4）创建购物车......等等

缺点：（1）cookie可能被禁用

（2）cookie与浏览器相关，不能互相访问；

（3）cookie可能被用户删除

（4）cookie安全性不够高

（5）cookie存储空间很小只有4kb左右

客户端存储cookie

1.设置cookie

2.读取cookie

3.删除cookie

1.设置cookie

每个cookie都是一个键值对，（key=value）格式的字符串

例如：document.cookie="user1=YY";

如果要改变一个cookie的值，只需要重新赋值

例如： document.cookie="user1=QQ";

2.设置有效期：

var dates=new Date();

dates.setDate(dates.getDate()+3);//按天数设置

document.cookie=“user1=YY;expires=”+dates;

3.读取cookie

document.cookie=“user1=YY”;

document.cookie=“user1=MM”;

var cookie=document.cookie;

alert(cookie);

返回：“user1=YY;user2=MM” 返回的是string类型

只能够一次性获取所有cookie，所以用户必须自己解析这个字符串，来获取指定的cookie值

split()方法用于把一个字符串分割成字符串数组

例如：

//1.设置cookie,每个cookie都是一个键值对，（key=value）格式的字符串

document.cookie="user1=pp";

document.cookie="user2=xx";

//设置有效期

var dates=new Date();

dates.setDate(dates.getDate()+3);

document.cookie="password=123;expires="+dates;

//读取cookie

var cookies=document.cookie;

console.log(cookies);

//将获取的cookies字符串切割为数组

var cookiearr=cookies.split("; ");

console.log(cookiearr);

//将数组中的键值对切割开来

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

var cookiearr2=cookiearr[i].split("=");

console.log(cookiearr2);

}

//将上面的获取cookie封装为函数

function getCookie(key){

var arr=document.cookie.split("; ");//获取所有的cookie，并将其切割为数组

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

var arr2= arr[i].split("=");

if(arr2[0]==key){

return arr2[1];

}

return false;//没有找到

}

console.log(getCookie("user2"));

</script>

删除cookie

Cookie过期会自动消失,要删除一个cookie可以将其有效期设置为一个过去的时间

例如：

var date=new Date();

dates.setDate(dates.getDate()-1);

document.cookie=“user1=YY;expires=”+dates；

XML

1.什么是XML

可扩展标记语言可以对文档和数据进行结构化处理。

设计宗旨是：传输数据，不是显示数据

标签没有被预定义，需要自己来定义标签

是W3C的推荐标准

2.XML语法

元素名中不能出现空格

名称只能以英文字母开始，不能是数字或符号

对大小写没有限制，但前后要保持一致，以免造成混乱

所有的xml元素必须有关闭标签

XML对大小写敏感，xml必须正确的嵌套，文本必须要有根元素，属性值必须加引号，在xml中空格会被保留，注释与html类似，xml为实体应用（比如空格为）

3.XML解析

将XML文档转换成一个对象模型集合（DOM树），应用程序通过对这个对象模型的操作，来实现对XML文档数据的操作

例如：

<body>

</div>

<one>

</one>

<one>

</one>

<one>

</one>

</people>

var box=document.getElementById('box');

var people=document.getElementsByTagName('people');

var one=document.getElementsByTagName("one");

var text="";

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

text+=one[i].children[0].innerHTML+"|"+one[i].children[1].innerHTML+"|"+one[i].children[2].innerHTML+"<br/>";

}

box.innerHTML=text;

</script>

</body>

个人学习笔记，有不对的地方欢迎指出，毕竟我还是小白 ^_^

阅读全文

0 0