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第一个
插入：insertBefore
替换：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下不兼容
解决
手动枚举所有成员
function convertToArray(){var arrayOfNodes=null;try(var arrayOfNodes=Array.prototype.slice.call(node,0);)catch(ex){array=new Array();for(var i=0,len=nodes.length;i<len;i++){array.push(nodes[i])};} return array;}
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结尾
强调
无权修改愿数组，只能返回新数组，必须用变量接住返回值
可自动打散数组类型的参数为单个数组，再拼接
选取
修改数组
翻转
排序
栈和队列
二维数组
使用教程
收藏
0 条评论
下一页
