javascript基础

一、 <!-- [endif]-->样式规则基本格式

<!-- [if !supportLists]-->1) <!-- [endif]-->头样式
<script type="text/javascript" src=”123.js”>
</script>

<!-- [if !supportLists]-->二、 <!-- [endif]-->基本概念

钩子：理解为元素的 ID CLASS 用于脚本对某元素的操作

结构： getElementByID(‘’) getElementByTagName(‘’)

<!-- [if !supportLists]-->三、 <!-- [endif]-->基本语法

<!-- [if !supportLists]-->1) <!-- [endif]-->基础知识：区分大小写、语句分号（ if 语句不加分好 单行 if 语句可不加｛｝）

<!-- [if !supportLists]-->2) <!-- [endif]-->变量： 弱类型 变量可以付任何类型 数字 字符等

<!-- [if !supportLists]-->3) <!-- [endif]-->运算符

<!-- [if !supportLists]-->4) <!-- [endif]-->表达式

<!-- [if !supportLists]-->5) <!-- [endif]-->语句

<!-- [if !supportLists]-->6) <!-- [endif]-->函数 functions addInput （）｛｝

<!-- [if !supportLists]-->7) <!-- [endif]-->对象： html 中的元素都被表示为一个对象 “ . ”表示引用对象的属性或方法

或者：对象 [‘ 属性（或方法） ’]

<!-- [if !supportLists]-->8) <!-- [endif]-->This ：在 script 中指代此函数中的元素（或称对象） 如 this.name

<!-- [if !supportLists]-->四、 <!-- [endif]-->Bom

<!-- [if !supportLists]-->1. <!-- [endif]-->Window 对象：包含了窗口的全局变量、方法和对象 新的窗口有新的 window

窗口属性： name 为 HTML 链接的 target 属性作引导还可以引导弹出窗口

<!-- [if !supportLists]-->2. <!-- [endif]-->跨浏览器通信

打开弹出窗口： window.open （‘ url ’‘ name ’‘宽度，高度’）没有跨窗口通信

指向其他窗口：进行跨窗口通信的 window.open

重新建立联系：主窗口载入新页面

<!-- [if !supportLists]-->3. <!-- [endif]-->导航

Lacation ：包含了页面的当前位置 即 URL 对象 URL 的属性 href （地址属性）

hash （锚点）如 a 标签

history ：显示过的页面 属性 back （） forward （）如同浏览器的前进后退

<!-- [if !supportLists]-->4. <!-- [endif]-->窗口几何学

Screen 对象：

窗口尺寸：见 p177

弹出对话框： alert （ ’ 文本信息 ’ ） confirm （ ’ 文本信息 ’ ） prompt （‘文本信息’）

setTimeout(‘ 函数 ’ ，‘时间’ ) ：设定函数自动运行时间 clearTimeout （）取消

<!-- [if !supportLists]-->5. <!-- [endif]-->document 对象

写入方法： document.write （‘ <h1>Hello world!</h1> ’）

Open （）与 close （）：打开关闭网页

<!-- [if !supportLists]-->6. <!-- [endif]-->cookie

设置 cookie ： document.cookie=’testcookie=yes;

expires=Tue,23 Jan 2007 13:12:12 utc ；

path=/;domain=quirksmode.org’; ( 名 / 值对 ) ( 有效时间 )( 路径 )( 页面所处域 )

<!-- [if !supportLists]-->五、 <!-- [endif]-->事件

<!-- [if !supportLists]-->1. <!-- [endif]-->事件

鼠标事件： click( 单击 )dblclick （双击） mousedown （按下鼠标） mousemove （鼠标移动） mouseout （鼠标移开） mouseover （鼠标移至） mouseup （松开鼠标）

键盘事件： keyup 释放按键 keypress 、 keydown 按住

接口事件：

blur 和 focus ：失去或得到焦点

change ：表单和下拉菜单

load 和 unload 页面完全加载 和释放时

reset 和 submit 重置发送表单事件

resize 改变窗口大小

scroll 滚动模块内容时

<!-- [if !supportLists]-->2. <!-- [endif]-->注册时间处理器：选中元素运行哪个函数

行内事件处理程序（违反结构与行为分离）

传统模式： x. 方法 = 函数（缺点：设置多个方法，最后的会覆盖前一个）

W3c 模型： x.addEventListener （‘方法’，函数， false ） ;

x.removeEventListener(‘ 方法 ’ ，函数， false) ；

微软： x.attachEvent （‘方法’，函数）；

x.detachEvent （‘方法’函数）；

移除事件： w3c 对象 .removeEventListener(‘ 方法 ’, 函数 ,false) ；

微软 对象 .detachEvent(‘ 方法 ’, 函数 ) ；

w3c 与微软兼容：条件语句

if （对象 .addEventListener ）

对象 .addEventListener( ………)

Else if( 对象 .attachEvent)

对象 .attachEvent(……..)

<!-- [if !supportLists]-->3. <!-- [endif]-->事件对象被执行顺序

冒泡：元素被触发的顺序是从选中元素往外 事件注册里的 false

捕获：元素被书法的顺序是从 document 直到事件目标。。。。 true

注：冒泡 change submit 不会在 document window 上出发

