一、 <!-- [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