1,数组的常用操作
push()方法可向数组的末尾添加一个或者多个元素,并返回新数组的长度,
unshift() 方法可向数组的开头添加一个或更多元素,并返回新数组的长度。
Var arr = [1,2,3] arr.push(4,5,6); arr.unshift(-1,0,);
pop() 方法删除数组的最后一个元素,并且返回被删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。 arr.pop();
shift() 方法用于把数组的第一个元素删除,并返回被删除的元素的值。如果数组是空的,那么 shift() 方法不进行任何操作,返回 undefined 值。
concat() 连接数组,组成新数组 arr.concat(4,5,6); 创建新数组
该方法用于在一个数组后连接另一个或多个数组。它不会改变现有的数组,返回的是连接后的新数组。
concat()方法可以接受值,也可以接受数组作为参数。 Var array1=[] ; var array2,arry3
array1.concat(array2,array3,...);
Number(); 把对象的值转换为数值
join() 将数组各个元素是通过指定的分隔符进行连接成为一个字符串。arr.join(“-”); “1-2-3”
split() 方法用于把一个字符串分割成字符串数组,必需指定要使用的分隔符。
如果分隔符为空字符串 (“”) ,string中的每个字符都会被分割 var str = “hello-world”
str.split(“-” );
可指定howmany参数,该参数为数值,指定返回的数组的最大长度。
sort() 对数组进行排序,返回排序后的数组对象。可接受参数,必须是函数。
Var arr = [“b”,”a”,”d”] arr.sort(mysort); function mysort(a, b){return a-b}
splice() 用于插入、删除或替换数组的元素。
首先,必须指定index,即从何处插入/删除元素。该参数为数值,为元素的下标。
其次,必须指定要删除的元素的个数,可以是0。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
如果要插入元素,可将新元素作为参数写在括号内,新元素之间用 , 隔开。 arr= [1,2,3,4]
arr.splice(2,2,”5”,”6”)
2.DOM节点的操作
<div id=“div1”>
Var mydiv = document.getElementById(“div1”);
父节点: mydiv.parentNode;
相邻: mydiv.nextSibling; mydiv.previousSibling
子节点: mydiv.childNodes(); firstChild() lastChild()
document.getElementById
doucument.getElementsByName
document.getElementsByTagName(“li”)
document.getElementsByClassName
createElement(“”) 创建节点:返回一个元素对象
cloneNode(false) 克隆节点,接受一个参数deep,值为true或false。
子节点操作:
appendChild() 向节点添加最后一个子节点
mydiv.appendChild(“p”);
insertBefore() 在指定的已有子节点之前插入新的子节点。
如果未指定已有子节点,会在结尾插 入 newnode。
removeChild() 移除指定子节点
属性操作:
div.getAttribute(“id”)
setAttribute(“id”,”mydiv”)
removeAttribute(“id”)
3.Data()类型
获取日期和时间 var mydate = new Date(“2016/8/20 00:00:00”);
getDate() 获取日 1-31
getDay () 获取星期 0-6
getMonth () 获取月 0-11
getFullYear () 获取完整年份(浏览器都支持)
getHours () 获取小时 0-23
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getMilliseconds () 获取当前的毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
setInterval()
setTimeout()
4.string类型
回答下列每个函数的用法: var str =“hello world”
indexOf(“l”); 根据字符返回位置
subStr(0, 2) 第一个参数是截取开始的位置, 第二个参数是截取的长度
subString(0,2) 第一个参数是截取开始的位置,第二个参数是结束位置
charAt (3) 根据位置返回字符
split
join 合并字符串
slice 截取字符串
toLowerCase
toUpperCase
5.offset与client
offsetWidth offsetHeight
得到元素对象包括边框在内的宽度和高度
offsetWidth = width + border + padding
div { width:220px; border-left:2px solid red; padding:10px;}
div.offsetWidth = 220 + 2 + 20
clientWidth clientHeight
得到元素对象边框以内的宽度和高度,不包括边框
注意:offsetWidth,clientWidth 与 div.style.width 的区别
offsetLeft offsetTop
返回对象与上级元素(最近的带有定位的父级元素)左边或上面的距离
如果父级都没有定位则以body 为准
距离从父级元素的外边距开始算。
offsetTop 与 style.top 的区别
一、最大区别在于 offsetLeft 、offsetTop 可以返回没有定位的元素距离左侧的位置。 而 style.left、style.top 不可以。只有定位的元素才有 left top right
二、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
style.left = 300px
三、offsetTop 只能返回,不能设置,而 style.top 可设置也可返回。
四、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
五、style.left、style.top 只能得到行内样式。
6.event 事件属性
我们学过一些事件 : onmouseover onmouseout.....作用于元素本身以及其子元素
onmouseenter onmouseleave 只作用于元素本身
onmousedown onmouseup onclick
例:btn.onclick = function(event) { 语句 }
event 就是事件的本身。
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。
比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。
普通浏览器支持 event
ie 678 支持 window.event
所以我们 采取兼容性的写法 :
var event = event || window.event;
7.scoll事件
onscroll 事件在元素滚动条在滚动时触发
window.onscroll = function() { }
scrollTop 网页被卷去的高度。
谷歌浏览器 和没有声明 DTD <DOCTYPE> :
document.body.scrollTop;
火狐 和其他浏览器
document.documentElement.scrollTop;
ie9+ 和 最新浏览器
window.pageXOffset; pageYOffset (scrollTop)
兼容性写法:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
scrollTo(x,y)
window.scrollTo(15,15);
方法可把内容滚动到指定的坐标。
格式:
scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条,所以,这个x 不太常用。
9.冒泡问题
事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
顺序
IE 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window
不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload
阻止冒泡的方法
标准浏览器 和 ie浏览器
w3c的方法是event.stopPropagation()
IE则是使用event.cancelBubble = true bubble 冒泡 泡泡 cancel 取消
兼容的写法:
if(event && event.stopPropagation)
{
event.stopPropagation(); // w3c 标准
}
else
{
event.cancelBubble = true; // ie 678 ie浏览器
8 }
9.闭包
用一个函数 去访问 另外一个函数内部定义的局部变量的方式就是闭包。
内部变量是局部变量
局部变量只能在函数作用域的内部使用。
闭包的特点:
优点:不产生全局变量,实现属性私有化。
缺点:闭包中的数据会常驻内存,在不用的时候要删掉否则会导致内存溢出。
function outerFun(){
var a=0;
function innerFun(){
a++;
alert(a);
}
return innerFun;
}
var obj=outerFun();
obj(); 1 obj(); 2
var obj2=outerFun();
obj2(); 1 obj2(); 2
结果是:1,2,1,2
10.面向对象
面向对象:通过类可以创建多个具有相同属性和方法的对象。
面向对象有两种,基于类的(class-based)面向对象和 基于原型的 (prototype-based) 面向对象
在基于类的面向对象方式中,对象(object)依靠 类(class)来产生。
而在基于原型的面向对象方式中,对象(object)则是依靠 构造器(constructor)利用 原型(prototype)构造出来的。
ECMAScript中没有类的概念。ECMAScript中的对象是基于原型的面向对象方式。
面向对象的特性
1. 抽象
抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面。
2. 封装
封装是把过程和数据包围起来,对数据的访问只能通过已定义的界面
3. 继承
4. 多态
多态是指两个或多个属于不同类的对象,对于同一个消息(方法调用)作出不同响应的方式
new
利用new 关键字 去声明新的对象
new运算符的作用是创建一个对象实例。这个对象可以是用户自定义的,也可以是带构造函数的一些系统自带的对象。
new 关键字可以让 this 指向新的对象
所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
Object构造函数或对象字面量都可以创建单个对象,使用同一接口创建对象,会产生大量重复代码。
工厂模式:可创建多个对象,不能解决对象识别问题。
构造函数模式:
原型模式:
prototype 原型属性
主要解决:函数因为使用非常非常多,重复执行效率太低。
Person.prototype.showName = function() { // 用的共同的父亲
alert("我的名字是"+ this.name);
}
写法:
类.prototype.方法 = function() {} 具体格式
可以把那些不变的属性和方法,直接定义在prototype对象上