

首页  思维导图  详情



javascript

2017-03-24 00:20:52   0  举报





仅支持查看

AI智能生成

用于前端javascript的总结

数组

模版推荐

作者其他创作

大纲/内容

对象

创建对象

var o={"main title":"javaScript",author:{ firstName:"Li",surname:"zhanbiao"}}

通过new创建

原型（Prototype）：所有通过对象直接量创建的对象都具备有同一个原型对象

Object.create(null);不继承任何属性和方法

var 01=Object.create(Object.prototype);和new Object（）一样

通过原型继承创建一个新对象

function inherit(P){if(p==null)throw TypeError();if(Object.crate)return Object.create(p);var t=typtof p; if(t !=="object" && t !=="function") throw TypeError(); function f(){};f.prototype=p;return new f();}

属性的查询和设置

查询

1.通过（.）

右侧必须是一个以属性名命名的简单标识符

2.通过（［］）

方括号内必须是一个计算结果为字符串的表达式

关联数组

var a="";for(i=0;i<4;i++){a+=customer["a"+i]+"\n"}

继承

var o={};o.x=1;var p=inherit(o);//p继承o和Object.prototype

删除属性

delete运算符只能删除自有的属性，不能删除继承属性

delete Object.prototype//不能删除，属性是不可配置的

检测属性

1.in运算符

左侧是属性名（字符串），右侧是对象

var a={x:1}; "X" in a;

2.hasOwnPreperty()

检测给定的名字是否是对象的自有属性

var o={x:1};o.hasOwnProperty("x");

3.propertyIsEnumerable()

是2的增强版，只有检测到自有属性且这个属性的可枚举性为true才返回true

var o=inherit({y:2}); o.x=1;o.propertyIsEnumerable("x");

枚举属性

for/in

object.getOwnPropertyNames()

getter和setter

子主题

属性的特性

1.可写(writable)

2.可枚举(enumerable)

3.可配置(configurable)

4.值(value)

属性描述(Object.getOwnPropertyDescriptor())

设置属性的特性(Object.definePeoperty())

设置多个属性的特性(Object.definePeoperties())

对象的三个属性

原型属性

类属性

可扩展属性

序列化对象

对象方法

1.toString()

2.toLocaleString()

3.toJSON()

4,valueOf()

5.hasOwnProperty()

6.propertyIsEnumerable()

7.isPrototypeOf()

DOM

Node

Node三大属性

NodeName

document #document

elem  ELEMENT

text #text

NodeType

12大类型

element_node＝1

attribute_node＝2

text_node＝3

cdata_node＝4

entiry_node＝5

entiry_reference_node＝6

procession_instruction_node＝7

comment_node＝8

document_node＝9

document_type_node＝10

document_fragment_node＝11

notation_node＝12

常用类型

element_node

attribute_node

text_node

document_node

NodeValue

document  null

elem  null

text  文本内容

attr  属性值

父类节点

parentNode

属性

lastChild最后一个子节点

firstChild第一个子节点

方法

删除：removeChild

添加：appendChild

previousSibling第一个

插入：insert<b>Before</b>

替换：replaceChild

克隆：cloneNode（）

参数接受一个布尔参数

兼容

IE<9不会遍历空白节点

解决

normalize（）用于处理文本节点

如果是空文本节点，则删除它，如果找到相邻的文本节点，则合并为一个节点

节点关系

兄弟节点

nextSibling最后一个

每个节点都有一个childNodes属性

该属性保存这一个NodeList对象

访问NodeList

item（）

NodeList不是一个数组

解决

argument对象使用Array.prototype.slice()

var arrayOfNodes=Array.prototype.slice.call(someNode.childNodes,0);

兼容

IE8下不兼容

解决

手动枚举所有成员

someNode.nodeType==1  适应所有浏览器

Document

1.特征

parentNode值为null

ownerDocument值为null

2.文档的子节点

DocuemntType Element  ProcessingInstructior  Comment

访问

documentElement

childNodes

属性

document.documentElement  document.body

3.文档信息

3个网页相关属性

URL  domain  referrer

子主题

来自不同子域的也 main无法通过js通讯，而通过将每个页面domain设置为相同的值，则可以访问对方

限制,一开始设置为loser就不能设置tight

