1.Javascript中的dom对象
1.1按钮点击事件 onclick
具体用法:
1.2页面初始化事件 onload
具体用法:
1.3常见的javascript事件,事件的具体使用方法
1.页面初始化事件
2.按钮点击事件 onclick
3. onchange 事件,当用户改变输入字段的内容时触发
4.onfocus当获得焦点时触发
5.onblur当失去焦点时触发
6.onmouseover 和 onmouseout 事件
7.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。
8.onkeydown 事件会在用户按下一个键盘按键时发生。
常用的事件
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
1.4创建新的 HTML 元素
document.createElement("元素名称");
document.createTextNode("文本内容");
父元素的dom对象.appendChild(node);
删除元素 父元素的dom对象.removeChild(子元素的dom对象);
测试添加和移除元素
2.JavaScript中的BOM对象
浏览器对象模型--Browser ObjectModel (BOM)
2.1Window 对象
1.属性
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案(涵盖所有浏览器):
2.方法
其他方法:open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
格式:window.open(URL,name,features,replace)
| URL | 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。 |
| name | 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 和 |
| features | 一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。【宽高】 |
| replace | 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值: true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。 |
重要事项:请不要混淆方法 Window.open() 与方法 Document.open(),这两者的功能完全不同。为了使您的代
码清楚明白,请使用 Window.open(),而不要使用 open()。
close() 方法用于关闭浏览器窗口。
说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用
close() 来关闭其自身。
只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。
JavaScript 弹窗方法
在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
警告框:window.alert("sometext");
确认框:window.confirm("sometext");
当确认框弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。
提示框:window.prompt("sometext","defaultvalue");
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
参数1---提示信息
参数2---提示框的默认值
测试确认框
2.2子对象
1.Window Screen--屏幕
window.screen 对象包含有关用户屏幕的信息。
1.总宽度和总高度 --- screen.width / screen.height
2.可用宽度和可用高度----screen.availWidth / screen.availHeight
3.色彩深度----screen.colorDepth
4.色彩分辨率----screen.pixelDepth
2.Window Location---页面的地址 (URL)
对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
location.search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号 ? 之后的部分)。