取消时间传播： if( 对象 .stopPropagation)

对象 .stopPropagation(); //w3c

对象 .cancelBubble=true; // 微软

<!-- [if !supportLists]-->4. <!-- [endif]-->事件对象和它的属性

1.Event 对象：时间对象 document 如何被传入函数

function 函数 ( e){

var 变量 =e||window.event

注： W3C 用参数 e 微软用 window.event

2. 事件对象属性：

this 的引用： this 总指向你在其上定义 的事件处理元素

一般用注册同样事件处理程序到许多元素时

target 或 srcElement 属性指向产生事件的元素（如鼠标划过的元素 ）

当依赖于冒泡事件使得事件往上传播的时候

<!-- [if !supportLists]-->六、 <!-- [endif]-->DOM

<!-- [if !supportLists]-->1. <!-- [endif]-->节点

节点类型： document 文档节点、文字是文本节点、元素节点

长途寻找元素： getElementById() getElementByTagName() 返回节点列表对象

getElementByTagName()[] 节点别表中某个节点 0 表示 1 节点。。。。。。

短途寻找元素： parentNode 父节点 firstChild 子一节点 lastChild 子末节点

PreviousSibling 兄弟上节点 nextSibling 兄弟下节点

<!-- [if !supportLists]-->2. <!-- [endif]-->节点信息

nodeName: 节点的名称，即元素名称。当作属性名来用即 变量 .nodeName

nodeValue ：包含文本节点的内容。而对文档节点和元素节点不可用。

nodeType ：节点类型 如 文档节点 元素几点 文本节点。

<!-- [if !supportLists]-->3. <!-- [endif]-->修改文档树

节点 .appendChild( 被添加节点 ) 添加某个节点到改元素的子末节点 若被添加节点已在文档中，则从当前位置移除并移动到新位置。此方法可以作为变量的引用如 ： var 变量 = 节点 .appendChild(0)

节点 .insertBefore( 被添加节点 ) 添加节点到某个节点的前面。其他如上

节点 .removeChild( 被添加节点 ) 移除一个节点和他的子节点。

节点 .replaceChild( 被交换节点，被交换节点 )

<!-- [if !supportLists]-->4. <!-- [endif]-->创建和克隆元素

Var 变量 =document.createElement(‘p’) 创建 p 标签

Var 变量 =document.createTextNode(‘this is a create element’) 创建文本节点

创建的这些节点将有上节所讲内容插入到文档中

Var 变量 = 节点 .cloneNode(true 或 false) 克隆节点 true 表示也克隆所有子节点

<!-- [if !supportLists]-->5. <!-- [endif]-->创建的表格应该放在 <tbody></tbody> 中 这样才能显示出来

innerHTML 属性显示元素中的内容如 p.innerHTML

<!-- [if !supportLists]-->6. <!-- [endif]-->属性的读写

元素 .getAttribute(‘ 属性名 ’) 返回属性值

元素 .setAttribute(‘ 属性名 ’ ，‘参数’ )

<!-- [if !supportLists]-->七、 <!-- [endif]-->核心

关联数组 变量 [] 其中放入的是字符串所引用的属性在 [‘’] 中的则是直接引用的属性前提是 [‘’] 必须是属性名而不能是引用改属性的字符串

<!-- [if !supportLists]-->八、 <!-- [endif]-->CSS 修改

<!-- [if !supportLists]-->1. <!-- [endif]-->style 属性：元素的样式属性 如 元素 .style.margin

样式表中的 - 表示：如 font-size 在 script 中为 fontSize

单位：设置某个样式属性必须加上单位 如 xx.style.width=width+’px’;

<!-- [if !supportLists]-->2. <!-- [endif]-->获取样式：元素 .currentStyle. 样式属性（如 color ）

<!-- [if !supportLists]-->3. <!-- [endif]-->更改 class 和 id

<!-- [if !supportLists]-->1) <!-- [endif]-->通过更改 class 和 id 更改为预先建立的样式的从而改变样式表。 格式如： document.getElementById(‘text’).className=’class’

<!-- [if !supportLists]-->2) <!-- [endif]-->增加 class

增加 class 是在原有 class 样式上在加上新加 class 的样式

格式如： xx.className+= ‘ newclassname’ 空格必加

<!-- [if !supportLists]-->3) <!-- [endif]-->移除 class

xx.className=xx.className.replace(/ newclassname/,’’);

吧以前的 newclassname 替换为空字符从而移除 class

<!-- [if !supportLists]-->4. <!-- [endif]-->向页面中写入 css 和更改整个样式表（暂不了解）

<!-- [if !supportLists]-->九、 <!-- [endif]-->数据类型：串 (string) 数组（ array ）

<!-- [if gte vml 1]><v:line id="_x0000_s1026" style='position:absolute;left:0;text-align:left;z-index:1' from="117pt,7.8pt" to="2in,7.8pt"/><![endif]--><!-- [if !vml]--> <!-- [endif]--><!-- [if gte vml 1]><v:line id="_x0000_s1027" style='position:absolute;left:0;text-align:left;flip:y;z-index:2' from="117pt,7.8pt" to="2in,23.4pt"/><![endif]--><!-- [if !vml]--> <!-- [endif]--> BOM:Browser object model

DOM:Document