松散（loser）

p2p.lizhanbiao.com

紧绷（tight）

lizhanbiao.com

IE8最早出现

URL和domain相互关联

URL＝http://www.git.ochina.com/lizhanbiao/   domain=www.git.ochina.com

4.查找元素

getElemetnById()

接收参数严格按照大小写

兼容

<=IE7下不区分大小写

如果有想过ID将返回第一个的ID

getElementsByTagName()

取得元素的标签名

HTML中该方法会返回一个HTMLCollection

HTMLCollection方法

通过item()或［］取值

nameItem()

直接通过name获取到值

getElementsByName

返回带有给定name特性的所有元素

HTMLCollection方法

namedItem()只会获取到第一项

特殊集合

都是HTML Collection对象

document.anchors  包含文档中有带name特性的A元素

document.applets  包含applet元素，已不建议使用

document.fors  包含文档中所有的form元素  == document.getElementsByTagName("form");

document.images  包含所有img元素  ＝＝ getElementsByTagName('img')

document.links  包含文档中所有带href特性的a元素

6.一致性检测

DOM有多个级别

检测方法

document.implementation提供相应信息和功能的对象

implementtation规定一个方法hasFeature(参数1，参数2)

参数1:dom功能的名称

参数2：版本号

hasFeature缺点

不能使用能力检测，在早些版本的浏览器没有完全实现DOM功能的情况下也会返回true

7.文档写入

输出流写入到网页

有四个方法

write()  writeln()  open()  close()

write()接收一个字符串参数，原样写入

writeln（）在末尾会添加一个换行符号（\n）

Element

特征

子节点可能是

1.Element   2.Text  3.Comment  4.ProcessingInstruction  5.CDATASection   6.EntiryReference

访问元素标签名

NodeName

tagName(为了清晰起见)

输出的标签是大写格式

转化为大小写形式，在不知道文档格式（HTML，XML）情况下

if（element.tagName=="div"）{} 容易出错，在HTML文档中不管用

if(element.tagName.toLowerCase()=="div"){}  这种最好（使用各种文档）

HMTL的标准特征

ID  文档中的唯一标识符

title  有关元素的附加说明信息

lang  元素内容的语言

dir 语言的方向，ltr(从左到右)，rtl(从右到左)

className  与元素的class特性对应，即为元素指定的css类

取到特性

操作特性有三个方法

getAttribute()

两类特殊属性

style

onclick

setAttibute()

removeAttribute()

<=IE6不支持该特性

attributes

Element是唯一使用该属性的类型

NamedNodeMap对象方法

getNamedItem(name):返回nodeName属性等于name的节点

removeNamedItem(name)

setNamedItem(node):列表中添加节点，以nodeName属性为索引

item（pos):返回位于pos位置处的节点

遍历，通过specified（）方法确定是否制定了相应的特性

创建元素createElement();只接受一个参数

动态创建避免IE<=7的问题

参数可以是属性（"<div id=\"myNewDiv\" class=\"box\"></div>"）

1.不能设置iframe元素的name属性

2.不能reset()方法重设动态input元素

3.动态创建的type值为reset的button元素重设不了表单

4.动态创建的一批name相同的单选按钮彼此无关系

元素的子节点

子节点：元素，文本，注释，处理指令（不同浏览器显示节点不同）

Text

文本节点操作

appendData(text);将text添加到节点的尾部

deleteData（offset，count）；从指定位置开始删除count个字符。

insertData(offset,text);在指定的位置插入text

replaceData(offset,count,text);用text替换从offset指定的位置开始到offset＋count位置处的文本

substringData(offset,count):提取从offset指定的位置开始到offset＋count为止处的字符串

splitText(offset);从offset指定的位置将文本节点分成两个文本节点

创建文本节点

document.createTextNode();参数，要插入节点中的文本（按照HTML或XML的格式编码）

规范文本节点

合并相邻的节点：normalize()

文本节点取值

nodeValue

data

Comment

特征

parentNode可能是（Document或Element）

没有子节点，与Text类型继承自相同的基类，除了splitText（）之外都相同

注释节点必须在HTML元素内，不然不会识别

兼容

ff,sf,ch,op:可以访问到comment类型的构造函数和原型

