Dawninest

JavaScript | h5中的js 

1
2
3
<script stype=“text/javascript”>  </script>
<script stype=“js内容.js”>  </script>
可放到html中的任意位置，不过前面的会被先执行

alert

document.write

  • confirm - 是否选项框 eg:var bool = confirm(“??”) 选择是，返回true，选择否，返回 false

  • prompt - 消息对话框(包含 确定按钮，取消按钮，文本输入框) eg: prompt(str1,str2) str1对话框文本，不可更改 str2对话框内容，可修改

window.open([URL],[窗口名称],[参数字符串])

URL：网址或路径

窗口名称：可由字母数字和下划线字符组成；_blank-新窗口显示目标网页／_self-在当前窗口显示目标网页／-top-框架网页中在上部窗口中显示目标网页；相同name的窗口只能创建一个

参数字符串：

参数 值 说明
top number 窗口顶部离开屏幕顶部的像素
left number 窗口左端离开屏幕左端的像素
width number 窗口宽度
height number 窗口高度
menubar yes,no 窗口有没有菜单
toolbar yes,no 窗口有没有工具条
scrollbars yes,no 窗口有没有滚动条
status yes,no 窗口有没有状态栏 
1
2
3
close() 关闭窗口
window.close();	关闭窗口
<窗口对象>.close();		关闭指定窗口

DOM

文档对象模型DOM(Document Object Model) 定义访问和处理HTML对象文档的标准方法。

DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)

  • 通过标签获取元素 document.getElementById(“id”)

  • innerHTML属性 - 用于获取或替换HTML元素的内容

    语法：Object.innerHTML Object是获取的元素对象，

  • 改变HTML元素的样式 Object.style.property=new style;

    object.style.display 制定标签的显示和隐藏 none-隐藏 block-显示

  • 设置或返回元素的class属性-className 语法：object.className = class

事件

1
2
3
4
5
6
7
8
9
onclick			鼠标单击事件
onmouseover		鼠标经过事件
onmouseout		鼠标移开事件
onchange 		文本框内容改变事件
onselect			文本框内容选中事件
onfocus			光标聚集
onblur			光标离开
onload			网页导入
onunloaf			关闭网页

对象

字符串对象 string

返回指定位置字符 string.charAt(index);

返回指定字符串首次出现的位置 string.indexOf()

字符串分割 string.split()

提取字符串 string.substring(x,y) 开始位置，结束位置

提取指定数目字符 string.substr(x,z) 开始位置，截取长度

数组对象 Array

数组连接 concat(arr1,arr2)

指定分隔符连接数组元素 arr.join(分隔符)

颠倒数组元素顺序 arr.reverse()

选定元素 arr.slice(x,y) 开始序号，结束序号 括号里只有一个数字指从这开始到最后

排序 arr.sort(f()) f()-排序方法

window对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
alert()			显示带有一段消息和一个确认按钮的警告框
prompt()			显示可提示用户输入的对话框
open()			显示带有一段消息以及确认按钮和取消按钮的对话框
close()			打开一个新的浏览器窗口或查找一个已命名的窗口
print()			打印当前窗口内容
focus()			把键盘焦点给予一个窗口
blur()			把键盘焦点从顶层窗口已开
moveBy()			可相对窗口的当前坐标把它移动指定的像素
moveTo()			把窗口的左上角移动到一个指定的坐标
resizeBy()		按照指定的像素调整窗口的大小
resizeTo()			把窗口的大小调整到指定的宽度和高度
scrollBy()			按照指定的像素值来滚动内容
scrollTo()			把内容滚动到指定坐标
serInterval()		每隔指定时间执行代码
setTimeOut()		在指定的延迟时间之后来执行代码
clearInterval()		取消serInterval()的设置
clearTimeOut()	取消setTimeOut()的设置

History对象

1
2
3
4
window.history.[属性|方法]
返回上一页 window.history.back();   back() = go(-1)
返回下一个浏览界面 window.history.forward();   forward()=go(1)
返回指定页面 window.history.go(number)

Location对象

用户获取或设置窗体的URL，并且可以用于解析URL

Location.[属性|方法]

1
2
3
4
5
appCodeName 浏览器代码名的字符串表示
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
platform 返回运行浏览器的系统操作平台
userAgent 返回由客户机发送服务器的 user-agent 头部的值 -即 浏览器内核

screen对象

1
2
3
4
5
6
7
window.screen.属性
avaiHeight 窗口可以使用的屏幕高度
avaiWidth 窗口可以使用的屏幕宽度
colorDepth 浏览器表示的颜色位数 -一般32位
pixDepth 浏览器表示的颜色位数 -一般32位（IE不支持这个属性）
height 屏幕高度
width 屏幕宽度

DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
元素节点
文本节点
属性节点

getElementsById()
getElementsByName()
getElementsByTagName()
elementNode.getAttribute().  通过元素节点的属性名称获取属性的值
elementNode.setAttribute(name,value).	  增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值 
节点属性 
nodeName:节点名称
元素节点与标签名相同-属性节点是属性的名称-文本节点为#text-文档节点#document   
nodeValue:节点值
元素节点为undefined/null.-文本节点为文本本-属性节点为属性的值
nodeType:节点的类型
元素1-属性2-文本3-注释8-文档9

elementNode.childNodes() 访问子节点。    firstChild-lastChild
nextSibling返回某个节点之后紧跟的节点
previousSibling返回某个节点之前紧跟的节点