javascript 进阶

rain

一、DOM操作
setHomePage()     设置首页地址

window.external.addFavorite()   ie放入收藏夹
window.sideba.addPanel()   非ie放入收藏夹

window.onload   监视网页元素是否加载完毕

innerHTML   动态创建网页程序,设置或返回表格行的开始和结束标签之间的 HTML

stringObject.length      length 属性可返回字符串中的字符数目。

节点的childNodes 属性，可以得到该节点的所有子节点数组。

createElement()   创建元素

appendChild()   进行DOM元素的挂接

createTextNode()    建立一个新的text 节点，并包含指定的数据。
parentNode  父节点
childNode    子节点
hasChildNodes()  是否含有子节点

removeChild()  删除元素

click()  激活单击事件

cloneNode(true)    为true时克隆元素及其所有子节点。为false则克隆元素但不包含它的子节点。

rain

二、控制表单控件
document对象的forms属性可以返回一个数组，数组中的元素都是form对象。form对象又称为表单对象。
document.forms    获取表单DOM
对象.elements     对象的元素

.method   表单的方法属性

.focus()  可以让当前控件获得焦点
.select()   被选中

reset()  重置表单信息

tagName    标签名

.checked=true    选中     false 不选中

onFocus事件就是当光标落在文本框中时发生的事件。

onBlur事件是光标失去焦点时发生的事件。

fgColor  设置文字颜色
bgColor   设置背景颜色

toUpperCase   小写转成大写
toLowerCase   大写转成小写

form.submit()   提交表单
form.reset()   重置表单

onreset   重置时触发事件
onsubmit   提交时触发事件

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法stringObject.indexOf(searchvalue,fromindex)searchvalue        必需。规定需检索的字符串值。
fromindex        可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
提示和注释
注释：indexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1

onkeyup 事件会在键盘按键被松开时发生。
onkeydown  键盘按下时发生
onKeypress   按下并释放键盘键

onmouseover 事件会在鼠标指针移动到指定的对象上时发生。
onmouseout  事件在鼠标指针移开时发生
mousemove   鼠标移动
例：  onMousemove="javascript:this.style.background='#fff';"
onclick  鼠标单击
onDblclick    双击
onMousedown  鼠标按下
onMouseup  释放鼠标键
onMousewheel  鼠标滚轮滚动

onfocus  对象获得焦点
onblur  失去焦点

onload   载入网页完毕后发生
onunload   卸载某网页

onchange   对象改变
onselect    选取某对象

onsubmit  提交表单
onreset   重置表单

cols  列                 rows    行

rain

面向对象

this指针可以为函数对象动态添加属性。

对象被“new”运算符创建出来以后要由一个变量引用，才可以对其进行调用操作。
对象有三个来源：
    1、引用javascript内部对象。
    2、由浏览器环境中提供。
    3、创建新对象。

js对象的类型在运行时才能确定。

js对象结构有四大部分：
1、语言核心（变量常量、运算符、表达式、数据类型、控制语句等）
2、基本内置对象（String    Date    Math 等）
3、浏览器对象（window   Navigator  Location   document  frames  history ）
4、文档对象（Document  Form  Image等）

事件驱动：整个系统可以用事件的发生来驱动运作。比如当页面加载完成时发生“onload”事件，单击鼠标使用“onclick”，键盘按下“onkeydown”，松开键盘“onkeyup”等

rain

窗口和框架

defaultStatus   默认状态栏信息
status   状态栏瞬间信息

window.open()  打开新窗口
窗口名.close()  关闭窗口
window.frames          得到框架数组

myWindow.scrollBy(50，0)         向右滚动50像素
myWindow.scrollBy(-50,0)           向左滚动50像素
myWindow.scrollTo(1,1)           滚动到原点
myWindow.scrollTo(100,100)   滚动到坐标（100，100）

.parent 父框架
top  顶层的框架
self  当前区域

onFocus 得到焦点
onBlur  失去焦点

errmsg（）错误处理

rows  控制高度   cols  宽度

setTimeout  延迟代码执行
setInterval   周期性执行代码
clearInterval(id)  停止周期性执行代码
clearTimeout(id)  取消延迟执行

target="窗口名"  指定链接文档要使用的窗口

rain

屏幕和浏览器对象
screen   屏幕对象              navigator  浏览器对象

screen.availHeight   实际高
screen.availWidth   实际宽
screen.colorDepth  色盘深度
screen.height          区域高度
screen.width           区域宽度

navigator.mimeTypes     提供当前浏览器所支持的mime类型信息
plugin 管理当前浏览器中已经安装的插件或外挂程序的信息

navigator.javaEnabled()    判断当前浏览器是否已经启用Java支持功能
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

rain

历史对象和地址对象

history 历史对象，客户端浏览器窗口最近浏览过的历史网址是通过该对象来存储管理的。
location 地址对象，客户端浏览器窗口的URL地址信息。

一个URL会有下面的格式：协议（//）+主机：端口（/）+路径名称（#）+哈希标识（？）+搜索条件
参数=window.location.href;  取得整个url字符串
window.location.href="新地址"   将前往指定的页面
location.assign()   加载一个新文档
location.replace()   用新的url替换当前文档
location.reload() 重新载入当前文档 / 刷新文档

刷新的5种方法：
history.go(0)
location.reload()
location=location
window.navigate(location)
location.replace(location)

rain

脚本化cookie
navigator.cookieEnabled     判读浏览器是否支持cookie
split() 方法用于把一个字符串分割成字符串数组。
escape  编码        unescape  还原
expire    设置生存时间
secure  保证cookie与服务器之间的数据传输过程加密

rain

文档对象

document对象代表一个浏览器窗口或框架中显示的HTML文件。
                 .lastModified     最后修改日期
document.title                  显示标题
                .URL                 显示URL

substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法stringObject.substring(start,stop)

参数	描述
start	必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。

document.referrer      返回载入当前文档的文档的 URL
location.hostname     当前主机域名

window.open()  打开一个新的窗口
document.close()     关闭文档流

document.all[]    文档中所有标签组成的一个数组变量

math.abs    返回数字的绝对值
math.floor    返回小于或等于指定数字的最接近的整数
math.random   返回随机数，介于0到1之间

anchors     锚对象

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
实例

在本例中，我们将在 "Hello world!" 字符串内进行不同的检索：

<script type="text/javascript">
var str="Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.lastIndexOf("World") + "<br />")
document.write(str.lastIndexOf("world"))
</script>

以上代码的输出：

0
-1
6

rain

鼠标特效
cursor
event.button==1   鼠标按下事件
0    没按键    1 左键    2右键     3左键和右键    4中间键  

style.cursor='pointer'  鼠标指针形状
text  文字编辑   auto  自动       pointer 手形状，同ie的hand     move   按左键和右键    not-allowed  不允许
no-drop  无法释放     wait 等待，沙漏形状   help 帮助，问号    crosshair  十字准星

e     /    window.event     事件变量    （firefox  /  ie  & chrome）
event.srcElement   /   e.target  设置或获取触发事件的对象
e    事件驱动源(为了兼容IE9之前的版本)
e.preventDefault()       /            e.returnvalue=false    阻止事件默认行为。

rain

按钮特效
window.print()   打印
event.keycode==13  判断是否按enter键
window.status    浏览器窗口状态栏信息

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
offsetHeight与offsetWidth作用相同，前者是获取元素的高度后者则是宽度

onclick=null   单击事件置空
href=‘javascript:void(0)’;   效果等同于  href="#"