IE8将注释点视为“!”,通过getElementsByTagName()获取到注释点

IE9（没有将其视为注释，而是通过HTMLCommentElement的构造函数来表示注释）

取值

nodeValue

data

CDATASection

特征

基于XML文档，与Comment类似，继承Text类型，除了splitText（）之外

nodeName值为：＃cdata-section,parentNode可能是document或element，nodeValue的值为CDATA区域的内容

CDATA区域只会出现在XML文档中；多数浏览器将其区域错误解析为Comment或element

兼容

 <=IE9不支持此类型

FF，sf,ch,op可以访问CDATASection类型的构造函数和原型

DocumentType

在web浏览器中不常用

兼容

Ff，sf,op,ch4.0()支持

对象，属性

保存在document.doctpe中

name:文档类型的名称

entities：由文档类型描述的实体的NamedNodeMap对象

notations：文档类型描述的符号的NamedNodeMap对象

兼容

IE早起版本不支持此类型

值始终为null

IE9会给document.doctype赋正确的对象，但不支持访问该类型

DocumentFragment

特征

nodeName值为：“#document-fragment”

子节点：（element，processingInstruction，Comment，Text，CDATASection，EntityReference）

不能直接使用，可当作“仓库”

方法createDocumentFragment()

继承

Node的所有方法

优点

能将数据保存在仓库中，减少浏览器的反复渲染

Attr类型

特征

在XML中子节点可以是Text或EntityReference

是节点，但不是DOM中的一部分

属性

name＝nodeName

value＝nodeValue

specified

是一个布尔值，区别特性是在代码中指定的，还是默认的

what

内存中连续存贮多个数据的存储空间

why

连续存储的一组数据，可以极大提高程序的执行效率

when

只要存储更多个数据使用数组

how

创建

1.创建空数组

数组的直接量

var arr=[];

使用new

var arr=new Array();

2.创建数组同时初始化数组元素

ar arr=[值1,2,3...];

var arr=new Array(1,2,3...);

3.创建n个空元素的数组

使用new

var arr=new array(n);

访问

arr[i]

用法和单变量一样

三个不限制

不限制元素的数据类型

不限制元素个数

可随时在任意位置添加新元素

不限制下标越界

取值

不保错，返回undefined

赋值

稀疏数组

下标不连续的数组

自动将length调整到最大下标＋1

关联数组（Hash）

what

可自定义下标名称的数组

VS 索引数组

下标都是数子的数组

why

索引数组的下标没有意义，只能通过遍历查找指定的元素内容

查找速度受数组个数和元素位置的影响

when

希望通过下标名称快速查找某个元素

不受元素个数和元素存储位置的影响

how

创建

2步

1.创建空数组

var hash=[];

2.向数组中添加新元素

hash["下标名(key)"]=值(value)

访问

hash["下标值(key)"]

用法与访问索引数组中的元素一样

特点

length是属性，始终从0开始

无法用索引数组的API

遍历

for(var key in hash){key//当前下标名称 hash[key]//获取当前元素值}

获取hash中所有key

var keys=[]; var i =0; for(keys[i++] in hash){};

数组API

.lengeh

规定了数组理论上的元素个数

始终等于最大下标＋1

固定套路

获取最后一个元素

arr[arr.length-1]

获取倒数第n个元素

arr[arr.length-n]

末尾追加一个新元素

arr[arr.lenth]=值

缩容

删除末尾元素

arr.length--

删除末尾n个元素

arr.length-=n

清空数组

arr.length=0

遍历

依次取出数组中每个元素执行相同操作时

转字符串

String(arr)

将arr中每个元素转为字符串，用逗号链接

arr.join('连接符')

将arr中国年每个元素转为字符串，可自定义连接符

拼接和选取

拼接

var newArr=arr1.concat(value1,value2，arr2...);

将value1，value2，arr2中的每个元素，拼接到arr1结尾

强调

无权修改愿数组，只能返回新数组，必须用变量接住返回值

可自动打散数组类型的参数为单个数组，再拼接

选取

修改数组

翻转

排序

栈和队列

二维数组

 Collect

Get Started

JavaScript组成

 Collect

Get Started

JavaScript

 Collect

Get Started

JavaScript

 Collect

Get Started

Effective JavaScript





0 条评论

下一页