javascript基础

一、 样式规则基本格式

1)        头样式
<script type="text/javascript" src=”123.js”>
</script>

二、 基本概念

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

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

三、 基本语法

1)    基础知识：区分大小写、语句分号（ if 语句不加分好 单行 if 语句可不加｛｝）

2)        变量： 弱类型 变量可以付任何类型 数字 字符等

3)        运算符

4)        表达式

5)        语句

6)        函数 functions addInput （）｛｝

7)        对象： html 中的元素都被表示为一个对象 “ . ”表示引用对象的属性或方法

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

8)        This ：在 script 中指代此函数中的元素（或称对象） 如 this.name     

四、 Bom

1.         Window 对象：包含了窗口的全局变量、方法和对象 新的窗口有新的 window

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

2.         跨浏览器通信

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

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

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

3.         导航

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

                                                hash （锚点）如 a 标签

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

4.         窗口几何学

Screen 对象：

窗口尺寸：见 p177

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

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

5.         document 对象

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

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

6.         cookie

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

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

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

五、 事件

1.         事件

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

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

接口事件：

         blur 和 focus ：失去或得到焦点

         change ：表单和下拉菜单

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

         reset 和 submit 重置发送表单事件

         resize 改变窗口大小

         scroll 滚动模块内容时

2.         注册时间处理器：选中元素运行哪个函数

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

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

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

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

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

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

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

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

w3c 与微软兼容：条件语句

if （对象 .addEventListener ）

       对象 .addEventListener( ………)

Else if( 对象 .attachEvent)

       对象 .attachEvent(……..)

3.         事件对象被执行顺序

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

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

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

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

对象 .stopPropagation();  //w3c

对象 .cancelBubble=true;  // 微软

4.         事件对象和它的属性

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

                     function 函数 ( e){

              var 变量 =e||window.event

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

2. 事件对象属性：

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

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

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

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

六、 DOM

1.         节点

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

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

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

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

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

2.         节点信息

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

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

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

3.         修改文档树

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

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

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

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

4.         创建和克隆元素

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

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

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

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

5.         创建的表格应该放在 <tbody></tbody> 中 这样才能显示出来

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

6.         属性的读写

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

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

七、 核心

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

八、 CSS 修改

1.         style 属性：元素的样式属性 如 元素 .style.margin

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

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

2.         获取样式：元素 .currentStyle. 样式属性（如 color ）

3.         更改 class 和 id

1)        通过更改 class 和 id 更改为预先建立的样式的从而改变样式表。         格式如： document.getElementById(‘text’).className=’class’

2)        增加 class

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

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

3)        移除 class

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

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

4.         向页面中写入 css 和更改整个样式表（暂不了解）

九、 数据类型：串 (string)  数组（ array ）

    BOM:Browser           object  model

    DOM:Document